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

发布于 3 年前 作者 phonegap100 1050 次浏览 最后一次编辑是 3 年前 来自 分享

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 关键字等。升级的时候需要注意。

回到顶部