学习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这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。