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