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<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,//内边距
  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<Widget> children: const <Widget> []//子类(数组)
}) → 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<Widget> children: const <Widget> []//子类(数组)
}) → 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<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, //最大行数
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<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, //按钮处于向下(按下)状态时按钮的辅助颜色
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<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 内部元素大小随动变化

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<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);
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容