flutter 相关知识点（持续更新）

开发环境基础入门参考我的另一篇文章：flutter 开发（一）

文字过渡动画

AnimatedDefaultTextStyle buildAnimatedDefaultTextStyle(
      text, active, fontColor) {
    // TextStyle(
    //                 color: fontColor, fontSize: isActive ? 32.w : 28.w),
    //           )
    return AnimatedDefaultTextStyle(
      ///设置Text中的文本样式
      ///每当样式有改变时会以动画的方式过渡切换
      style: active
          ? TextStyle(fontSize: 32.w, color: fontColor)
          : TextStyle(fontSize: 28.w, color: fontColor),

      ///动画切换的时间
      duration: const Duration(milliseconds: 200),

      ///动画执行插值器
      curve: Curves.bounceInOut,

      ///文本对齐方式
      textAlign: TextAlign.start,

      ///文本是否应该在软换行符处换行
      softWrap: true,

      ///超过文本行数区域的裁剪方式
      ///设置设置为省略号
      overflow: TextOverflow.ellipsis,

      ///最大显示行数
      maxLines: 1,

      ///每当样式有修改触发动画时
      ///动画执行结束的回调
      onEnd: () {
        print("动画执行结束");
      },

      ///文本组件
      child: Text(text),
    );
  }

flutter 自适应高度

// 使用column 或row 的以下属性 可以实现
 mainAxisSize: MainAxisSize.min,

运用map 构建widget

     // 如果需要索引（index）
// 一：
       [].asMap().map(
                  (index, e) {
                    return MapEntry(
                      index,
                      Text(e['name'],
                           style: TextStyle(
                           color: rgba(51, 51, 51, 1),
                           fontSize: 28.w,
                          ),
                      ),
                    );
                  },
                ).values.toList()
// 几个关键的地方(必须)
// 1: asMap()   2: MapEntry()  3: .values.toList() 

// 二：
ListView(
      shrinkWrap: true,
      physics: widget.physics,
      children: <Widget>[
        for (int i = 0; i < widget.steps.length; i += 1)
          Column(
            key: _keys[i],
            children: <Widget>[
              InkWell(
                onTap: widget.steps[i].state != StepState.disabled ? () {
                  // In the vertical case we need to scroll to the newly tapped
                  // step.
                  Scrollable.ensureVisible(
                    _keys[i].currentContext!,
                    curve: Curves.fastOutSlowIn,
                    duration: kThemeAnimationDuration,
                  );

                  widget.onStepTapped?.call(i);
                } : null,
                canRequestFocus: widget.steps[i].state != StepState.disabled,
                child: _buildVerticalHeader(i),
              ),
              _buildVerticalBody(i),
            ],
          ),
      ],
    );

// 不需要索引
       [].map((e)=>Text(e['name'],
                       style: TextStyle(
                                  color: rgba(51, 51, 51, 1),
                                  fontSize: 28.w,
                                      ),
                      );
                      ).toList()

获取widget宽高并为另一widget设置宽高

// 放到initState()中，公共GlobalKey 去获取目标widget的宽高，并设置另一个widget的top值girdleTop

   // 这个方法是在widget单次构建完成后的回调
   WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
      var pickerHeight = pickerKey.currentContext!.size!.height;
      setState(() { // 虽然在initState里面但作用域的问题 还是需要setState才能初始生效
        girdleTop = pickerHeight / 2 - (90.h / 2);
      });
    });

2022.11.2更新

flutter 命令行添加自定义变量,实现环境变量的设置

在命令行上添加： --dart-define=[ENV]=[dev]
ENV：变量名；
dev：变量值；
如：

// 开发环境
flutter run -d chrome --dart-define=ENV=dev
// 生产环境
flutter build web --dart-define=ENV=prod

在页面中使用：

  const String _env = String.fromEnvironment('ENV');

flutter 配置环境变量（基于命令行添加自定义变量）

使用：flutter_dotenv;
安装：

flutter pub add flutter_dotenv

使用：

import 'package:flutter_dotenv/flutter_dotenv.dart';
void main() async {
  const String _env = String.fromEnvironment('ENV');
  await dotenv.load(fileName: _env + '.env');
  runApp(const MyApp());
}

页面中获取使用：

String http = dotenv.get('API_URL'); // API_URL 为.env文件中的变量名

注意:
每一个.env 文件都应在pubspec.yaml 中声明路径:

      assets:
          - dev.env
          - test.env
          - prod.env

2022.11.3更新

flutter web hash路由使用

flutter sdk版本:“>=2.15.1 < 3.0.0”
第一步，正常通过onGenerateRoute创建路由

参考官方定义onGenerateRoute方法，让页面能够保持正确路由，请参考红圈处

第二步，页面中使用：
下面变量route 的值为settings ,可取name(path),和页面args（query参数）

部分错误解决方案

（1）Dependency ‘androidx.webkit:webkit:1.5.0’ requires ‘compileSdkVersion’ to be set to 32 or higher.Compilation target for module ‘:app’ is ‘android-31’

报错如下

解决方案：
1 在.android\app\build.gradle文件中修改如下：
（注意 minSdkVersion 的版本也不能低于19）

2 在文件 .android\Flutter\build.gradle 中
compileSdkVersion 也要修改为 32