CODEWITHSUNDEEP
flutterdartlayoutcard
elios_cama
elios_cama

Reputation: 217

card with asset image and text in flutter

I'm trying to copy the tips app of Iphones. Here is the page:enter image description here

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!

Upvotes: 2

Views: 19339

Answers (1)

Raine Dale Holgado
Raine Dale Holgado

Reputation: 3460

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),
          )
        ],
      ),
    );
  }
}

Upvotes: 1

Related Questions