Flutter-新闻客户端-02-设计稿适配加入图片字体资源欢迎界面

B 站视频

https://www.bilibili.com/vide…

本节目标

• 加入图片资源
• 加入字体资源
• 设计稿适配
• 编写界面代码的逻辑和组织

1 加入图片资源

1.1 flutter 图片资源规则

• 官方说明

https://flutter.dev/docs/deve…

按这个规则编排，flutter 自动适配分辨率图片

• assets 目录

• yaml 配置

assets:
  - assets/images/

• 代码调用

Image.asset("assets/images/logo.png")

1.2 蓝湖切图

注意选着下 ios 目标，这样会自动切图 1x 2x 3x 三种格式

2 加入字体资源

• 官方说明

https://flutter.dev/docs/cook…

• assets 目录

只上传用到的 ttf 字体，这样能控制打包大小

• yaml 配置

fonts:
  - family: Avenir
    fonts:
      - asset: assets/fonts/Avenir-Book.ttf
        weight: 400
  - family: Montserrat
    fonts:
      - asset: assets/fonts/Montserrat-SemiBold.ttf
        weight: 600

• 代码调用

3 编写欢迎界面

3.1 从上到下、从左到右、由大到小

3.2 设计稿适配

插件 flutter_screenutil

https://pub.flutter-io.cn/pac…

按设计稿比例适配

3.3 工具函数

• screen.dart 设计稿适配函数

import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 设置宽度
double duSetWidth(double width) {return ScreenUtil().setWidth(width);
}

/// 设置宽度
double duSetHeight(double height) {return ScreenUtil().setHeight(height);
}

/// 设置字体尺寸
double duSetFontSize(double fontSize) {return ScreenUtil().setSp(fontSize);
}

• utils.dart 导出类库

library utils;

export 'screen.dart';

3.4 常量配置

• colors.dart 颜色

import 'dart:ui';

class AppColors {
  /// 主文本
  static const Color primaryText = Color.fromARGB(255, 45, 45, 47);

  /// 主控件 - 背景
  static const Color primaryElement = Color.fromARGB(255, 41, 103, 255);

  /// 主控件 - 文本
  static const Color primaryElementText = Color.fromARGB(255, 255, 255, 255);
}

• values.dart 导出类库

library values;

export 'colors.dart';

3.5 代码拆分

尽可能的拆分到不同的函数，方便维护

再复杂的业务，可以拆分到不同的组件文件，如 welcome_header_widget.dart welcome_feature_widget.dart welcome_buttons_widget.dart

git 代码

https://github.com/ducafecat/…

蓝湖设计稿

https://lanhuapp.com/url/lYuz1
密码: gSKl

蓝湖现在收费了，所以查看标记还请自己上传 xd 设计稿
商业设计稿文件不好直接分享, 可以加微信联系 ducafecat

视频

• b 站
• 油管镜像

参考

• flutter_screenutil
• Adding assets and images
• Use a custom font