Flutter 新聞客戶端 - 02 設計稿適配、加入圖片字型資源、歡迎介面

B站視訊

www.bilibili.com/video/BV19E…

本節目標

• 加入圖片資源
• 加入字型資源
• 設計稿適配
• 編寫介面程式碼的邏輯和組織

1 加入圖片資源

1.1 flutter 圖片資源規則

• 官方說明

flutter.dev/docs/develo…

按這個規則編排，flutter 自動適配解析度圖片

• assets 目錄

• yaml 配置

assets:
  - assets/images/
複製程式碼

• 程式碼呼叫

Image.asset("assets/images/logo.png")
複製程式碼

1.2 藍湖切圖

注意選著下 ios 目標，這樣會自動切圖 1x 2x 3x 三種格式

2 加入字型資源

• 官方說明

flutter.dev/docs/cookbo…

• 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

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

視訊

• b 站
• 油管映象

參考

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