1. Set the local image

Image.asset

Image.asset(
                'images/bmw.png',
                width: 80,
                fit: BoxFit.fitWidth,
              )
Copy the code

2. Network pictures

Image.network

Image.network(
                'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1883407631, & FM = 26 & gp = 0. 4056411171 JPG',
                width: 100,
                fit: BoxFit.fitWidth,
              )
Copy the code

3. Set a circular image

The shape inside BoxDecoration: boxShape. circle marks this as a circle, so you don’t need to set the borderRadius; Generally, we use the decoration of containers to make corresponding Settings.

 Container(
                width: 100,
                height: 100,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: NetworkImage(
                        'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4099493327, & FM = 26 & gp = 0. 2236798276 JPG'),
                    fit: BoxFit.cover,
                  ),
                  shape: BoxShape.circle,
                ),
              )
Copy the code

4. Set a picture with small rounded corners

Here you need to set Shape: BoxShape. Rectangle and borderRadius to work

 Container(
                width: 320,
                height: 212,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: NetworkImage(
                        'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1883407631, & FM = 26 & gp = 0. 4056411171 JPG'),
                    fit: BoxFit.cover,
                  ),
                  shape: BoxShape.rectangle, // <-- this needs to be set to rectangle
                  borderRadius: new BorderRadius.all(
                    const Radius.circular(
                        10.0), // <-- Rectangle, BorderRadius only works),),)Copy the code

5. Total code

import 'package:flutter/material.dart';

/* Image is used to display images, usually from a resource pack or from a network. Image To support rounded rectangles, use Container or CircleAvatar to implement rounded corners */
class ImageDemo extends StatelessWidget {
  final String title;
  ImageDemo({Key key, this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text(this.title)),
        body: Center(
          child: Column(
            children: <Widget>[
              Image.network(
                'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1883407631, & FM = 26 & gp = 0. 4056411171 JPG'.// 'http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20200220/1f28da011dd84d2cadede15b5f21d38d.jpeg',
                width: 100,
                fit: BoxFit.fitWidth,
              ),
              Image.asset(
                'images/bmw.png',
                width: 80,
                fit: BoxFit.fitWidth,
              ),
              Container(
                width: 100,
                height: 100,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: NetworkImage(
                        'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4099493327, & FM = 26 & gp = 0. 2236798276 JPG'),
                    fit: BoxFit.cover,
                  ),
                  shape: BoxShape.circle,
                ),
              ),
              Container(
                width: 320,
                height: 212,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: NetworkImage(
                        'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1883407631, & FM = 26 & gp = 0. 4056411171 JPG'),
                    fit: BoxFit.cover,
                  ),
                  shape: BoxShape.rectangle, // <-- this needs to be set to rectangle
                  borderRadius: new BorderRadius.all(
                    const Radius.circular(
                        10.0), // <-- Rectangle, BorderRadius only works(() [() [() [() [() [() }}Copy the code