3-Flutter工作tips

溢出的解决方法

  1. 使用Column包裹在SingleChildScrollView
1
2
3
SingleChildScrollView(
  child: Column(children: children),
)
  1. 改成 ListView
1
2
3
ListView(
  children: children
)
  1. 使用两者的组合Column和ListView时，使用Expanded或者给ListView一个固定高度
1
2
3
4
5
6
7
8
9
10
Column(
  children: [
    ...children.take(2).toList(), // show first 2 children in Column
    Expanded(
      child: ListView(
        children: children.getRange(3, children.length).toList(),
      ), // And rest of them in ListView
    ),
  ],
)

dialog 高度自适应

unknown_filename.6

flutter可以分架构打包
flutter build apk –obfuscate –split-debug-info debuginfo –target-platform android-arm,android-arm64,android-x64 –split-per-abi

注意

  • Expanded 仅应在 Row，Column 或者 Flex 使用，检查代码.必须是直接的子类，否则 debug 能运行，release 报错。
  • 使用 Flutter Web 目前不适合Web ，对于具有大量密集文本的静态网页，传统的 Web 开发方法支持更快的加载时间和更容易维护。 webdev

Flutter Inspector 不显示解决
< https://stackoverflow.com/questions/64725383/flutter-inspector-stuck-on-installing-dev-tools/65542661#65542661>

flutter 自己的代码打开错乱
把. idea 删掉、对应错误的文件本地打开，然后删掉，或者用 flutter SDK 重新替换

LayoutBuilder

一个 text 的右边和另一个 text 的左边对齐, 另一个 text 宽度还不固定，这两个 widget 不在同一行，是上下两行
使用LayoutBuilder控件来获取第一个Text控件的宽度，并使用这个宽度来设置第二个Text控件的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Column(
  children: [
    Row(
      children: [
        Text('Left Text'),
      ],
    ),
    LayoutBuilder(
      builder: (context, constraints) {
        final leftTextWidth =
            (TextPainter(text: TextSpan(text: 'Left Text'), maxLines: 1, textDirection: TextDirection.ltr)..layout()).width;
        return Row(
          children: [
            SizedBox(width: leftTextWidth),
            Text('Right Text'),
          ],
        );
      },
    ),
  ],
),

手势Draggable文章
https://blog.csdn.net/du591310450/article/details/89845157
https://blog.csdn.net/weixin_52262025/article/details/123618314，用的这个

角度转弧度 π/180×角度
弧度变角度 180/π×弧度
1度=π/180≈0.01745弧度，1弧度=180/π≈57.3度。

计算重叠区域面积
https://leetcode.cn/problems/rectangle-area/solution/223-ju-xing-mian-ji-3xing-dai-ma-by-acw_weian/

UI

  • SingleChildScrollView 可以滚动，如果SingleChildScrollView嵌套SingleChildScrollView，第二SingleChildScrollView需要加个Expanded
  • 有问题的时候可以试试Expanded
  • Expanded 平分加三个Expanded
  • Scaffold(  resizeToAvoidBottomInset: true,） 可以把布局顶上去，不会被输入法遮盖，键盘弹出 overflowed：放这个，Scaffold (  resizeToAvoidBottomInset: false，这样在键盘弹出时将不会 resize
  • Text.rich(TextSpan 一个textviwe不同颜色大小
  • Flexible 可以让 textview 换行
1
2
3
4
5
6
7
8
9
10
11
12
13
RichText(text: TextSpan(
                children: [
                   TextSpan(
                     text:"*",
                     style: TextStyle(color: JCColor.colorAuxRedColor, fontSize: 15)
                   ),
                  TextSpan(
                      text:"费用归属",
                      style: TextStyle(color: JCColor.colorText222Color, fontSize: 15)
                  )
                ]
            )),

  • alignment: Alignment.centerLeft, 左对齐

  • row 水平居中 mainAxisAlignment:MainAxisAlignment.spaceBetween

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    enum MainAxisAlignment {
     //将子控件放在主轴的开始位置
      start,  
       //将子控件放在主轴的结束位置
      end,
      //将子控件放在主轴的中间位置
      center,
      //将主轴空白位置进行均分，排列子元素，手尾没有空隙
      spaceBetween,
      //将主轴空白区域均分，使中间各个子控件间距相等，首尾子控件间距为中间子控件间距的一半
      spaceAround,
      //将主轴空白区域均分，使各个子控件间距相等
      spaceEvenly,
    }

  • Row mainAxisSize: MainAxisSize.min,//wrap_content ,不加的话默认为match_parent（MainAxisSize.max）

  • Column mainAxisAlignment: MainAxisAlignment.center,

unknown_filename

listview嵌套listview

1
2
3
4
5
6
7
8
9
child: ListView.separated(
                      shrinkWrap: true,
                      physics: NeverScrollableScrollPhysics(),  //list嵌套listview
                      itemCount: logic.architectureList?.length ?? 0,
                      itemBuilder: (context, index) =>
                          _buildItem(logic.architectureList?[index]),
                      separatorBuilder: (context, index) => Divider(height: .0),
                    ));

ListView.separated 有分割线

1
2
3
4
5
6
7
8

Visibility(
  visible: true,
  //是否保持占位
  maintainState: false,
  child: Text("显示"),
),

弹窗

1
2
3
4
5
6
7
8
9
showModalBottomSheet(
                      shape: const RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(16),
                              topRight: Radius.circular(16))),
                      context: context,
                      builder: (BuildContext context) {
                        return AirTicketRuleDialog();
                      });
  • Spacer其实就是包装了一个 Expanded 的 SizedBox. 我们可以通过它灵活控制 Row/Column。 Spacer(flex: 2), // 弹性系数为2
  • 返回键
1
2
3
4
5
WillPopScope(
              child: this,
              onWillPop: () async {
                return Future.value(false);
              });

  • 这种布局
    unknown_filename.1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    Row(children: [
             const SizedBox(width: 32),
             Expanded(
               child: Text(
                 '退改行李规定',
                 textAlign: TextAlign.center,
             ),
             InkWell(    ]),

  • MediaQuery.removePadding 可以移除组件的边距，有些组件自带有边距，

通知栏高度

1
2
final dynamic padding = MediaQuery.of(context).padding;
padding: EdgeInsets.only(top: padding.top),

动画

分类
缩放动画
ScaleTransition：可以将 Widget 平滑地缩放。
AnimatedContainer：可以平滑地调整 Widget 的大小。
旋转动画
RotationTransition：可以将 Widget 平滑地旋转。
透明渐变动画
FadeTransition：可以将 Widget 平滑地改变透明度。
AnimatedOpacity：可以平滑地调整 Widget 的透明度。

主要类
在使用 Flutter 动画的时候, 我们通常使用这几个组件.
AnimationController, 控制动画的抽象类
Animation, 给定值, 转换为动画
Tween, 执行范围
AnimatedBuilder, 处理动画的 Widget
Transform 控件可以将动画执行中的变量值处理反馈在子控件上.
https://github.com/dlgchg/animations_flutter

刷新

  • flutter 同一个页面，关闭后，再重新打开
  • eventbus
  • then back
  • 在onresume里刷新
  • find原来的logic，调用他的方法

Android二次进入同一Flutter页面，Flutter没有刷新
Flutter页面使用StatefulWidget组件，并重写didUpdateWidget（）。

技巧

flutter run –release 这样运行，正式版也可以看日志**

dio抓包

1
2
3
4
5
6
7
8
dio = Dio(options);
(dio?.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate =
    (HttpClient client) {
  client.findProxy = (uri) {
    return 'PROXY 172.16.60.122:8888';
  };
};

cancelTap
传接口时不要当成方法，要不然直接调用

日志过滤

防止tab每次都刷新
AutomaticKeepAliveClientMixin

修改 minSdkVersion
由于 Flutter 3.13 及更高版本的更改而更新的响应

在此版本中，此文件_flutter-directory/packages/flutter_tools/gradle/flutter. gradle的内容已移至此新位置flutter-directory/packages/flutter_tools/gradle/src/main/groovy/flutter. groovy_。和默认的 minSdkVersion = 19. 但为了安全地使用最新的软件包和 Android 设备，最好将其设置为 minSdkVersion = 20.

flutter 动态化

Flutter 混合开发 - 动态下发 libflutter. so & libapp. so - 掘金
https://juejin.cn/post/7313446602441785382?utm_source=gold_browser_extension

Flutter动态化方案—源码解析（基于1.22以上版本) - 掘金 (juejin.cn)
https://juejin.cn/post/7189533148022046778?#heading-7

分包

flutter create –template=package  /Users/tal/flutteProjects/hello
flutter packages pub publish –dry-run
flutter packages pub publish –server= https://pub.dartlang.org

hello:
    path: /Users/tal/flutteProjects/hello 

flutter build apk –split-per-abi
fat-aar-android ：build aar 后没有打出 release
assembleRelease  编译不过，报错

路由跳转

Get. off () 导航到下一个页面并删除前一个页面
Get. offAll () 导航到下一个页面并删除以前所有的页面
类似 singleTop，启动页面需要指定路由名字

  • 跳转页面

    • 原生：Navigator.pushNamed(...)
    • GetX：Get.toNamed(...)

  • 关闭直到指定页面

    • 原生：Navigator.popUntil(ModalRoute.withName(...))
    • GetX：Get.until((route) => Get.currentRoute == ...)

普通路由 ：直接跳转页面
命名路由：给路由起名字Navigator.of(context).pushNamed(“/search”);
unknown_filename.5

其他语言 > flutter
3-Flutter工作tips
http://peiniwan.github.io/2025/12/419bc25ead72.html
作者
六月的雨
发布于
2025年12月16日
许可协议