小编Def*_*ine的帖子

我刚刚构建了一个示例 Flutter 应用程序，我想将其部署为 Web 应用程序。Flutter 生成一个名为 main.dart.js 的文件。然而，使用一些对话框、动画等后，这个 js 文件的大小已经接近 2MB（使用 flutter build web 构建）。

现在我已将其部署在 aws-webserver 上 --- 但打开它需要大约 5 秒才能出现，而屏幕完全空白。这不是一个好的经历:-(

那么，问题是如何减少/分割生成的 main.dart.js 的大小，以便 Web 应用程序更快启动？我已经尝试过使用 Dart 延迟加载：

import 'secondpage.dart' deferred as secondpage;
<...>
class MyApp extends StatelessWidget {
  final Future<void> loadedLibrary = secondpage.loadLibrary();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Admin Panel',
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: bgColor,
        textTheme: GoogleFonts.poppinsTextTheme(Theme.of(context).textTheme)
            .apply(bodyColor: Colors.white),
        canvasColor: secondaryColor,
      ),
      navigatorObservers: [TransitionRouteObserver()],
      initialRoute: 'login',
      onUnknownRoute: (context) => null,
      routes: {
        'login': …

是否有可能查看浏览器从我的 Javascript 生成的最终机器代码（x86 指令）？例如

--- Raw source ---
function add(a, b){
  return a + b;
}
...

--- Code ---
source_position = 0
kind = FUNCTION
Instructions (size = 456)
0x36953100     0  8b4c2404       mov ecx,[esp+0x4]
0x36953104     4  81f991806049   cmp ecx,0x49608091          ;; object: 0x49608091 <undefined>
0x3695310a    10  750a           jnz 22  (0x36953116)
0x3695310c    12  8b4e13         mov ecx,[esi+0x13]
0x3695310f    15  8b4917         mov ecx,[ecx+0x17]
0x36953112    18  894c2404       mov [esp+0x4],ecx
0x36953116    22  55             push ebp

谢谢！

我认为，编写 Flutter 时最烦人的问题之一是当你对那些右括号感到困惑/不同步时。

对我来说，经常会发生这样的情况：我添加一个新的父小部件或插入一个被剪断的代码，然后右花括号/方括号/圆括号不匹配，或者分号/冒号丢失......当然，这是可以解决的：转到每个支架和工具都会向您显示反支架，也许您很快就能发现差异……也可能不会。正如您在片段中看到的，该工具通过显示相应的类/小部件来提供一些帮助。但要使其同步，总是需要很长时间......

您对如何快速调整支架有任何最佳实践或提示/建议吗？你的经验是什么？

谢谢！

我想创建一个旋转动画，其中包含一组按钮（排列成圆圈），这些按钮从单击的中心按钮旋转和延伸。

虽然动画和旋转工作良好，并且打开按钮和关闭按钮工作顺利并且尽管旋转但仍响应 onTap()，但外部按钮在“onTap”-GestureDetector 方面不起作用。

目标：我想让红色容器可点击（例如GestureDetector）。问题：红色容器对 onTap() 没有反应。

import "dart:developer" as dev;
import 'dart:math';

import 'package:flutter/material.dart';
import 'package:sdg3/Widget/rotation_controller.dart';
import 'package:sdg3/Widget/rotation_menu_button.dart';
import 'package:vector_math/vector_math.dart' show radians, Vector3;

class RadialMenu extends StatefulWidget {
  final Widget open;
  final Widget? close;
  final int startAngle;
  final List<RotationMenuButton> rotationButtons;
  final RotationController? rotationController;

  const RadialMenu({
    Key? key,
    this.rotationController,
    required this.open,
    this.startAngle = 0,
    this.close,
    required this.rotationButtons,
  }) : super(key: key);

  @override
  createState() => _RadialMenuState();
}

class _RadialMenuState extends State<RadialMenu>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late double maxButtonRadius;

  @override …

我使用 Lotie 动画，将 Flutter 编译并部署为 Web 应用程序。它在桌面 chrome 上运行良好，但在 android chrome 上运行不佳。有人知道问题所在吗？

(Flutter (Channel stable, 3.3.1, on Microsoft Windows [版本 10.0.22000.856], locale de-DE)) Android Chrome 105.0.5195.79，两者都应该是最新的。

main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Lottie.asset("assets/lottie/94729-not-found.json"))));
  }
}

在 Chrome Windows/桌面上一切正常...

在 Chrome Android（也是 Android 模拟器）上 - 以某种方式裁剪

更新：实际上，我观察到所有 Lottie 动画的问题......这是一个 Lottie 错误吗？

谢谢！

我想在 singlechildscrollview 中提供一些按钮

Column(
    children: < Widget > [
      SizedBox(height: constraints.maxHeight / 8.0),
      AnimationConfiguration.staggeredList(
        position: 1,
        duration: const Duration(milliseconds: 2000),
          child: SlideAnimation(
            verticalOffset: constraints.maxHeight / 10,
            child: FadeInAnimation(
              child: Image.asset('images/mylive.png'),
            ),
          ),
      ),
      Flexible(
        child: Padding(
          padding: EdgeInsets.fromLTRB(
            50, 20, 50, constraints.maxHeight / 7),
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(10),
                child: Wrap(
                  spacing: 25,
                  runSpacing: 25,
                  children: const < Widget > [
                    ButtonCard(
                      name: "My News",
                      imgpath: "open-email.png",
                      count: 0),

这是 ButtonCard 的构建方法：

 Widget build(BuildContext context) {
    final double …