Flutter实战项目-第二篇 字节跳动调试工具、静态资源及阿里图标库

概要

• 配置字节跳动调试工具
• 图片配置
• 配置阿里图标库
• 语言汉化

     参考信息：https://github.com/bytedance/flutter_ume

一、安装包

dev_dependencies: # Don't use UME in release mode
  flutter_ume: ^0.3.0+1
  flutter_ume_kit_ui: ^0.3.0+1
  flutter_ume_kit_device: ^0.3.0
  flutter_ume_kit_perf: ^0.3.0
  flutter_ume_kit_show_code: ^0.3.0
  flutter_ume_kit_console: ^0.3.0
  flutter_ume_kit_dio: ^0.3.0

二、配置引用

import 'dart:async';
import 'package:flutter/material.dart';
import 'flavors.dart';
import 'main.dart';
import 'package:flutter_ume/flutter_ume.dart'; // UME 框架
import 'package:flutter_ume_kit_ui/flutter_ume_kit_ui.dart'; // UI 插件包
import 'package:flutter_ume_kit_perf/flutter_ume_kit_perf.dart'; // 性能插件包
import 'package:flutter_ume_kit_show_code/flutter_ume_kit_show_code.dart'; // 代码查看插件包
import 'package:flutter_ume_kit_device/flutter_ume_kit_device.dart'; // 设备信息插件包
import 'package:flutter_ume_kit_console/flutter_ume_kit_console.dart'; // debugPrint 插件包
import 'package:flutter_ume_kit_dio/flutter_ume_kit_dio.dart'; // Dio 网络请求调试工具class AppStart {static void run() {//捕获异常catchException(() => init().then((e) => {if (F.isPrd) {runApp(const MyApp())}else{PluginManager.instance                                 // 注册插件..register(const WidgetInfoInspector())..register(const WidgetDetailInspector())..register(const ColorSucker())..register(AlignRuler())..register(const ColorPicker())                            // 新插件..register(const TouchIndicator())                         // 新插件..register(Performance())..register(const ShowCode())..register(const MemoryInfoPage())..register(CpuInfoPage())..register(const DeviceInfoPanel())..register(Console()),runApp(const UMEWidget(child: MyApp(),enable: true)) // 初始化}}));}///启动前准备-可在此初始化信息static Future init() async {}///异常捕获处理static void catchException<T>(T Function() callback) {//捕获异常的回调FlutterError.onError = (FlutterErrorDetails details) {reportErrorAndLog(details);};runZonedGuarded<Future<void>>(() async {callback();},(Object obj, StackTrace stack) {var details = makeDetails(obj, stack);reportErrorAndLog(details);},zoneSpecification: ZoneSpecification(print: (Zone self, ZoneDelegate parent, Zone zone, String line) {collectLog(parent, zone, line); // 收集日志},),);}//日志拦截, 收集日志static void collectLog(ZoneDelegate parent, Zone zone, String line) {parent.print(zone, "日志拦截: $line");}//上报错误和日志逻辑static void reportErrorAndLog(FlutterErrorDetails details) {print(details);}// 构建错误信息static FlutterErrorDetails makeDetails(Object obj, StackTrace stack) {return FlutterErrorDetails(stack: stack, exception: obj);}
}

启动app即可看见字节跳动的调试工具

三、图片配置

        打开pubspec.yaml文件，找到assets:节点，在此指定静态资源的路径，如下所有的静态图片存放在以下两个路径。

  assets:- assets/images/- assets/icon/

使用图片

Image.asset('assets/images/jidonglog.png',height: 30,width: 30,)；

四、配置阿里图标库

        打开pubspec.yaml文件，找到fonts:节点，在此指定图标库文件的路径。、

  fonts:- family: iconfontfonts:- asset: assets/iconfont/iconfont.ttf

使用图标库，将&#xe8f1中&#替换成0

Icon(IconData(0xe8f1,fontFamily:'iconfont'),color: UserColor.color_1,size:15
)；

五、语言汉化

MaterialApp(locale: Locale('zh', 'CN'),localizationsDelegates: const [GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate,],supportedLocales: const [Locale('zh', 'CN'),],
)