适配

Flutter借鉴的是React思想，使用的是Widget组件

本文只写官网很难找到或者官网压根没有的Fluter日常踩坑。

静态文件引入

1. 打开根目录中的pubspec.yaml文件

   // 配置 assets
   
   assets:
   - assets/images/xxx.jpg
   

2. 在Widget中使用即可

   Image.asset('assets/images/xxx.jpg',
   

屏幕适配

1. 打开根目录中的pubspec.yaml文件

   添加 flutter_screenutil 插件

   dependencies:
       flutter:
           sdk: flutter
       flutter_screenutil: ^0.4.2
   

2. 在所有的使用处引入插件（肯定的咯）

   import 'package:flutter_screenutil/flutter_screenutil.dart';
   

3. 在MaterialApp的home的Widget中确认设计稿宽高

   拟定宽高 width=750; height=1334;

   // Widget build(BuildContext context) { 后面添加
   
   ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
   

4. 使用

    width: ScreenUtil().setWidth(750)
   

字体适配

适配方案大致同上，略有不同

    ScreenUtil().setSp(28)

颜色使用

• 自带颜色 Colors.red
• 自义颜色 Color(0xFF333333)
  • 0xFF表示透明度16进制， 之后的333333代表RGB色值