按钮与图片

// 引入组件UI库
import 'package:flutter/material.dart';
// 程序主入口 单行函数的 简写方法
void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: MyHomePage(title: '按钮和图片'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView (
        child: Column(
          children: <Widget>[
            Text(
              '按钮们',
              style: TextStyle(
                fontSize: 20,
                color: Colors.red,
              ),
            ),
            RaisedButton(
              child:Text('RaisedButton漂浮按钮'),
              onPressed: (){},
            ),
            FlatButton(
              child: Text('FlatButton普通按钮'),
              onPressed: (){
                debugPrint('点击'); // 不设置点击事件为置灰状态
              },
            ),
            OutlineButton(
              child: Text('OutlineButton阴影按钮'),
              onPressed: (){},
            ),
            IconButton(
              icon: Icon(Icons.search),
              onPressed: (){},
            ),
            Text(
              '图片们',
              style: TextStyle(
                fontSize: 20,
                color: Colors.red,
              ),
            ),
            RaisedButton.icon(onPressed:(){}, icon: Icon(Icons.home), label: Text('包含标题和图片按钮')),
            FlatButton(
              color: Colors.blue,
              highlightColor: Colors.blue[700], // 高亮颜色
              colorBrightness: Brightness.dark, // 按钮主题颜色
              splashColor: Colors.grey,
              child: Text('自定义FlatButton按钮'),
              onPressed: (){},
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)), // 圆角
            ),
            Image(
              image: AssetImage("images/collection.png"),
              width: 100.0,
              fit: BoxFit.fill,
            ),
            Image.network("https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
              width: 200,
            ),
            Image(
              image: AssetImage("images/776.jpg"),
              height: 400,
              repeat: ImageRepeat.repeatY, // 重复模式Y轴 当容器盛不下时设置
            ),
            Text(
              'Flutter对于加载过的图片是有缓存的，默认最大缓存数量是1000，最大缓存空间为100',
              style: TextStyle(
                fontSize: 18,
                color: Colors.black,
              ),
            ),
            Text('IconFont',
            style: TextStyle(
              fontSize: 18,
              color: Colors.cyan,
            ),
            ),
            Icon(Icons.error, color: Colors.red,),
            Icon(Icons.fingerprint, color: Colors.green,),

          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

需要特殊注意的地方 pubspec.yaml

  assets: #⚠⚠️注意: 由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处assets前面应有两个空格。
    -  images/776.jpg
    -  images/collection.png

效果图

安卓效果图1
安卓效果图2