Flutter 项目开发

分手后的思念是犯贱 2022-02-26 00:42 336阅读 0赞

[Flutter 中文网][Flutter]  
[Flutter 文档][Flutter 1]  
[Dart 文档][Dart]  
[Pub 插件包][Pub]  
[Github Flutter][]

## 路由 ##

可以使用 [Fluro][]

这个路由库的传参方式好像只有一种，不太灵活；传个中文的参数，必须编码，否则报错；路由的切换动画使用方便。

框架的路由功能：命名路由不能传参；路由栈的实例化方式可以传中文，路由退栈时也可以传数据。

// 框架的路由功能，还有很多... 
    Navigator.push(context, ...).then((params){...});
    Navigator.pop(context, params);
    
    dependencies:
    fluro: ^1.4.0
    
    // 常用的方法
    final router = Router();
    
    var usersHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
      return UsersScreen(params["id"][0]);
    });
    
    void defineRoutes(Router router) {
      router.define("users/:id", handler: usersHandler, transitionType: TransitionType.inFromLeft);
    }
    
    router.navigateTo(context, "/users/1234", transition: TransitionType.fadeIn);
    
    // 具体项目的用法
    // application.dart 文件
    class Application {
      static Router router;
    }
    
    // route_handlers.dart 文件
    var demoRouteHandler = new Handler(
        handlerFunc: (BuildContext context, Map<String, List<String>> params) {
      		String message = params["message"]?.first;
      		
      		return new DemoSimpleComponent(message: message);
    });
    
    // routes.dart 文件
    class Routes {
      static String root = "/";
      static String demoSimple = "/demo";
    
      static void configureRoutes(Router router) {
        router.notFoundHandler = new Handler(
            handlerFunc: (BuildContext context, Map<String, List<String>> params) {
          	print("ROUTE WAS NOT FOUND !!!");
        });
        router.define(root, handler: rootHandler);
        router.define(demoSimple, handler: demoRouteHandler, transitionType: TransitionType.inFromLeft);    
      }
    }
    
    // app_component.dart 文件  代码有省略
    class AppComponentState extends State<AppComponent> {
      AppComponentState() {
        final router = new Router();
        Routes.configureRoutes(router);
        Application.router = router;
      }
    
      @override
      Widget build(BuildContext context) {
        final app = new MaterialApp(
          title: 'Fluro',
          debugShowCheckedModeBanner: false,
          theme: new ThemeData(
            primarySwatch: Colors.blue,
          ),
          onGenerateRoute: Application.router.generator,  // 生成路由
        );
        print("initial route = ${app.initialRoute}");
        return app;
      }
    }
    
    // 手动调用路由功能
    String route = "/demo?message=$message&color_hex=$hexCode";
    TransitionType transitionType = TransitionType.native;  // TransitionType.inFromLeft  fadeIn
    Application.router
              .navigateTo(context, route, transition: transitionType)
              .then((result) {
            		if (key == "pop-result") {
              			Application.router.navigateTo(context, "/demo/func?message=$result");
            		}
          	  });

## 屏幕适配 ##

可以使用 [flutter\_screenutil][flutter_screenutil]

根据设计图的尺寸进行适配，可以适配宽度、高度、字体大小，传入整型数值，按照比例换算后返回浮点数值。

框架的 Flex/Row/Column -> Expended 可以设置 flex 。

dependencies:
    flutter:
        sdk: flutter
      # 添加依赖
      flutter_screenutil: ^0.5.0
    
    import 'package:flutter_screenutil/flutter_screenutil.dart';
    
    // 默认 width : 1080px , height:1920px , allowFontScaling:false
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);
    
    // 根据屏幕宽度适配 width: 
    ScreenUtil.getInstance().setWidth(540);
    ScreenUtil.getInstance().setHeight(200);
    ScreenUtil().setHeight(200);
    
    // 传入字体大小
    ScreenUtil.getInstance().setSp(28) ;
    ScreenUtil(allowFontScaling: true).setSp(28);   
    
    // 相关的属性
    ScreenUtil.pixelRatio       //设备的像素密度
    ScreenUtil.screenWidth      //设备宽度
    ScreenUtil.screenHeight     //设备高度
    ScreenUtil.bottomBarHeight  //底部安全区距离，适用于全面屏下面有按键的
    ScreenUtil.statusBarHeight  //状态栏高度 刘海屏会更高  单位px
    ScreenUtil.textScaleFactory //系统字体缩放比例
    
    ScreenUtil.getInstance().scaleWidth  // 实际宽度的dp与设计稿px的比例
    ScreenUtil.getInstance().scaleHeight // 实际高度的dp与设计稿px的比例

## 消息提示 ##

可以使用 [fluttertoast][]

fluttertoast: ^3.0.3
    flutter packages get
    
    import 'package:fluttertoast/fluttertoast.dart';
    
    Fluttertoast.showToast(
       msg: "This is a Toast 这是测试",
       toastLength: Toast.LENGTH_SHORT,    // Toast.LENGTH_LONG
       gravity: ToastGravity.BOTTOM,    // TOP CENTER 
       timeInSecForIos: 1,
       backgroundColor: Color(0x99000000),
       textColor: Colors.white,
       fontSize: 16.0
    );
    
    Fluttertoast.cancel();

## 网络请求 ##

可以使用 [dio][]

详细的中文文档，还有丰富的例子，忍不住点了 star 。

dependencies:
      dio: ^2.1.x  // 请使用pub上2.1分支的最新版本
      
    import 'package:dio/dio.dart';
    
    Response response;
    Dio dio = new Dio();
    
    // 配置 dio 实例
    dio.options.baseUrl = "https://www.xx.com/api";    // 如果请求的路径以 http 开头，则忽略
    dio.options.connectTimeout = 5000;     // 5s
    dio.options.receiveTimeout = 3000;
    dio.options.contentType = ContentType.parse("application/x-www-form-urlencoded");
    
    // 或者通过传递一个 `options` 来创建 dio 实例
    Options options = new BaseOptions(
        baseUrl: "https://www.xx.com/api",
        connectTimeout: 5000,
        receiveTimeout: 3000,
    );
    // Dio dio = new Dio(options);
    
    response = await dio.get("/test?id=12&name=wendu");
    print(response.data.toString());
    
    // 请求参数也可以通过对象传递，上面的代码等同于：
    response = await dio.get("/test", queryParameters: {"id": 12, "name": "wendu"});
    print(response.data.toString());
    
    response = await dio.post("/test", data: {"id": 12, "name": "wendu"});
    
    response = await dio.download("https://www.google.com/", "./xx.html");
    
    FormData formData = new FormData.from({
        "name": "wendux",
        "age": 25,
      });
    response = await dio.post("/info", data: formData);
    
    // Dio 实例的核心 API 是 :
    Future request(String path, {data, Map queryParameters, Options options, CancelToken cancelToken, 	  
        ProgressCallback onSendProgress, ProgressCallback onReceiveProgress);
    
    response = await request(
        "/test",
        data: {"id": 12, "name": "xx"},
        options: Options(method: "GET"),
    );
    
    // 请求配置
    // method baseUrl headers path contentType responseType validateStatus queryParameters
    
    // 响应数据 Response
    // data headers request statusCode isRedirect
    
    // 泛型支持 指定响应数据类型
    dio.options.responseType=ResponseType.plain;
    Response response = await dio.get("/test", options: Options(responseType: ResponseType.plain));
    Response<String> response = await dio.get<String>("/test");
    
    // 拦截器
    dio.interceptors.add(InterceptorsWrapper(
        onRequest:(RequestOptions options){     
         return options;     // continue
         
         // 如果你想完成请求并返回一些自定义数据，可以返回一个`Response`对象或返回`dio.resolve(data)`    
         // 如果你想终止请求并触发一个错误,你可以返回一个`DioError`对象，或返回`dio.reject(errMsg)`
         return dio.resolve("fake data");     
        },
        onRequest:(Options options) async {       
            Response response = await dio.get("/token");      
            options.headers["token"] = response.data["data"]["token"];
    		
    		// 需要串行化请求/响应的场景中
    		dio.interceptors.requestLock.lock();    // dio.lock()  dio.clear() 
    		dio.interceptors.requestLock.unlock();
    
            return options;     // continue
        },
        onResponse:(Response response) {    
         return response;     // continue
        },
        onError: (DioError e) {     
         return e;    // continue
        }
    ));
    
    // 日志  拦截器队列的执行顺序是 FIFO 建议把 log 拦截添加到队尾
    dio.interceptors.add(LogInterceptor(responseBody: false));     // 开启请求日志
    
    // Cookie 管理
    // dio 默认使用 CookieJar , 它会将cookie保存在内存中。 
    // 如果您想对 cookie 进行持久化, 请使用 PersistCookieJar
    dio.interceptors.add(CookieManager(CookieJar())); 
    
    // FormData
    FormData formData = new FormData.from({
        "name": "wendux",
        "age": 25,
        "file": new UploadFileInfo(new File("./example/upload.txt"), "upload.txt")
    });
    response = await dio.post("/info", data: formData);
    
    // 转换器
    // 强烈建议 json 的解码通过 compute 方法在后台进行
    _parseAndDecode(String response) {
      return jsonDecode(response);
    }
    parseJson(String text) {
      return compute(_parseAndDecode, text);
    }
    void main() {  
      (dio.transformer as DefaultTransformer).jsonDecodeCallback = parseJson;
      runApp(MyApp());
    }
    
    // 执行流
    // 请求拦截器 >> 请求转换器 >> 发起请求 >> 响应转换器 >> 响应拦截器 >> 最终结果
    
    // HttpClientAdapter
    // Dio 和 HttpClient 之间的桥梁
    
    // 设置 Http 代理
    (dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) {    
        client.findProxy = (uri) {
            //proxy all request to localhost:8888
            return "PROXY localhost:8888";
        };
        // you can also create a new HttpClient to dio
        // return new HttpClient();
    };
    
    // Https 证书校验  请求取消  其它的可以看官方的

## 自定义图标 ##

可以使用 [fluttericon][]  
图标的素材也可以使用 [iconfont][]

选择好图标，或者上传好图标后，设置名字，点击下载按钮，可以下载转换后的字体文件和代码，就可以在项目中使用了。

不需要的图标库要删除，还有框架自带的图标 `uses-material-design: false` 。

## 高德地图 ##

可以使用高德地图的 Flutter 插件包，[文档][Link 1] ，[API][]

## 图片和视频上传 ##

调用原生功能获取图片或视频，可以使用 [image\_picker][image_picker]

dependencies:
      image_picker: ^0.5.3+1
    
    $ flutter packages get
    
    import 'package:image_picker/image_picker.dart';
    
    Future getImage() async {
      var image = await ImagePicker.pickImage(source: ImageSource.camera);
    
      setState(() {
        _image = image;    // File _image;  Image.file(_image);
      });
    }

## 日期选择 ##

日期选择可以使用 [flutter\_picker][flutter_picker]  
一个通过滚动或滑动选择的功能，可以用来选择数字、日期、数组或关联的数组。

flutter_picker:
      git: git://github.com/yangyxd/flutter_picker.git
    
    import 'package:flutter_picker/flutter_picker.dart';
    
    final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
    showPicker(BuildContext context) {
    
        Picker(
            cancelText: "取消",
            confirmText: "保存",
            adapter: DateTimePickerAdapter(type: 7, isNumberMonth: true),
            title: Text("选择日期"),
            textAlign: TextAlign.left,
            textStyle: const TextStyle(color: Colors.blue),
            onConfirm: (Picker picker, List value) {
              DateTime time = (picker.adapter as DateTimePickerAdapter).value;
              String year = time.year.toString();
              String month = time.month > 9 ? time.month.toString() : "0" + time.month.toString();
              String day = time.day > 9 ? time.day.toString() : "0" + time.day.toString();          
               setState(() {
                  _value = "${year+'-'+month+'-'+day}";
               });
           	},
        ).show(_scaffoldKey.currentState);
    
    	Picker(
            changeToFirst: true,
            adapter: PickerDataAdapter<String>(data: dataList),
            title: Text("选择城市"),
            cancelText: "取消",
            confirmText: "保存",
            textAlign: TextAlign.left,
            textStyle: const TextStyle(color: Colors.blue),
            onConfirm: (Picker picker, List value) {         
              var arry = picker.getSelectedValues();
              provinceGuid = arry[0];
              provinceName = dataDicList.firstWhere((c) => c[arry[0]] != null)[arry[0]];
              cityGuid = arry[1];
              cityName = dataDicList.firstWhere((c) => c[arry[1]] != null)[arry[1]];
              regionGuid = arry[2];
              regionName = dataDicList.firstWhere((c) => c[arry[2]] != null)[arry[2]];
              setState(() {
                userInfo["provinceGuid"] = provinceGuid;
                userInfo["provinceName"] = provinceName;
                userInfo["cityGuid"] = cityGuid;
                userInfo["cityName"] = cityName;
                userInfo["regionGuid"] = regionGuid;
                userInfo["regionName"] = regionName;
              });
            }
        ).show(_scaffoldKey.currentState);
        
    }

## 权限授权 ##

手机的权限授权插件，[permission\_handler][permission_handler]

## 输出项目日志和捕获错误报告 ##

使用框架的功能开发的。

import 'dart:io';
    import 'dart:async';
    import 'package:flutter/foundation.dart';
    import 'package:path_provider/path_provider.dart';
    
    /// ### 记录项目日志、捕获项目错误、缓存所有记录、写入文件、上传服务器
    /// * 初始化：
    /// ```dart
    /// ErrorLog.log = new ErrorLog(
    ///     reportZone: () async {
    ///         runApp(new MyApp());
    ///     },
    ///     debugMode: true,
    ///     uploadFile: (file) async {},
    ///     minutesWait: 30,
    ///     [fileName: 'error_log.txt']
    /// );
    /// ```
    /// 
    /// ### 项目日志
    /// 默认标记的项目日志可以使用相应的方法；自定义标记的项目日志可以使用基础方法。
    /// * 使用方式：
    /// ```dart
    /// ErrorLog.log.debug('msg'*8);
    /// ErrorLog.log.info('msg'*8);
    /// ErrorLog.log.warn('msg'*8);
    /// ErrorLog.log.error('msg'*8);
    /// ErrorLog.log.fatal('msg'*8);
    /// ErrorLog.log.collectLog('msg'*8, 'error');  // 都是调用这个基础方法
    /// ```
    /// * 输出格式：
    /// #### [2019-04-18 11:50:29.844858][error] msgmsgmsgmsgmsgmsgmsgmsg
    /// 
    /// ### 错误报告
    /// 错误报告的信息比较多，标记为`report`。
    /// * 使用方式：
    /// 自动捕获错误，不包含 `try/catch`，不包含 `print`。
    /// * 输出格式：
    /// #### [2019-04-18 14:05:03.578755][report]
    /// #### 所有错误信息
    /// 
    /// ### 写入文件
    /// 所有记录都缓存在一个数组里，如果`debugMode`为真，打印到控制台；
    /// 否则根据数组索引异步写入文件`error_log.txt`，在初始化时可传参`fileName`。
    /// * 使用方式：
    /// ```dart
    /// ErrorLog.log.printBuffer();  // 打印记录缓存
    /// ErrorLog.log.clearFile();    // 清空记录文件
    /// ErrorLog.log.printFile();    // 打印文件内容
    /// ```
    /// 
    /// ### 上传服务器
    /// 打开应用时上传一次，然后设置计时器，建议30分钟上传一次。
    /// * 使用方式：
    /// 初始化时传参`uploadFile`和`minutesWait`，获取记录的文件`ErrorLog.log.logFile`。
    /// 
    class ErrorLog {
    
      /// 实例，静态属性
      static ErrorLog log;
    
      /// 捕获错误的区域
      Function _reportZone;
    
      /// 是否调试模式
      bool _debugMode;
    
      /// 缓存记录的数组
      List<String> _logBuffer;
    
      /// 文件记录
      File _logFile;
      File get logFile => _logFile;
    
      /// 文件记录的起点
      int _startIndex;
    
      /// 文件记录的终点
      int _endIndex;
    
      /// 上传记录文件
      Function _uploadFile;
    
      /// 上传时间间隔
      int _minutesWait;
    
      /// 记录文件是否变化
      bool _fileChange;
    
      /// 记录文件的名称
      String fileName;
    
      ErrorLog({
        @required Function reportZone, 
        @required bool debugMode,
        @required Function uploadFile,
        @required int minutesWait,
        this.fileName = 'error_log.txt'
      }) {
        
        _reportZone = reportZone;
        _debugMode = debugMode;
        _uploadFile = uploadFile;
        _minutesWait = minutesWait;
        
        init();
    
      }
    
      /// 初始化
      void init() async {
    
        _logBuffer = [];
        _startIndex = 0;
        _endIndex = 0;
        _fileChange = false;
    
        FlutterError.onError = (FlutterErrorDetails details) {
          reportError(details);
        };
    
        runZoned(
          _reportZone, 
          onError: (Object obj, StackTrace stack) {
            var details = makeDetails(obj, stack);
            reportError(details);
          }
        );
    
        _logFile = await _getLocalFile();
        _uploadFile(_logFile);
        Timer.periodic(Duration(minutes: _minutesWait), (timer) async {
          if (_fileChange) {
            await _uploadFile(_logFile);
            _fileChange = false;
          }
        });
    
      }
    
    
      /// 错误报告
      void reportError(FlutterErrorDetails details) {
    
        String errorMeta = '[' + (new DateTime.now().toString()) + '][report]';
        _logBuffer.add(errorMeta + '\n' + details.toString());
    
        if (_debugMode) {
          print(errorMeta);
          print(details.toString());
        } else {
          _writeFile();
        }
        
      }
    
      /// 项目日志
      collectLog(String line, String label) {
    
        String contents = '[' + (new DateTime.now().toString()) + '][' + label + '] ' + line;
        _logBuffer.add(contents + '\n');
    
        if (_debugMode) {
          print(contents);
        } else {
          _writeFile();
        }
        
      }
    
    
      /// 打印文件
      Future<Null> printFile() async {
        _readLocalFile().then((contents) {
          print(contents);
        });
      }
    
      /// 打印缓存
      Future<Null> printBuffer() async {
        print( _logBuffer.toString() );
      }
    
      /// 清空文件
      Future<Null> clearFile() async {
        await _logFile.writeAsString('', mode: FileMode.write);
      }
    
      /// 实时写入文件，防止意外
      Future<Null> _writeFile() async {
    
        int len = _logBuffer.length;
        if (len > _endIndex) {
          _startIndex = _endIndex;
          _endIndex = len;
          Iterable<String> range = _logBuffer.getRange(_startIndex, _endIndex);
          await _writeLocalFile( range.join('\n') );
          _fileChange = true;
        } 
    
      }
    
      /// 获取文件
      Future<File> _getLocalFile() async {
        String dir = (await getApplicationDocumentsDirectory()).path;
        return new File('$dir/' + fileName);
      }
    
      /// 读取文件
      Future<String> _readLocalFile() async {
        String contents = await _logFile.readAsString();
        return contents;
      }
    
      /// 写入文件
      Future<Null> _writeLocalFile(String contents) async {
        await _logFile.writeAsString(contents, mode: FileMode.append, flush: false);
      }
    
    
      /// 构建错误信息
      FlutterErrorDetails makeDetails(Object obj, StackTrace stack) {
        return FlutterErrorDetails(exception: obj, stack: stack);
      }
    
      /// 调试
      void debug(String msg) {
        collectLog(msg, 'debug');
      }
    
      /// 信息
      void info(String msg) {
        collectLog(msg, 'info');
      }
    
      /// 警告
      void warn(String msg) {
        collectLog(msg, 'warn');
      }
    
      /// 错误
      void error(String msg) {
        collectLog(msg, 'error');
      }
    
      /// 致命错误
      void fatal(String msg) {
        collectLog(msg, 'fatal');
      }
    
    }

## 注意事项 ##

1、安卓模拟器在调试的时候，可能会出现旧的组件，可以停止调试，卸载模拟器上的项目，再重新调试；  
2、定义一个类时，写好注释方便使用，注释符号使用 `///` `[]` `*` ``` `` ``` ，解释一下，每行的开头符号、引用其它类名、列表项符号、引用代码；  
3、使用组件时，多用用右键的重构功能，减少被晕的次数；  
4、组件更新后，想要真正渲染到界面需要修改 `key`，因为更新组件的条件是判断新旧组件的 `runtimeType` 和 `key` 是否有变化；

[Flutter]: https://flutterchina.club/using-packages/
[Flutter 1]: https://docs.flutter.dev/flutter/widgets/widgets-library.html
[Dart]: https://api.dartlang.org/stable/2.2.0/dart-core/dart-core-library.html#classes
[Pub]: https://pub.dartlang.org/
[Github Flutter]: https://github.com/flutter/flutter
[Fluro]: https://github.com/theyakka/fluro
[flutter_screenutil]: https://github.com/OpenFlutter/flutter_screenutil/blob/master/README_CN.md
[fluttertoast]: https://pub.dartlang.org/packages/fluttertoast#-readme-tab-
[dio]: https://github.com/flutterchina/dio/blob/master/README-ZH.md
[fluttericon]: http://fluttericon.com/
[iconfont]: https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4&type=1
[Link 1]: https://pub.dartlang.org/packages/amap_base#-readme-tab-
[API]: https://pub.dartlang.org/documentation/amap_base/latest/amap_base/AMapView-class.html
[image_picker]: https://pub.dartlang.org/packages/image_picker#-readme-tab-
[flutter_picker]: https://github.com/yangyxd/flutter_picker
[permission_handler]: https://pub.dartlang.org/packages/permission_handler#-readme-tab-