B standing video

www.bilibili.com/video/BV19E…

In this section, the target

  • Add image resources
  • Add font resources
  • Adaptation of design draft
  • Write the logic and organization of interface code

1 Add an image resource

1.1 Rules of FLUTTER Image Resources

  • The official instructions

Flutter. Dev/docs/develo…

By following this rule, Flutter automatically ADAPTS resolution images

  • Assets directory

  • Yaml configuration
assets:
  - assets/images/
Copy the code
  • Code calls
Image.asset("assets/images/logo.png")
Copy the code

1.2 Blue Lake Cut diagram

Note that the ios target is selected, which will automatically cut the image into three formats 1x 2x 3x

2 Add font resources

  • The official instructions

Flutter. Dev/docs/cookbo…

  • Assets directory

Upload only TTF fonts used so that you can control the package size

  • Yaml configuration
fonts:
  - family: Avenir
    fonts:
      - asset: assets/fonts/Avenir-Book.ttf
        weight: 400
  - family: Montserrat
    fonts:
      - asset: assets/fonts/Montserrat-SemiBold.ttf
        weight: 600
Copy the code
  • Code calls

3 Write the welcome page

3.1 From top to bottom, from left to right, from big to small

3.2 Adaptation of design draft

Plug-in flutter_screenutil

Pub. Flutter – IO. Cn/packages/fl…

According to the design draft proportional adaptation

3.3 Tool Functions

  • screen.dartDesign draft adaptation function
import 'package:flutter_screenutil/flutter_screenutil.dart';

// set the width
double duSetWidth(double width) {
  return ScreenUtil().setWidth(width);
}

// set the width
double duSetHeight(double height) {
  return ScreenUtil().setHeight(height);
}

/// Set the font size
double duSetFontSize(double fontSize) {
  return ScreenUtil().setSp(fontSize);
}
Copy the code
  • utils.dartDerived class library
library utils;

export 'screen.dart';
Copy the code

3.4 Constant Configuration

  • colors.dartcolor
import 'dart:ui';

class AppColors {
  / / / the main text
  static const Color primaryText = Color.fromARGB(255.45.45.47);

  /// Master - background
  static const Color primaryElement = Color.fromARGB(255.41.103.255);

  /// Master - text
  static const Color primaryElementText = Color.fromARGB(255.255.255.255);
}
Copy the code
  • values.dartDerived class library
library values;

export 'colors.dart';
Copy the code

3.5 Code Splitting

Split into different functions as much as possible for easy maintenance

Dart Welcome_header_Widget.dart Welcome_feature_widget.dart Welcome_buttons_Widget.dart

Git code

Github.com/ducafecat/f…

Blue Lake design draft

lanhuapp.com/url/lYuz1 Password: gSKl

Blue Lake now charges, so please upload xD design draft by yourself to check the mark. Commercial design draft file is not easy to share directly, you can add wechat to contact Ducafecat

video

  • B station
  • Tubing mirror

reference

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