flutter ui

快速生成无状态模板

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

 

快速生成有状态模板

 

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

 

 

1.MaterialApp

脚手架模板

 有状态

import 'package:flutter/material.dart';


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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("测试"),
        ),
        body:Center(child: Text('data'),)
      ),
    );
  }
}

 

2.Scaffold

 

 

3.AppBar

return Scaffold(
      appBar: AppBar(
        leading: IconButton(icon: Icon(Icons.arrow_back), onPressed: () {}),
        title: Text('AppBar'),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.add), onPressed: () {}),
          IconButton(icon: Icon(Icons.add), onPressed: () {}),
        flexibleSpace: Container(
          color: Colors.red,
        ),
        bottom: PreferredSize(
          child: Container(
            height: 50,
            width: double.infinity,
            color: Colors.grey,
            child: Text('bottom'),
          ),
          preferredSize: Size(30, 100),
        ),
      ),
    ); 

 

 

 

4.文本框

new Text('文本框');

属性

 

 

 

 

 

 

监听一

 onChanged：每次改变接受文本的值

onSubmitted:每次按输入法的肯定键接收一个值

 

监听二

 

 

 

 

 

4.按钮


        child: new MaterialButton(
            onPressed: null,
            child: new Text('按钮'),
            color: Colors.blue,
        ),

 

 

5.弹出提示

        child: new MaterialButton(
            onPressed: (){
              Scaffold.of(context).showSnackBar(
                  new SnackBar(content: new Text("提示信息：")));
            },
            child: new Text('按钮'),
            color: Colors.blue,
        ),

 

 

 

输入框

new TextField(
      //
    );

 

6.toast

依赖  fluttertoast: ^2.1.1

import 'package:fluttertoast/fluttertoast.dart';

MaterialButton(
      child: Text("a"),
      onPressed: (){
        Fluttertoast.showToast(
            msg: "This is Center Short Toast",
            toastLength: Toast.LENGTH_SHORT,
            gravity: ToastGravity.CENTER,
            timeInSecForIos: 20,

        );
      },
    );

 

7.加载中

flutter_spinkit: ^3.1.0

import 'package:flutter_spinkit/flutter_spinkit.dart';

SpinKitFadingCircle(
      itemBuilder: (_, int index) {
        return DecoratedBox(
          decoration: BoxDecoration(
            color: index.isEven ? Colors.red : Colors.green,
          ),
        );
      },
    );

 

 8.TabBar

unselectedLabelColor: 设置未被选中的标签颜色

indicatorColor:选中标签的下划线颜色

indicatorSize:选中下划线的长度

 

 

.主题

splashColor：水波纹颜色

 

 

.装饰盒子

decoration:BoxDecoration(

)

border:设置边框

borderRadius：圆角设置

borderShdow:阴影

..shape：形状

..gradient：渐变

image：

 

 

sizeBox

固定尺寸盒子

 

alignment

对齐

 

0.0表示居中

stack 

叠加

 

AspectRatio 设置宽高比

 

 

pageView 翻页

 

SimpleDialog 

AlertDialog

barrierDismissible 点外面不会取消对话框

 

 

bottomSheet 底部滑动

 

 

 

 

 ExpansionPanel 收缩面板

 

chip  

 ActionChip

FilterChip

ChoiceChip

 

warp

 

Divider

 分隔符

 DataTable

 

 stepper

 

 

RefreshIndicator 下拉

TabBarView

 

 主题颜色