精华 Flutter老版本如何迁移到flutter2.2.x新版本

Flutter新版本和老版本的用法基本是一样的，下面我们一起看看Flutter老版本如何迁移到flutter2.2.x新版本

2021年5月19日的时候Flutter官方发布了Flutter2.2.0的版本，Flutter2.2.0之后的版本中，创建组件的构造函数时需要注意把Key改为可空类型。

1、Flutter老版本迁移到flutter2.2.x新版本在创建组件的时候需要注意Key

Flutter2.2.0之前我们生成的组件格式如下：

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
       child: Text("StatefulWidget"),
    );
  }
}

但是Flutter2.2.0之后它在HomePage({Key key}) : super(key: key); 这一行会有警告提示。

警告提示内容如下：

The parameter 'key' can't have a value of 'null' because of its type, but the implicit default value is 'null'. Try adding either an explicit non-'null' default value or the 'required' modifier 解决办法: 把HomePage({Key key}) : super(key: key);代码改为 HomePage({Key? key}) : super(key: key);

其中的{Key? key}表示key为可空类型。

改完后的代码：

class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
       child: Text("StatefulWidget"),
    );
  }
}

HomePage({Key? key}) : super(key: key);中的key表示的是组件的唯一标识符，正常情况我们不需要传入任何值的，刚开始学的时候可以不用管这个key。

例如：我们想的是在商品列表页面通过事件调用属性筛选的侧边栏，这个时候就可以给Scaffold指定一个Key，然后通过对应的Key来调用Scaffold里面的侧边栏，详情见Flutter仿京东商城项目11讲《 Flutter仿京东商城项目 商品列表页面二级筛选导航布局》：https://www.itying.com/goods-1120.html

2、Flutter老版本迁移到flutter2.2.x新版本 配置路由的时候注意可空类型

import 'package:flutter/material.dart';

import '../pages/Tabs.dart';
import '../pages/Form.dart';
import '../pages/Search.dart';
import '../pages/Product.dart';
import '../pages/ProductInfo.dart';

//配置路由,定义Map类型的routes,Key为String类型，Value为Function类型
final Map<String,Function> routes={
      '/':(context)=>Tabs(),
      '/form':(context)=>FormPage(),
      '/product':(context)=>ProductPage(),
      '/productinfo':(context,{arguments})=>ProductInfoPage(arguments:arguments),
      '/search':(context,{arguments})=>SearchPage(arguments:arguments),
};

//固定写法
var onGenerateRoute=(RouteSettings settings) {      
      //String? 表示name为可空类型
      final String? name = settings.name; 
      //Function? 表示pageContentBuilder为可空类型
      final Function? pageContentBuilder = routes[name];      
      if (pageContentBuilder != null) {
        if (settings.arguments != null) {
          final Route route = MaterialPageRoute(
              builder: (context) =>
                  pageContentBuilder(context, arguments: settings.arguments));
          return route;
        }else{
            final Route route = MaterialPageRoute(
              builder: (context) =>
                  pageContentBuilder(context));
            return route;
        }
      }
};

3、注意Dart 2.13之后的一些新特性Null safety 、late 关键字、空类型声明符？、非空断言！、required 关键字

必看教程： https://www.bilibili.com/video/BV1S4411E7LY?p=15

flutter2.2.x新版本基于Dart 2.13，新增了Null safety 、late 关键字、空类型声明符？、非空断言！、required 关键字等。升级的时候需要注意。