3. Image组件

Image

Image.network(): 加载远程图片
Image.asset(): 加载本地图片

import 'package:flutter/material.dart';

void main() {
  return runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Image",
      home: Scaffold(
          appBar: AppBar(
            title: Text("Image"),
          ),
          body: HomeContent1(),
      ),
    );
  }
}

显示网络图片

显示网络图片，只需要填入图片地址就可以了

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.network(
          // 加载网络图片
          'https://dss0.bdstatic.com/k4oZeXSm1A5BphGlnYG/icon/weather/aladdin/png_18/a0.png',
          alignment: Alignment.center,
          color: Colors.blue,
          colorBlendMode: BlendMode.screen,
          fit: BoxFit.none,
          repeat: ImageRepeat.repeat,
        ),
        width: 300.0,
        height: 300.0,
        decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(color: Colors.blue, width: 2),
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
      ),
    );
  }
}

显示本地图片

要显示本地图片，首先需要有本地图片资源，先在项目根目录里面新建images文件夹，用于存放图片。

然后，在项目根目录下面的pubspec.yaml文件里面，引入需要使用的图片。

uses-material-design: true
assets:
  - images\logo.png

最后使用图片就可以了

class HomeContent1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Image.asset(
          'images/logo.png', // 加载本地图片
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}