Flutter 在专业知识上的简单认知：Flutter 就是一个UI的开发框架

先看一款应用的组件和开发，在开始原理和调优

介绍两个启动Splash的页面做法，虽然以前我也写过，但是都是demo级别，不够具体，无法形成知识体系，在开发之旅一系列之后，会更加有条理，成体系的实战总结的方式出现。订阅更新吧。

关于Splash 在Flutter上的做法

• 闪屏页面

https://pub.dev/packages/flutter_splash_screen/install

• Lottie 闪屏页面

https://medium.com/swlh/native-splash-screen-in-flutter-using-lottie-121ce2b9b0a4

这两种推荐做法，感觉都还不错。如果你在Android优化过闪屏界面，对这块算是非常熟悉。

第一种方式的使用，第二种后期实战项目尝试

按照官网引入方式，我整理下特殊的部分。

我用的方式是命令方式创建的项目

flutter create --org 包名 项目名

「新」在MainActivity 中的代码修改，我用的是Kotlin

package top.zcwfeng.zcw_eyepetizer

import android.os.Bundle
import io.flutter.embedding.android.FlutterActivity
import org.devio.flutter.splashscreen.SplashScreen;

class MainActivity: FlutterActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        SplashScreen.show(this, true);// here
        super.onCreate(savedInstanceState)
    }

「旧」但是老版本可能用Java这么写

+ import org.devio.flutter.splashscreen.SplashScreen;

import io.flutter.app.FlutterActivity;
import io.flutter.plugins.GeneratedPluginRegistrant;

public class MainActivity extends FlutterActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
 +       SplashScreen.show(this, true);// here
        super.onCreate(savedInstanceState);
        GeneratedPluginRegistrant.registerWith(this);
    }
}

GeneratedPluginRegistrant.registerWith(this);这句话似乎可以不用加了。

「辅助资源文件修改」
主题文件，在values/styles.xml values-night 最好也修改

        <!--添加-->
        <!--设置透明背景-->
        <item name="android:windowIsTranslucent">true</item>

添加资源文件layout/launch_screen.xml 至于为啥这么干，等分析原理继续回顾

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/launch_screen" />
</RelativeLayout>

「Flutter 端」AppInit

import 'package:flutter_splash_screen/flutter_splash_screen.dart';
import 'http/Url.dart';
class AppInit {
  AppInit._();

  static Future<void> init() async {
    Url.baseUrl = 'http://baobab.kaiyanapp.com/api/';
    Future.delayed(const Duration(milliseconds: 2000), () {
      FlutterSplashScreen.hide();
    });
  }
}

沉浸式做法-设置沉浸式状态栏

「Flutter 端」

//Flutter沉浸式状态栏，Platform.isAndroid 判断是否是Android手机
  if (Platform.isAndroid) {
    // setSystemUIOverlayStyle:用来设置状态栏顶部和底部样式
    SystemChrome.setSystemUIOverlayStyle(
        const SystemUiOverlayStyle(statusBarColor: Colors.transparent));
  }

异步UI更新--FutureBuilder

看一个Demo

const FutureBuilder({
  Key? key,
  this.future, // 获取数据的方法
  this.initialData, // 初始的默认数据
  required this.builder,
}) : assert(builder != null),
     super(key: key);
//FutureBuilder控件
new FutureBuilder<String>(
  future: _calculation, // 用户定义的需要异步执行的代码，类型为Future<String>或者null的变量或函数
  //snapshot就是_calculation在时间轴上执行过程的状态快照
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    switch (snapshot.connectionState) {
      //如果_calculation未执行则提示：请点击开始
      case ConnectionState.none: return new Text('Press button to start');
      //如果_calculation正在执行则提示：加载中
      case ConnectionState.waiting: return new Text('Awaiting result...');
      default:    //如果_calculation执行完毕
        if (snapshot.hasError)    //若_calculation执行出现异常
          return new Text('Error: ${snapshot.error}');
        else    //若_calculation执行正常完成
          return new Text('Result: ${snapshot.data}');
    }
  },
)

导航返回拦截--WillPopScope

为了避免用户误触返回按钮而导致APP退出，当用户在某一个时间段内点击两次时，才会认为用户是要退出（而非误触）。Flutter中可以通过WillPopScope来实现返回按钮拦截。

const WillPopScope({
  Key? key,
  required this.child,
  required this.onWillPop,
})

onWillPop是一个回调函数，当用户点击返回按钮时被调用（包括导航返回按钮及Android物理返回按钮）。该回调需要返回一个Future对象，如果返回的Future最终值为false时，则当前路由不出栈(不会返回)；最终值为true时，当前路由出栈退出。我们需要提供这个回调来决定是否退出。

demo

import 'package:flutter/material.dart';

class WillPopScopeTestRoute extends StatefulWidget {
  @override
  WillPopScopeTestRouteState createState() {
    return new WillPopScopeTestRouteState();
  }
}

class WillPopScopeTestRouteState extends State<WillPopScopeTestRoute> {
  DateTime _lastPressedAt; //上次点击时间

  @override
  Widget build(BuildContext context) {
    return new WillPopScope(
        onWillPop: () async {
          if (_lastPressedAt == null ||
              DateTime.now().difference(_lastPressedAt) > Duration(seconds: 1)) {
            //两次点击间隔超过1秒则重新计时
            _lastPressedAt = DateTime.now();
            return false;
          }
          return true;
        },
        child: Container(
          alignment: Alignment.center,
          child: Text("1秒内连续按两次返回键退出"),
        )
    );
  }
}

至于更多的细节，config，http，导航和代码关联，移步关注↓

我的gitee,use_flutter 项目集合