flutter widget

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 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,//内边距
  Color color,//背景色
  Decoration decoration,//child后的样式
  Decoration foregroundDecoration,//child前的样式
  double width,
  double height,
  BoxConstraints constraints,
  EdgeInsetsGeometry margin,//外边距
  Matrix4 transform,//旋转
  Widget child//子类
}) → Container

Row

(new) Row({
Key key,
MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,//横向对齐方式
MainAxisSize mainAxisSize: MainAxisSize.max,//横向轴最大尺寸
CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,//竖直位置
TextDirection textDirection,//文字方向
VerticalDirection verticalDirection: VerticalDirection.down,//竖直方向
TextBaseline textBaseline,//文字基准线
List children: const  []//子类（数组）
}) → Row

Column

(new) Column({
Key key,
MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,//横向对齐方式
MainAxisSize mainAxisSize: MainAxisSize.max,//横向轴最大尺寸
CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,//竖直位置
TextDirection textDirection,//文字方向
VerticalDirection verticalDirection: VerticalDirection.down,//竖直方向
TextBaseline textBaseline,//文字基准线
List children: const  []//子类（数组）
}) → Column

Image

Image.asset //加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径
Image.network //网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址
Image.file //加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关【不常用】
Image.memory //加载Uint8List资源图片【不常用】

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

image: NetworkImage(String url, {double scale: 1.0, Map 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, //最大行数
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, //按钮处于向下（按下）状态时按钮的辅助颜色
Color splashColor, //按钮处于向下（按下）状态时按钮的主要颜色
Color disabledColor,
() → void onPressed, //点击回调函数
String tooltip //辅助文字说明标签
}) → IconButton

Icons //引用flutter内置图标

IconTheme({
Key key,
IconThemeData data,//IconThemeData({Color color, double opacity, double size}) → IconThemeData
Widget child //Icon和ImageIcon应用IconThemeData中定义的主题属性
}) → IconTheme

ImageIcon(ImageProvider 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, //按钮处于向下（按下）状态时按钮的辅助颜色
Color splashColor, //按钮处于向下（按下）状态时按钮的主要颜色
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 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 内部元素大小随动变化

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 约束内部元素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 children: const  []}) → Stack

Flow

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

Table

Table({Key key, List children: const  [], Map 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 children: const  []}) → Wrap

ListBody

ListBody({Key key, Axis mainAxis: Axis.vertical, bool reverse: false, List children: const  []}) → 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 children: const  [], int semanticChildCount, DragStartBehavior dragStartBehavior: DragStartBehavior.down}) → ListView

Transitions

FadeTransition

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

SizeTransition

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

AlignTransition

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

ScaleTransition

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

SlideTransition

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

RotationTransition

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

PositionedTransition

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

Tween

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

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 {
  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 get instance async {
    return await getInstance();
  }

  static SharedPreferences _prefs;

  LocalStorage._();

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

  static Future 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 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);
  }
}