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//子類 }) → ContainerRow
(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ù)組） }) → RowColumn
(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ù)組） }) → ColumnImage
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}) → NetworkImageText
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 }) → TextIcon
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 }) → ImageIconFlatButton 背景透明按鈕
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 }) → RaisedButtonAppBar
(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 abovePadding
Padding({Key key, EdgeInsetsGeometry padding, Widget child}) → PaddingCenter
Center({Key key, double widthFactor, double heightFactor, Widget child}) → CenterAlign
Align({Key key, AlignmentGeometry alignment: Alignment.center, double widthFactor, double heightFactor, Widget child}) → AlignFittedBox 內(nèi)部元素大小隨動變化
FittedBox({Key key, BoxFit fit: BoxFit.contain, AlignmentGeometry alignment: Alignment.center, Widget child}) → FittedBoxAspectRatio 定長寬比widget
AspectRatio({Key key, double aspectRatio, Widget child}) → AspectRatioConstrainedBox 約束內(nèi)部元素widget
ConstrainedBox({Key key, BoxConstraints constraints, Widget child}) → ConstrainedBoxIntrinsicHeight 子元素撐滿高度
IntrinsicHeight({Key key, Widget child}) → IntrinsicHeightIntrinsicWidth 子元素撐滿寬度
IntrinsicWidth({Key key, double stepWidth, double stepHeight, Widget child}) → IntrinsicWidthComplex layout
Row
//as aboveColumn
//as aboveStack 允許堆疊
Stack({Key key, AlignmentGeometry alignment: AlignmentDirectional.topStart, TextDirection textDirection, StackFit fit: StackFit.loose, Overflow overflow: Overflow.clip, List<Widget> children: const <Widget> []}) → StackFlow
Flow({Key key, FlowDelegate delegate, List<Widget> children: const <Widget> []}) → FlowTable
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}) → TableWrap
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> []}) → WrapListBody
ListBody({Key key, Axis mainAxis: Axis.vertical, bool reverse: false, List<Widget> children: const <Widget> []}) → ListBodyListView
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}) → FadeTransitionSizeTransition
(new) SizeTransition({Key key, Axis axis: Axis.vertical, Animation<double> sizeFactor, double axisAlignment: 0.0, Widget child}) → SizeTransitionAlignTransition
(new) AlignTransition({Key key, Animation<AlignmentGeometry> alignment, Widget child, double widthFactor, double heightFactor}) → AlignTransitionScaleTransition
(new) ScaleTransition({Key key, Animation<double> scale, Alignment alignment: Alignment.center, Widget child}) → ScaleTransitionSlideTransition
(new) SlideTransition({Key key, Animation<Offset> position, bool transformHitTests: true, TextDirection textDirection, Widget child}) → SlideTransitionRotationTransition
(new) RotationTransition({Key key, Animation<double> turns, Alignment alignment: Alignment.center, Widget child}) → RotationTransitionPositionedTransition
(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); } }
