preface

This column records how I learned about Flutter from the ground up, stepped into the pits during the learning process, and finally exported a template of my own project. The purpose of this column is to help those who are new to Flutter learn about Flutter and its ecology as quickly as possible.

This is where the order of the articles in this column is stored, and it will be updated each time a new article is published:

Why Flutter? How to Use Flutter? Chapter 3 understanding the Ecology of Flutter Chapter 4 The Simple Engineering of Flutter

Start Game

Reasonable catalog planning

You should first update the Flutter SDK to the latest version, which is version 2.8.0 as of this article. Then run the command or create a new Flutter project in the IDE.

Then manually add the directory structure of the newly created project to look like the following:

# Flutter_Template_Mini ├─ Assets # Static Resources │ ├─ ICONS # │ ├─ images # Images │ ├─ Jsons # JSON ├─ lib │ ├─ common # Global public classes, methods, variables such as │ ├ ─ db # local cache │ ├ ─ HTTP # HTTP │ │ ├ ─ API │ │ └ ─ request │ ├ ─ models # model layer │ ├ ─ the navigator # the navigator # 1.0 │ ├ ─ pages all pages │ ├ ─ the provider # state management │ ├ ─ utils # tools ├ ─ └ ─. Main dart # entrance └ ─ pubspec. Yaml # package managementCopy the code

Assets, Common, DB, HTTP, Models, Navigator, Pages, Provider, utils, all need to be created manually.

Explain the directory

  • Assets:
    • The ICONS: storing downloaded fonts icon file, specific tutorial reference book. Flutterchina. Club/chapter3 / im…
    • Images: Store downloaded images
    • Jsons: Stores known JSON files, mainly to facilitate the conversion of JSON to dart Model
  • Common: Stores global public classes, methods, variables, etc., such as the global color color
  • Db: Local cache, where the packaged Shared_Preferences plug-in can be placed
  • HTTP: Holds classes related to network requests
    • API: A place to store back-end apis
    • Request: The packaged Dio plug-in is placed here
  • Models: The Model layer, which stores the Dart Model
  • Navigator: Holds classes related to routing
  • Pages: Stores all pages
  • Provider: State management, using a plugin provider, of course you can also choose another plugin such as GetX
  • Utils: Utility classes, such as methods to determine the current device, can be stored here
  • Dart: Entry point where the project’s pre-initialization logic can be placed

Say a mouth

Directory this thing, and not immutable, you can according to their own like, reasonable modification of the directory structure above.

About the routing

This article introduces simple engineering, so the routing part of Flutter uses Navigator 1.0, which is provided by Flutter official. You can also choose Navigator 2.0 or fluro based on your preference

Navigator 1.0 encapsulates Flutter route interception directly from my previous article

About HTTP

The HTTP request can be sent directly using Dio. However, in engineering, it should be simply encapsulated, at least to achieve uniform error interception. See my article on how to encapsulate Flutter to encapsulate network request library Dio

About the JSON to Dart Model class

  1. Pure handwriting entities (not recommended)
  2. Use web page autogeneration tool: Automatically generate entity classes from JSON and copy them to the project (common to all projects)
  3. Use the plug-in JSON_serializable (more suitable for large projects)

Beginners can use the second option, which is easier to get started

Here is a random autogenerated url: json_to_dart

JSON < — > Map < — > Dart Model is a common technique

code

Of course, there are many times when words are not as real as code, so those who want code can look up flutter-template-mini