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: iconfont
      fonts:
        - 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'),
      ],
)