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

时间 2020-06-27

标签 flutter 客户端设计适配加入图片字体资源欢迎界面繁體版

原文原文链接

B站视频

www.bilibili.com/video/BV19E…ios

本节目标

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

1 加入图片资源

1.1 flutter 图片资源规则

官方说明

flutter.dev/docs/develo…git

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

yaml 配置

assets:
 - assets/images/
复制代码

代码调用

Image.asset("assets/images/logo.png")
复制代码

1.2 蓝湖切图

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

2 加入字体资源

官方说明

flutter.dev/docs/cookbo…markdown

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

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_screenutilide

pub.flutter-io.cn/packages/fl…函数

按设计稿比例适配工具

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 代码

github.com/ducafecat/f…

蓝湖设计稿

lanhuapp.com/url/lYuz1 密码: gSKl

蓝湖如今收费了，因此查看标记还请本身上传 xd 设计稿商业设计稿文件很差直接分享, 能够加微信联系 ducafecat