• 圖片組件
  圖片組件有Image實現，下面采用網絡加載圖片的方式

 child: new Image.network(
            'http://cdn.duitang.com/uploads/item/201409/08/20140908155026_RdUwH.thumb.700_0.jpeg',
            fit: BoxFit.contain,//圖片展示的樣式
            // color: Colors.greenAccent,//顏色混合模式
            // colorBlendMode: BlendMode.darken,
            repeat: ImageRepeat.repeatY,//圖片在Y軸方向重復
          ),

效果如下圖：

圖片組件

• 文本組件

  
  
  文本展示樣式

child: new Text('Hello 隨風流年,隨風流年是一個iOS程序員，如今正在學習flutter',
          textAlign: TextAlign.left,
          maxLines: 1,
          overflow: TextOverflow.ellipsis,//文字溢出展示方式，省略號方式
          style: TextStyle(
            fontSize: 25.0,
            color: Color.fromARGB(255, 255, 125, 125),
            decoration: TextDecoration.underline,//下劃線
            decorationStyle: TextDecorationStyle.solid,
          ),
          ),

• Container組件

 child: Container(
            
            alignment: Alignment.topLeft,//橫向和縱向的對齊方式
            child: new Text('hello 隨風流年',
            style: TextStyle(fontSize: 40.0,color: Color.fromARGB(255, 255, 100, 100),
            ),),
            width: 500.0,
            height: 400.0,
            // color: Colors.lightBlue,
            // padding: const EdgeInsets.all(10),
            padding: const EdgeInsets.fromLTRB(10, 50, 20, 30),//內邊距
            margin: const EdgeInsets.all(10),//外邊距
            decoration: new BoxDecoration(//顏色
              gradient: const LinearGradient(//線性顏色
                colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]
              ),
              border: Border.all(width: 5.0,color: Colors.red)
            ),
),

Simulator Screen Shot - iPhone 11 Pro Max - 2019-10-08 at 16.41.58.png

• 整體代碼如下：

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new MaterialApp(
      title: '隨風流年',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('隨風流年'),
        ),
        body: new Center(
          
          child: new Text('Hello 隨風流年,隨風流年是一個iOS程序員，如今正在學習flutter',
          textAlign: TextAlign.left,
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(
            fontSize: 25.0,
            color: Color.fromARGB(255, 255, 125, 125),
            decoration: TextDecoration.underline,
            decorationStyle: TextDecorationStyle.solid,
          ),
          ),
          /*
          child: Container(
            /*
            alignment: Alignment.topLeft,//橫向和縱向的對齊方式
            child: new Text('hello 隨風流年',
            style: TextStyle(fontSize: 40.0,color: Color.fromARGB(255, 255, 100, 100),
            ),),
            width: 500.0,
            height: 400.0,
            // color: Colors.lightBlue,
            // padding: const EdgeInsets.all(10),
            padding: const EdgeInsets.fromLTRB(10, 50, 20, 30),//內邊距
            margin: const EdgeInsets.all(10),//外邊距
            decoration: new BoxDecoration(
              gradient: const LinearGradient(
                colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]
              ),
              border: Border.all(width: 5.0,color: Colors.red)
            )
          */
          child: new Image.network(
            'http://cdn.duitang.com/uploads/item/201409/08/20140908155026_RdUwH.thumb.700_0.jpeg',
            fit: BoxFit.contain,//保持原來的圖片
            // color: Colors.greenAccent,
            // colorBlendMode: BlendMode.darken,
            repeat: ImageRepeat.repeatY,
          ),
          width: 00,
          height: 400,
          color: Colors.lightBlue,
          
          )
          */
        ),
      ),
    );
  }
}

• 網格組件

 body: GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,// 網格的列數
              mainAxisSpacing: 10.0,// 行間距
              crossAxisSpacing: 10.0,//網格間間距
              childAspectRatio: 0.7 //寬高比
            ),
            children: <Widget>[
             new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.fill),
             new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),
             new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover),
           
            ],
          ),

Simulator Screen Shot - iPhone XR - 2019-10-23 at 11.30.23.png