preface

I’ve been thinking about Flutter for a long time since its release. Unfortunately, I’ve been too busy these days, and I’ve been procrastinating from time to time, so I haven’t found time to learn the cross-platform framework.

All of a sudden, Flutter 1.2 has been released and I can’t sit still. I spent a week making this APP. To briefly understand the appeal of this new cross-platform framework.

The first APP

Returning to the title, since we are writing the second Flutter APP, we ask you to masturbate yourself against the official First Flutter APP. (英 文 link: FlutterChina. club/get-started…)

This part includes learning the dart language features and experiencing some of the Flutter framework features.

If you’re like me and just spent a couple of hours looking at the new features in the Dart language, you can go straight to the first APP. When writing, you may feel that you are always in a fog and do not understand many parts.

Don’t worry, this is a normal phenomenon, for us who just want to experience the user, there is no systematic learning, this is a normal phenomenon.

Keep an open mind and learn as much as you can. Encounter do not understand, check, encounter do not know how to write, read the official source code implementation, such as the amount of code up, naturally skilled.

A second APP

Did you feel a sense of accomplishment after completing your first APP according to the official example? In the excitement, it seemed that something was missing.

Yes, after all, I just typed the official example again, saying APP is also a little crude. Can’t wait to do something to consolidate their study?

This time follow me to start your second APP from the project establishment.

article

Due to the one-week time limit of the project, this time the project is required to be as simple as possible with as few pages as possible. Accomplish as many function points as possible, and the article is born.

The Article is a new Flutter APP developed based on the API of the Daily Article.

download

Github.com/chengww5217…

screenshots

Highlights

  • The project is simple enough
    • The mode is splash, Home, and starmode List
  • This project has enough feature points
    • Splah page creation, remove startup white screen
    • Networking, Json parsing, article presentation
    • Database save articles
    • Theme switch, Font adjustment, Configure local save (SP)
    • internationalization
    • …
  • The project is still useful
    • Different from the general pure Demo, the daily article is what I see every day

Start project

Note: in the source code, a page may contain more than one feature implementation, in practice, please follow the APP preview to implement one item at a time.

Source code is not the standard answer, please submit your questions to PR to contribute.

API

API source: github.com/jokermonn/-…

Analysis API network implementation, mainly requires the realization of the network to obtain the article, after the acquisition of Json parsing to bean, and then a simple error handle.

Reference article:

  • English: flutter. Dev/docs/cookbo…
  • English: flutterchina. Club/networking /

Splash Page

Following the conventions of native APP development, Splash is essential for initialization and display advertising.

For the first page, you need to learn the general conventions of page writing and the life cycle of StatefulWidget.

For example, class SplashPage is written as:

class SplashPage extends StatefulWidget {
  SplashPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  State<StatefulWidget> createState() {
    return_SplashPageState(); }}Copy the code

And then class _SplashPageState.

Layout is a picture:

import 'package:flutter/material.dart';

class SplashPage extends StatefulWidget {
  SplashPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  State<StatefulWidget> createState() {
    return_SplashPageState(); }}class _SplashPageState extends State<SplashPage> {
  
  @override
  void initState() {
    // TODO: do something to init
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Builder(builder: (context) {
      return Container(
        child: Image(image: AssetImage('assets/images/splash.png'), fit: BoxFit.fill,), ); }); }}Copy the code

The life cycle is as follows:

Reproduced from segmentfault.com/a/119000001 images…

Refer to my blog: Flutter Development Android & IOS startup page Splash Page

Home Page

The main page is to display articles and related Settings.

Click on the upper left corner to pop up the relevant configuration window.

Given the complexity of the layout, you can pull out the bottom popover here and write it in a separate.dart file.

From this part involves the use of various controls and state Settings, click events and other content.

This is basically the core of the program.

After the completion of this part is to optimize the program, add database to cache data, date judgment switch, article collection and so on.

This is the part that takes the longest, and it’s the process from rough to smooth.

miscellaneous

Finally, there is internationalization, adding resources and packaging, etc., for more details, see

Flutter. Dev/docs/develo…

Flutter. Dev/docs/deploy…

conclusion

From the beginning of the Dart syntax to the completion of the project. It lasted on and off for three weeks. Carve out an hour or two each day, which adds up to about 56 hours. Subtract the two hours spent drawing the APP icon and launching the page image, and that’s barely an eight-hour workweek.

There are some features of Flutter that seem to have come too late this week: syntax features (type dynamic checking, support.? ?? Operator), simple and convenient complete UI scheme, Hot Reload, etc. But complicated and verbose View trees, hard coding of resources, poor UI control apis, etc.

After my initial use of Flutter, I found that It seemed that Flutter would not allow me to solve mobile client development directly with Flutter in the short term without learning native development.

In the process of zhe/teng, you will find that you have to solve many problems with your native knowledge. For example, to get a favorite article from a project, here is how to get a file from a database:

Future<List<ArticleBean>> getStarred() async {
    List<ArticleBean> articles = List(a); Database db =await getDB();
    List<Map<String.dynamic>> maps =
    await db.query(name, columns: [columnId, columnStarred, columnDate, columnData], where: "$columnStarred = ?", whereArgs: [true]);
    if (maps.length > 0) {
      for (Map<String.dynamic> map inmaps) { ArticleBean article = ArticleBean.fromJson(map); articles.add(article); }}return articles;
  }
Copy the code

Look at the core query code

await db.query(name, columns: [columnId, columnStarred, columnDate, columnData], where: "$columnStarred = ?", whereArgs: [true]);
Copy the code

Here the mode gets all columns that are starred with true.

However, when it is actually run, it is always not available on Android devices.

Android databases use Sqlite and cannot store bool (Boolean). Instead, booleans are stored as integers 0 (false) and 1 (true).

Therefore, the above code should be changed to the following code to take effect.

await db.query(name, columns: [columnId, columnStarred, columnDate, columnData], where: "$columnStarred > ?", whereArgs: [0]);
Copy the code

This is just a small and simple example, but it also shows that Flutter doesn’t always help you with native bugs (it really depends on how much compatibility the developers of the various frameworks have made for you).

This is the end of this article, not much code involved, just a week to get started with Flutter. If you are interested in the project, welcome to star, Fork and submit PR. Thank you.

Project address: github.com/chengww5217…