card with asset image and text in flutter
8,949
You can copy paste this example:
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Card(
child: Container(
height: 300,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage('images/ios14.png'))),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Text('Nouveautés'),
),
),
margin: EdgeInsets.only(left: 20.0, right: 20.0, top: 5.0),
)
],
),
);
}
}
Author by
elios_cama
I'm an engineering student based in France who love programming and all computer related tech. Currently learning OOP.
Updated on December 01, 2022Comments
-
elios_cama over 1 year
I'm trying to copy the tips app of Iphones. Here is the page:
I'd like to add the text ' nouveautés' on the image of ios like on the picture. I tried like this:
Card( child: Column( children: <Widget>[ Text('Nouveautés'), Container( child: ClipRRect( borderRadius: BorderRadius.circular(15.0), child: Image.asset('images/ios14.png')), ), ], ), margin: EdgeInsets.only(left: 20.0, right: 20.0,top : 5.0), )
It doesn't works so I'd appreciate someone's help or idea please. Thank you in advance!
-
Dung Ngo over 3 yearsyou can use Alignment.topLeft for Container instead of margin and set Padding
-
elios_cama over 3 years@Reign thank you very much, do you know the way to not have a white background behind the rounded corners?