Flutter - the most detailed Image (image) tutorial

It is used to display a picture, which can be obtained from files, memory, network, and resources. You can specify fit, style, color blend mode, repeat mode, and more.

common attributes

Attributes	effect
fit	Image Adaptation Mode
alignment	Image alignment mode

class ImageWidget extends StatelessWidget {
    
    
  final assetsImagePath = "assets/images/flutter_mark_logo.png";
  final netImageUrl =
      "https://flutterchina.club/images/homepage/header-illustration.png";

  @override
  Widget build(BuildContext context) {
    
    
    return Column(
      children: <Widget>[
        _loadFromAssets(),
        _loadFromNet(),
      ],
    );
  }

  Widget _loadFromAssets() => Wrap(
        spacing: 10,
        children: <Widget>[
          Image.asset(assetsImagePath, height: 80, width: 80),
        ],
      );

  Widget _loadFromNet() => Image.network(netImageUrl, height: 80);
}

class FitImage extends StatefulWidget {
    
    
  @override
  _FitImageState createState() => _FitImageState();
}

class _FitImageState extends State<FitImage> {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    var imageLi = BoxFit.values
        .toList()
        .map((mode) => Column(children: <Widget>[
              Container(
                  margin: EdgeInsets.all(5),
                  width: 100,
                  height: 80,
                  color: Colors.grey.withAlpha(88),
                  child: Image(
                      image: AssetImage("assets/images/avaver.jpeg"),
                      fit: mode)),
              Text(mode.toString().split(".")[1])
            ]))
        .toList();

    return Wrap(
      children: [...imageLi],
    );
  }
}

class AlignmentImage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    var alignment = [
      Alignment.center,
      Alignment.centerLeft,
      Alignment.centerRight,
      Alignment.topCenter,
      Alignment.topLeft,
      Alignment.topRight,
      Alignment.bottomCenter,
      Alignment.bottomLeft,
      Alignment.bottomRight
    ]; //测试数组
    var imgLi = alignment
        .map((alignment) => //生成子Widget列表
            Column(children: <Widget>[
              Container(
                  margin: EdgeInsets.all(5),
                  width: 90,
                  height: 60,
                  color: Colors.grey.withAlpha(88),
                  child: Image(
                    image: AssetImage("assets/images/avaver.jpeg"),
                    alignment: alignment,
                  )),
              Text(alignment.toString())
            ]))
        .toList();
    var imageAlignment = Wrap(children: imgLi);
    return imageAlignment;
  }
}

class RepeatImage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Wrap(
      children: ImageRepeat.values
          .toList()
          .map((mode) => Column(children: <Widget>[
                Container(
                    margin: EdgeInsets.all(5),
                    width: 150,
                    height: 60,
                    color: Colors.red,
                    child: Image(
                        image: AssetImage("assets/images/avaver.jpeg"),
                        repeat: mode)),
                Text(mode.toString().split(".")[1])
              ]))
          .toList(),
    );
  }
}