CODEWITHSUNDEEP
flutter
Kasper
Kasper

Reputation: 13602

How to implement this material card with flutter from material.io?

At material.io they have this standard anatomy of a material card: https://material.io/design/components/cards.html#anatomy

Material Card

Anatomy

I was wondering how you would implement this in flutter and/or if there is some abstraction that I can use to make a card look like this. Thanks!

Upvotes: 1

Views: 528

Answers (2)

Murat Aslan
Murat Aslan

Reputation: 1580

You can implement like this below

Card(
      child: Column(
        children: [
          ListTile(
            leading: Icon(Icons.image),
            title: Text('Title Here'),
            subtitle: Text('Subtitle Here'),
          ),
          Row(
            children: [
              Expanded(
                child: Image.asset('assets/image.png'), // Replace with your image asset path
              ),
            ],
          ),
          Row(
            children: [
              Text('Some text here'),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  ElevatedButton(onPressed: () {}, child: Text('Button 1')),
                  SizedBox(width: 8),
                  ElevatedButton(onPressed: () {}, child: Text('Button 2')),
                ],
              ),
              Row(
                children: [
                  Icon(Icons.star),
                  SizedBox(width: 8),
                  Icon(Icons.favorite),
                ],
              ),
            ],
          ),
        ],
      ),
    )

Upvotes: 2

Tomasz Noinski
Tomasz Noinski

Reputation: 497

The closest seems to be the Card class (https://docs.flutter.io/flutter/material/Card-class.html) together with a ListTile for the top part and card-themed buttons at the bottom, like in the example from that component's page.

Upvotes: 0

Related Questions