Flutter筆記-基礎組件

加載網絡圖片以及本地圖片

 Image(
              image: NetworkImage(
                  "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB12IU4R.img?w=80&h=80&m=4&q=60"),
              width: 100.0,
            ),
            Image(image: AssetImage("graphics/ic_launcher.png"),
              width: 100.0,
              height: 100.0,
            )

color和colorBlendMode 進行顏色混合處理

 Image(
              image: AssetImage("graphics/ic_launcher.png"),
              width: 100.0,
              height: 100.0,
              color: Colors.blue,
              colorBlendMode: BlendMode.difference,
            )

整體的例子：
加載網絡圖片

import 'package:flutter/cupertino.dart';

class ImageAndIconRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var assetImage = AssetImage("graphics/ic_launcher.png");
    return SingleChildScrollView(
      child: Column(
          children: <Image>[
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.fill,
        ),
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.contain,
        ),
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.cover,
        ),
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.fitWidth,
        ),
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.fitHeight,
        ),
        Image(
          image: assetImage,
          width: 100,
          height: 100,
          fit: BoxFit.none,
        ),
      ].map((e) {
        return Row(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(16.0),
              child: SizedBox(
                width: 100,
                child: e,
              ),
            ),
            Text(e.fit.toString())
          ],
        );
      }).toList()),
    );
  }
}