Widget

父类像子类传递数据

class ESHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar( 
        title: Text("导航栏标题"),
      ),
      body: ESTest(title: "父类的测试数据"),
    );
  }
}

class ESTest extends StatefulWidget {
  final String title;
  const ESTest({Key key, this.title}) : super(key: key);
  @override
  _ESTestState createState() => _ESTestState();
}

class _ESTestState extends State<ESTest> {
  @override
  Widget build(BuildContext context) {
    return Text("从父类传递过来的数据:${widget.title}");
  }
}

checkbox

class ESTest extends StatefulWidget {
  @override
  _ESTestState createState() => _ESTestState();
}

class _ESTestState extends State<ESTest> {
  var status = true;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Checkbox(
              value: status,
              onChanged: (value){
                setState(() {
                  this.status = value;
                });
              })
        ],
      ),
    );
  }
}

计步器

class _ESTestState extends State<ESTest> {
  int  _counter = 0;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Text("当前计数:$_counter"),
          _steperButton()
        ],
      )
    );
  }
  Widget _steperButton(){
    return  Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        RaisedButton(
            child:Text("+",style: TextStyle(color: Colors.white,fontSize: 20)),
            color: Colors.red,
            onPressed: (){
              setState(() {
                _counter++;
              });
              print("+");
            }
        ),
        RaisedButton(
            child:Text("-",style: TextStyle(color: Colors.white,fontSize: 20)),
            color: Colors.green,
            onPressed: (){
              setState(() {
                _counter--;
              });
              print("-");
            }
        ),
      ],
    );
  }
}

Text文本

class _ESTestState extends State<ESTest> {
  @override
  Widget build(BuildContext context) {
    return Text(
        "文本 widget\n哈哈哈哈哈哈哈啊哈哈哈哈哈啊哈哈哈哈是打发斯蒂芬\n阿斯蒂芬\n沃尔夫环能科技安徽省；的会计复核\n123",
      style: TextStyle(
        fontSize: 50,
        color: Colors.red,
        fontWeight: FontWeight.bold,
        letterSpacing: 0.5,//字母间距
        wordSpacing: 2,//单词间距
      ),
      textAlign: TextAlign.center,//文本布局
      maxLines: 4,//最大行数
      overflow: TextOverflow.ellipsis,//多与文本省略
      textScaleFactor: 1.5,//文本缩放1.5倍
    );
  }
}

富文本 ` 图文混合

class ESTest extends StatefulWidget {
  @override
  _ESTestState createState() => _ESTestState();
}
class _ESTestState extends State<ESTest> {
  @override
  Widget build(BuildContext context) {
    return Text.rich(
        TextSpan(
            children: [
              TextSpan(text: "hello",style: TextStyle(color: Colors.red)),
              WidgetSpan(child: Icon(Icons.phone_in_talk,color:Colors.purple)),
              TextSpan(text: "world",style: TextStyle(color: Colors.green))
            ]
        )
    );;
  }
}

按钮

class _ESTestState extends State<ESTest> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,//交叉轴对齐方式
      mainAxisAlignment: MainAxisAlignment.center,//主轴对其方式
      children: [
        RaisedButton(
           child: Text("内填充按钮"),
            textColor: Colors.white,
            color: Colors.black38,
            onPressed: ()=>print("raisedButton")
        ),
        FlatButton(
          child: Text("镂空按钮"),
            textColor: Colors.green,
            onPressed: ()=>print("flat button")
        ),
        OutlineButton(
          child: Text("边框按钮"),
            onPressed: ()=>print("outline button")
        ),
        FloatingActionButton(
          child: Icon(Icons.phone_android),
          onPressed: ()=>print("floating button"),
        ),
        FlatButton(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.add),
              Text("添加")
            ],
          ),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(5)
            ),
            color: Colors.green,
            onPressed: ()=>print("图文按钮")
        )
      ],
    );
  }
}

图标按钮：

IconButton(icon: Icon(Icons.satellite,color: Colors.black,size: 40), onPressed: null)

按钮默认适配48的高度，如果不足48会添加空隙如下：

可以做如下处理

在button的属性中添加：
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,

如果想随意设置按钮尺寸可以嵌套ButtonTheme：

ButtonTheme(
          height: 80,
          minWidth: 200,
          child: FlatButton(
            onPressed: ()=>print("lat"),
            child: Text("flat button"),
            color: Colors.red,
            textColor: Colors.white,
            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          ),
        ),

图片 Image

配置本地图片
创建assets文件->images文件
如果要适配@2x @3x则对应创建2.0x文件夹和3.0x文件夹并导入图片

在pubspec.yaml中进行配置

  assets:
    - assets/images/
    - assets/images/2.0x/
    - assets/images/3.0x/

加载本地图片与网络图片：

class _ESTestState extends State<ESTest> {
  final imageurl = "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2548350088,1183144829&fm=26&gp=0.jpg";
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image(
          image: NetworkImage(imageurl),
          width: 200,
          height: 200,
          fit: BoxFit.contain,
          alignment: Alignment(0, 1),//中心对其
          color: Colors.green,//混入原色
          colorBlendMode: BlendMode.colorDodge,//混入模式
          repeat: ImageRepeat.repeatX,//y轴重复
        ),
        Image(
          // 插入本地图片
          // 需简要在flutter中创建图片资源文件
          // 在pubspec.yaml中进行配置
          image: AssetImage("assets/images/lb.jpeg"),
        )

      ],
    );
  }
}

使用占位符图片：

FadeInImage(
          fadeOutDuration: Duration(milliseconds: 5),
          fadeInDuration: Duration(milliseconds: 5),
          placeholder: AssetImage("assets/images/lb.jpeg"),
          image: NetworkImage(imageurl),
        )

关于图片缓存的问题
flutter中自动做了图片缓存
最多1000张图片 && 最大100m，超出范围会对内存进行清理

字体图标

Icon(Icons.access_alarm,color: Colors.blueGrey,size: 200),
Text("\ue91d",style: TextStyle(fontSize: 100,color: Colors.green,fontFamily:"material-icons"))