Demo

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

var name = 'k';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      return new MaterialApp(
          title: "title",
          theme: ThemeData.light(), //背景主題色
          debugShowCheckedModeBanner: false, //消除界面右上角debug標簽
          home: new Scaffold(
          body: new Text(
              "data $name", //變量引用，以$開頭：$variablity
              textAlign: TextAlign.center,
              overflow: TextOverflow.clip, //clip:折疊; ellipsis:省略號; fade:淡出
              textScaleFactor: 3, //放大比率
              style: TextStyle(
              fontWeight: FontWeight.bold,
              fontFamily: "arial",
              height: 2, //行高
              decoration: TextDecoration.underline, //文本裝飾類型
              decorationColor: Colors.red, //文本裝飾顏色
              decorationStyle: TextDecorationStyle.dashed, //文本裝飾樣式
              ),
          ),
          ),
      );
  }
}

• Scaffold

(new) Scaffold({
  Key key,
  PreferredSizeWidget appBar,
  Widget body,
  Widget floatingActionButton,
  FloatingActionButtonLocation floatingActionButtonLocation,
  FloatingActionButtonAnimator floatingActionButtonAnimator,
  List<Widget> persistentFooterButtons,
  Widget drawer,
  Widget endDrawer,
  Widget bottomNavigationBar,
  Widget bottomSheet,
  Color backgroundColor,
  bool resizeToAvoidBottomPadding,
  bool resizeToAvoidBottomInset,
  bool primary: true,
  DragStartBehavior drawerDragStartBehavior: DragStartBehavior.start,
  bool extendBody: false
}) → Scaffold

Basic widgets

Container

(new) Container({
  Key key,
  AlignmentGeometry alignment,//浮動對齊
  EdgeInsetsGeometry padding,//內(nèi)邊距
  Color color,//背景色
  Decoration decoration,//child后的樣式
  Decoration foregroundDecoration,//child前的樣式
  double width,
  double height,
  BoxConstraints constraints,
  EdgeInsetsGeometry margin,//外邊距
  Matrix4 transform,//旋轉(zhuǎn)
  Widget child//子類
}) → Container

Row

(new) Row({
Key key,
MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,//橫向?qū)R方式
MainAxisSize mainAxisSize: MainAxisSize.max,//橫向軸最大尺寸
CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,//豎直位置
TextDirection textDirection,//文字方向
VerticalDirection verticalDirection: VerticalDirection.down,//豎直方向
TextBaseline textBaseline,//文字基準線
List<Widget> children: const <Widget> []//子類（數(shù)組）
}) → Row

Column

(new) Column({
Key key,
MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,//橫向?qū)R方式
MainAxisSize mainAxisSize: MainAxisSize.max,//橫向軸最大尺寸
CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,//豎直位置
TextDirection textDirection,//文字方向
VerticalDirection verticalDirection: VerticalDirection.down,//豎直方向
TextBaseline textBaseline,//文字基準線
List<Widget> children: const <Widget> []//子類（數(shù)組）
}) → Column

Image

Image.asset //加載資源圖片，就是加載項目資源目錄中的圖片,加入圖片后會增大打包的包體體積，用的是相對路徑
Image.network //網(wǎng)絡(luò)資源圖片，意思就是你需要加入一段http://xxxx.xxx的這樣的網(wǎng)絡(luò)路徑地址
Image.file //加載本地圖片，就是加載本地文件中的圖片，這個是一個絕對路徑，跟包體無關(guān)【不常用】
Image.memory //加載Uint8List資源圖片【不常用】

//——————————————————————
//attribute
image: AssetImage(String assetName, {AssetBundle bundle, String package}) → AssetImage

image: NetworkImage(String url, {double scale: 1.0, Map<String, String> headers}) → NetworkImage

Text

Text(String data,{ //文字字符串
Key key,
TextStyle style, //文字樣式
StrutStyle strutStyle,
TextAlign textAlign, //對齊方式
TextDirection textDirection, //文字裝飾
Locale locale,
bool softWrap,
TextOverflow overflow, //溢出顯示
double textScaleFactor, //縮放比例
int maxLines, //最大行數(shù)
String semanticsLabel
}) → Text

Icon

Icon(IconData icon, { 
Key key,
double size, //尺寸，默認24px
Color color, //主題色
String semanticLabel, //語義標簽，供殘障用戶使用
TextDirection textDirection //渲染圖標方向，需要IconData.matchTextDirection字段為true
}) → Icon

//extensions
IconButton({
Key key,
double iconSize: 24.0,
EdgeInsetsGeometry padding: const EdgeInsets.all(8.0),
AlignmentGeometry alignment: Alignment.center,
Widget icon,
Color color,
Color highlightColor, //按鈕處于向下（按下）狀態(tài)時按鈕的輔助顏色
Color splashColor, //按鈕處于向下（按下）狀態(tài)時按鈕的主要顏色
Color disabledColor,
() → void onPressed, //點擊回調(diào)函數(shù)
String tooltip //輔助文字說明標簽
}) → IconButton

Icons //引用flutter內(nèi)置圖標

IconTheme({
Key key,
IconThemeData data,//IconThemeData({Color color, double opacity, double size}) → IconThemeData
Widget child //Icon和ImageIcon應(yīng)用IconThemeData中定義的主題屬性
}) → IconTheme

ImageIcon(ImageProvider<dynamic> image,{
Key key,
double size,
Color color,
String semanticLabel
}) → ImageIcon

FlatButton 背景透明按鈕

FloatingActionButton 浮動按鈕

IconButton 圖標按鈕

PopupMenuButton 下拉菜單按鈕

RaisedButton

(new) RaisedButton({
Key key,
() → void onPressed,
(bool) → void onHighlightChanged,
ButtonTextTheme textTheme,
Color textColor,
Color disabledTextColor,
Color color,
Color disabledColor,
Color highlightColor, //按鈕處于向下（按下）狀態(tài)時按鈕的輔助顏色
Color splashColor, //按鈕處于向下（按下）狀態(tài)時按鈕的主要顏色
Brightness colorBrightness,
double elevation,
double highlightElevation,
double disabledElevation,
EdgeInsetsGeometry padding,
ShapeBorder shape,
Clip clipBehavior: Clip.none,
MaterialTapTargetSize materialTapTargetSize,
Duration animationDuration,
Widget child
}) → RaisedButton

AppBar

(new) AppBar({
  Key key,
  Widget leading, //標題上方widget
  bool automaticallyImplyLeading: true,
  Widget title,
  List<Widget> actions, //標題下方功能按鈕組
  Widget flexibleSpace,
  PreferredSizeWidget bottom,
  double elevation,
  Color backgroundColor,
  Brightness brightness,//亮度
  IconThemeData iconTheme,
  TextTheme textTheme,
  bool primary: true,
  bool centerTitle, //標題是否居中
  double titleSpacing: NavigationToolbar.kMiddleSpacing,
  double toolbarOpacity: 1.0, //工具欄透明度
  double bottomOpacity: 1.0 //底部透明度
}) → AppBar

Theme

ThemeData

(new) ThemeData({
  Brightness brightness,
  MaterialColor primarySwatch,
  Color primaryColor,
  Brightness primaryColorBrightness,
  Color primaryColorLight,
  Color primaryColorDark,
  Color accentColor,
  Brightness accentColorBrightness,
  Color canvasColor,
  Color scaffoldBackgroundColor,
  Color bottomAppBarColor,
  Color cardColor,
  Color dividerColor,
  Color highlightColor,
  Color splashColor,
  InteractiveInkFeatureFactory splashFactory,
  Color selectedRowColor,
  Color unselectedWidgetColor,
  Color disabledColor,
  Color buttonColor,
  ButtonThemeData buttonTheme,
  Color secondaryHeaderColor,
  Color textSelectionColor,
  Color cursorColor,
  Color textSelectionHandleColor,
  Color backgroundColor,
  Color dialogBackgroundColor,
  Color indicatorColor,
  Color hintColor,
  Color errorColor,
  Color toggleableActiveColor,
  String fontFamily,
  TextTheme textTheme,
  TextTheme primaryTextTheme,
  TextTheme accentTextTheme,
  InputDecorationTheme inputDecorationTheme,
  IconThemeData iconTheme,
  IconThemeData primaryIconTheme,
  IconThemeData accentIconTheme,
  SliderThemeData sliderTheme,
  TabBarTheme tabBarTheme,
  CardTheme cardTheme,
  ChipThemeData chipTheme,
  TargetPlatform platform,
  MaterialTapTargetSize materialTapTargetSize,
  PageTransitionsTheme pageTransitionsTheme,
  AppBarTheme appBarTheme,
  BottomAppBarTheme bottomAppBarTheme,
  ColorScheme colorScheme,
  DialogTheme dialogTheme,
  Typography typography,
  CupertinoThemeData cupertinoOverrideTheme
}) → ThemeData

Layout

Basic layout

Container

//as above

Padding

Padding({Key key, EdgeInsetsGeometry padding, Widget child}) → Padding

Center

Center({Key key, double widthFactor, double heightFactor, Widget child}) → Center

Align

Align({Key key, AlignmentGeometry alignment: Alignment.center, double widthFactor, double heightFactor, Widget child}) → Align

FittedBox 內(nèi)部元素大小隨動變化

FittedBox({Key key, BoxFit fit: BoxFit.contain, AlignmentGeometry alignment: Alignment.center, Widget child}) → FittedBox

AspectRatio 定長寬比widget

AspectRatio({Key key, double aspectRatio, Widget child}) → AspectRatio

ConstrainedBox 約束內(nèi)部元素widget

ConstrainedBox({Key key, BoxConstraints constraints, Widget child}) → ConstrainedBox

IntrinsicHeight 子元素撐滿高度

IntrinsicHeight({Key key, Widget child}) → IntrinsicHeight

IntrinsicWidth 子元素撐滿寬度

IntrinsicWidth({Key key, double stepWidth, double stepHeight, Widget child}) → IntrinsicWidth

Complex layout

Row

//as above

Column

//as above

Stack 允許堆疊

Stack({Key key, AlignmentGeometry alignment: AlignmentDirectional.topStart, TextDirection textDirection, StackFit fit: StackFit.loose, Overflow overflow: Overflow.clip, List<Widget> children: const <Widget> []}) → Stack

Flow

Flow({Key key, FlowDelegate delegate, List<Widget> children: const <Widget> []}) → Flow

Table

Table({Key key, List<TableRow> children: const <TableRow> [], Map<int, TableColumnWidth> columnWidths, TableColumnWidth defaultColumnWidth: const FlexColumnWidth(1.0), TextDirection textDirection, TableBorder border, TableCellVerticalAlignment defaultVerticalAlignment: TableCellVerticalAlignment.top, TextBaseline textBaseline}) → Table

Wrap

Wrap({Key key, Axis direction: Axis.horizontal, WrapAlignment alignment: WrapAlignment.start, double spacing: 0.0, WrapAlignment runAlignment: WrapAlignment.start, double runSpacing: 0.0, WrapCrossAlignment crossAxisAlignment: WrapCrossAlignment.start, TextDirection textDirection, VerticalDirection verticalDirection: VerticalDirection.down, List<Widget> children: const <Widget> []}) → Wrap

ListBody

ListBody({Key key, Axis mainAxis: Axis.vertical, bool reverse: false, List<Widget> children: const <Widget> []}) → ListBody

ListView

ListView({Key key, Axis scrollDirection: Axis.vertical, bool reverse: false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap: false, EdgeInsetsGeometry padding, double itemExtent, bool addAutomaticKeepAlives: true, bool addRepaintBoundaries: true, bool addSemanticIndexes: true, double cacheExtent, List<Widget> children: const <Widget> [], int semanticChildCount, DragStartBehavior dragStartBehavior: DragStartBehavior.down}) → ListView

Transitions

FadeTransition

(new) FadeTransition({Key key, Animation<double> opacity, bool alwaysIncludeSemantics: false, Widget child}) → FadeTransition

SizeTransition

(new) SizeTransition({Key key, Axis axis: Axis.vertical, Animation<double> sizeFactor, double axisAlignment: 0.0, Widget child}) → SizeTransition

AlignTransition

(new) AlignTransition({Key key, Animation<AlignmentGeometry> alignment, Widget child, double widthFactor, double heightFactor}) → AlignTransition

ScaleTransition

(new) ScaleTransition({Key key, Animation<double> scale, Alignment alignment: Alignment.center, Widget child}) → ScaleTransition

SlideTransition

(new) SlideTransition({Key key, Animation<Offset> position, bool transformHitTests: true, TextDirection textDirection, Widget child}) → SlideTransition

RotationTransition

(new) RotationTransition({Key key, Animation<double> turns, Alignment alignment: Alignment.center, Widget child}) → RotationTransition

PositionedTransition

(new) PositionedTransition({Key key, Animation<RelativeRect> rect, Widget child}) → PositionedTransition

Tween

(new) Tween({double begin}, {double end}) → Tween<double>

Duration

(new) Duration({int days: 0, int hours: 0, int minutes: 0, int seconds: 0, int milliseconds: 0, int microseconds: 0}) → Duration

AnimationController

(new) AnimationController({double value, Duration duration, String debugLabel, double lowerBound: 0.0, double upperBound: 1.0, AnimationBehavior animationBehavior: AnimationBehavior.normal, TickerProvider vsync}) → AnimationController

Debounce function

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  Duration durationTime = Duration(milliseconds: 300);
  Timer timer;
  
  submit() {
    timer?.cancel();
    timer = new Timer(durationTime, () {
      // ...
    })
  }
  // ...
}

Localstorage

Import shared_preferences flutter package

// package localstorage handler function
import 'package:shared_preferences/shared_preferences.dart';

class LocalStorage {
  static LocalStorage _instance;
  
  static Future<LocalStorage> get instance async {
    return await getInstance();
  }

  static SharedPreferences _prefs;

  LocalStorage._();

  Future _init() async {
    _prefs = await SharedPreferences.getInstance();
  }

  static Future<LocalStorage> getInstance() async  {
    if (_instance == null) {
      _instance = new LocalStorage._();
      await _instance._init();

    }
    return _instance;
  }

  static bool _beforeCheck() {
    if (_prefs == null) {
      return true;
    }
    return false;
  }

  getItem(String key) {
    if (_beforeCheck()) return null;
    return _prefs.getString(key);
  }

  Future<bool> setItem(String key, String value) {
    if (_beforeCheck()) return null;
    return _prefs.setString(key, value);
  }
  
  remomve(String key) {
    if (_beforeCheck()) return null;
    return _prefs.remove(key);
  }
}