Flutter-教你一步步還原豆瓣 01準備工作和啓動小部件

源碼地址：https://github.com/mumushuiding/douban

源碼地址：https://github.com/mumushuiding/douban

準備工作

創建程序:

 $ flutter create douban

1、將 assets 文件夾複製到根目錄下(https://github.com/mumushuiding/douban/assets)

2、lib\constant 、lib\utils文件夾複製到你的 lib 目錄下（https://github.com/mumushuiding/douban）

3、複製mock文件夾到根目錄 

4、添加圖片資源和模擬數據到 pubspec.yaml

flutter:

  # The following line ensures that the Material Icons font is

  # included with your application, so that you can use the icons in

  # the material Icons class.

  uses-material-design: true

  <!-- 資源文件 -->

  assets:

    - assets/images/

    - mock/

製作啓動小部件

1、編輯 lib\main.dart 文件：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'views/splash/splash_widget.dart';

void main() {
  runApp(MyApp());
  if(Platform.isAndroid){
    SystemUiOverlayStyle systemUiOverlayStyle = 
        SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    
    return RestartWidget(
      child: MaterialApp(
        theme: ThemeData(backgroundColor: Colors.white),
        home: Scaffold(
          resizeToAvoidBottomPadding: false,
          body: SplashWidget(),
        ),
      )
    );
  }
  
}

class RestartWidget extends StatefulWidget{
  final Widget child;

  RestartWidget({Key key, @required this.child}) : assert (child !=null), super(key:key);

  static restartApp(BuildContext context){
    final _RestartWidgetState state = context.findAncestorStateOfType<_RestartWidgetState>();
    state.restartApp();
  }

  @override
  _RestartWidgetState createState() {
    
    return _RestartWidgetState();
  }
  
}
class _RestartWidgetState extends State<RestartWidget>{
  Key key = UniqueKey();

  void restartApp(){
    setState(() {
      key = UniqueKey();
    });
  }
  @override
  Widget build(BuildContext context) {
    
    return Container(
      key: key,
      child: widget.child,
    );
  }
  
}

1. 編寫啓動小部件

新建 lib\views\splash\splash_widget.dart

// 啓動小部件
import 'dart:async';
import '../../util/screen_utils.dart';
import '../../constant/constant.dart';
import 'package:flutter/material.dart';
import '../container_page.dart';
class SplashWidget extends StatefulWidget{

  @override
  _SplashWidgetState createState() => _SplashWidgetState();

}

class _SplashWidgetState extends State<SplashWidget>{
  var container = ContainerPage();
  bool showAd = true;
  @override
  Widget build(BuildContext context) {
    print('build splash');
    return Stack(
      children: <Widget>[
        // 當showAd爲真時顯示
        Offstage(
          child: container,
          offstage: showAd
        ),
        Offstage(
          child: Container(
            color: Colors.white,
            width: ScreenUtils.screenW(context),
            height: ScreenUtils.screenH(context),
            child: Stack(
              children:<Widget>[
                Align(
                  alignment: Alignment(0.0,0.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      CircleAvatar(
                        radius: ScreenUtils.screenW(context) / 3,
                        backgroundColor: Colors.white,
                        backgroundImage: AssetImage(Constant.ASSETS_IMG + 'home.png'),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(top: 20.0),
                        child: Text(
                          '落花有意隨流水,流水無心戀落花',
                          style: TextStyle(fontSize: 15.0, color:Colors.black),
                        ),
                      ),
                    ],
                  ),
                ),
                SafeArea(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Align(
                        alignment: Alignment(1.0,0.0),
                        child: Container(
                          margin: const EdgeInsets.only(right: 30.0, top: 20.0),
                          padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 2.0, bottom: 2.0),
                          decoration: BoxDecoration(
                            color: Color(0xffEDEDED),
                            borderRadius: const BorderRadius.all(Radius.circular(10.0)),
                          ),
                          child: CountDownWidget(onCountDownFinishCallBack: (bool value){
                            if (value) {
                              setState(() {
                                showAd  = false;
                              });
                            }
                          },),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(bottom: 40.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Image.asset(
                              Constant.ASSETS_IMG + 'ic_launcher.png',
                                width: 50.0,
                                height: 50.0,
                            ),
                            Padding(
                              padding: const EdgeInsets.only(left: 10.0),
                              child: Text(
                                  'Hi,豆芽',
                                  style: TextStyle(
                                      color: Colors.green,
                                      fontSize: 30.0,
                                      fontWeight: FontWeight.bold),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ]
                  ),
                ),
              ]
            ),
          ),
          offstage:!showAd,
        )
      ],
    );
  }
  
}
class CountDownWidget extends StatefulWidget{
  final onCountDownFinishCallBack;
  CountDownWidget({Key key,@required this.onCountDownFinishCallBack}):super(key:key);

  @override
  _CountDownWidget createState() {
    
    return _CountDownWidget();
  }
  
}
class _CountDownWidget extends State<CountDownWidget> {
  var _seconds = 3;
  Timer _timer;

  @override
  void initState(){
    super.initState();
    _startTimer();
  }

  @override
  Widget build(BuildContext context) {
    return Text(
      '$_seconds',
      style:TextStyle(fontSize: 17.0),
    );
  }
  
  void _startTimer(){
    _timer = Timer.periodic(Duration(seconds:1), (timer){
      setState(() {});
      if (_seconds <= 1) {
        widget.onCountDownFinishCallBack(true);
        _cancelTimer();
        return;
      }
      _seconds--;
    });
  }
  void _cancelTimer(){
    _timer?.cancel();
  }
}

1. 新建APP外面的容器

新建 lib\views\container_page.dart

import 'package:flutter/material.dart';

class ContainerPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    
    return Center(
      child: Text('整個App的最外層容器'),
    );
  }
  
}

 

最後運行 flutter run 查看效果