學習Flutter除了看官網API資料以外不能少了這本電紙書「Flutter-Notebook」，這本書裡面涵蓋了很多Flutter小技巧，flutter_note_book有許多flutter相關功能demo的集合，它能夠幫助您快速學習一些零碎的知識，而且本項目將會不定期更新。如果您覺得有用的話可以Watch該項目，之後更新會自動通知您。

不管你信不信，這本書從最開始我都一直關注到現在，今天把它分享出來給大家，比你去買教程學習強多了，花幾百幾千去培訓學習，還不如自己花時間擼上一遍此書，它不能讓你上天也能讓你上進一個級別。

知識

本頭條核心宗旨

歡迎來到「技術剛剛好」作者，「技術剛剛好」是個人維護，每天至少更新一篇Flutter技術文章，實時為大家播報Flutter最新消息。如果你剛好也在關注Flutter這門技術，那就跟我一起學習進步吧，你的贊，收藏，轉發是對我個人最大的支持，維護不易，歡迎關注。

技術剛剛好經歷

近幾年，移動端跨平臺開發技術層出不窮，從Facebook家的ReactNative，到阿里家WEEX，前端技術在移動端跨平臺開發中大展身手，技術剛剛好作為一名Android開發，經歷了從Reactjs到Vuejs的不斷學習。而在2018年，我們的主角變成了Flutter，這是Goolge開源的一個移動端跨平臺解決方案，可以快速開發精美的移動App。希望跟大家一起學習，一起進步！

本文核心要點

好好學習，天天向上。這是小孩子常用的一句話，其實在程序員眼裡也比較常用這句話。做程序員開發大家都知道，不學習就等於落後，當你離開現在這家公司在去別的公司有的從新開始學習，所以你必須上進多學習才能保證自己在這個行業繼續前進。

視圖控件

在做項目的時候如果返回上一頁需要提示一下，這個簡單的功能會了嗎？

視頻地址：

/** * 實現原理是利用form自帶的onWillPop屬性，其餘與will_pop_scope_demo中一致。 */import 'package:flutter/material.dart';import 'package:flutter/services.dart';import 'dart:async';class MyHomePage extends StatefulWidget {  MyHomePage({Key key, this.title}) : super(key: key);  final String title;  @override  _MyHomePageState createState() => new _MyHomePageState();}class _MyHomePageState extends State {  final GlobalKey _formKey = new GlobalKey();  List _colors = ['', 'red', 'green', 'blue', 'orange'];  String _color = '';  @override  Widget build(BuildContext context) {    return new Scaffold(      appBar: new AppBar(        title: new Text(widget.title),      ),      body: new SafeArea(          top: false,          bottom: false,          child: new Form(            onWillPop: _onBackPressed,              key: _formKey,              autovalidate: true,              child: new ListView(                padding: const EdgeInsets.symmetric(horizontal: 16.0),                children: [                  new TextFormField(                    decoration: const InputDecoration(                      icon: const Icon(Icons.person),                      hintText: 'Enter your first and last name',                      labelText: 'Name',                    ),                  ),                  new TextFormField(                    decoration: const InputDecoration(                      icon: const Icon(Icons.calendar_today),                      hintText: 'Enter your date of birth',                      labelText: 'Dob',                    ),                    keyboardType: TextInputType.datetime,                  ),                  new TextFormField(                    decoration: const InputDecoration(                      icon: const Icon(Icons.phone),                      hintText: 'Enter a phone number',                      labelText: 'Phone',                    ),                    keyboardType: TextInputType.phone,                    inputFormatters: [                      WhitelistingTextInputFormatter.digitsOnly,                    ],                  ),                  new TextFormField(                    decoration: const InputDecoration(                      icon: const Icon(Icons.email),                      hintText: 'Enter a email address',                      labelText: 'Email',                    ),                    keyboardType: TextInputType.emailAddress,                  ),                  new InputDecorator(                    decoration: const InputDecoration(                      icon: const Icon(Icons.color_lens),                      labelText: 'Color',                    ),                    isEmpty: _color == '',                    child: new DropdownButtonHideUnderline(                      child: new DropdownButton(                        value: _color,                        isDense: true,                        onChanged: (String newValue) {                          setState(() {                            _color = newValue;                          });                        },                        items: _colors.map((String value) {                          return new DropdownMenuItem(                            value: value,                            child: new Text(value),                          );                        }).toList(),                      ),                    ),                  ),                  new Container(                      padding: const EdgeInsets.only(left: 40.0, top: 20.0),                      child: new RaisedButton(                        child: const Text('Submit'),                        onPressed: null,                      )),                ],              ))),    );  }  Future _onBackPressed() {    return showDialog(        context: context,        builder: (context) => AlertDialog(          title: Text('Do you really want to exit the app?'),          actions: [            FlatButton(              child: Text('No'),              onPressed: () => Navigator.pop(context, false),            ),            FlatButton(              child: Text('Yes'),              onPressed: () => Navigator.pop(context, true),            ),          ],        ));  }}

應用啟動前展示閃屏頁的demo

介紹

應用啟動前展示閃屏頁的demo，這是一種通過animation實現的方式

原理

在應用開始時進入閃屏頁，通過動畫控制透明度不斷減弱。 通過animation.addStatusListener來檢測動畫是否播放完畢，完畢後push主頁面並將該頁面從路由中銷燬。「

好了，更多的DEMO案例請大家點贊評論區找吧。謝謝。

謝謝觀看技術剛剛好的文章，技術剛剛好是個人維護，每天至少更新一篇Flutter技術文章，實時為大家播報Flutter最新消息。如果你剛好也在關注Flutter這門技術，那就跟我一起學習進步吧，你的贊，收藏，轉發是對我個人最大的支持，維護不易，歡迎關注。