I want to make a card, a few cards in flutter. On the right side an image and on the left side a information text. I tested it with CircleAvatar and it almost worked like i wanted it to, but I don't want a circle, I want a square image. I removed the CircleAvatar part and put in a new container and a child, but i couldn't use AssetImage, the only thing i could use was image.asset('.jpg'). The image was almost bigger that the phone, because there was no working way to set the size. With the CircleAvatar it worked because I set the radius as size. When i tried AssetImage() vscode said to me I cannot put it in a widget. I hope you can help me out (I thing image.asset() isn't the right way). Thank you all
return new MaterialApp(
title: title,
home: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Card(
child: new Column(
children: <Widget>[
new Row(
children: <Widget>[
new Container(
child:
new CircleAvatar(
backgroundImage: new AssetImage('images/lake.jpg'),
radius: 80.0,
child: new Container(
padding: const EdgeInsets.all(0.0),
child: new Text('Sight'),
),
)
),
),
new Container(
child: new Text('long information text'),
)
],
)
],
),
)
],
),
)
);
} }
You should be able to do this for your row:
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Sample App',
home: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Card(
child: new Column(
children: <Widget>[
new Row(
children: <Widget>[
new Container(
child: new Image.asset(
'images/lake.jpg',
height: 60.0,
fit: BoxFit.cover,
),
),
new Container(
child: new Text('long information text'),
),
],
),
],
),
),
],
),
),
);
}
For an answer in your comment!
You can use ClipRRect,
new ClipRRect(
borderRadius: new BorderRadius.circular(8.0),
child: new AssetImage('images/lake.jpg')
)
also You can do like this:
new Container(
width: 50.0,
height: 50.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new AssetImage('images/lake.jpg')
)
)),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With