How to use Card Widget in Flutter App

0 votes

Hi Guys,

I am new in Flutter Framework. I want to use the Card Widget in this app. How can I do that?

Aug 26, 2020 in Others by akhtar
• 38,260 points
1,099 views

1 answer to this question.

0 votes

Hi@akhtar,

A card is a sheet of material used to represent some related information, for example, an album, a geographical location, contact details, etc. You can see the below code. It will give you some ideas.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatelessWidget(),
      ),
    );
  }
}
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Card(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            const ListTile(
              leading: Icon(Icons.album),
              title: Text('The Enchanted Nightingale'),
              subtitle: Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
            ),
            ButtonBar(
              children: <Widget>[
                FlatButton(
                  child: const Text('BUY TICKETS'),
                  onPressed: () {/* ... */},
                ),
                FlatButton(
                  child: const Text('LISTEN'),
                  onPressed: () {/* ... */},
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

To know more about Flutter, join our Flutter Course today.

answered Aug 26, 2020 by MD
• 95,460 points

Related Questions In Others

0 votes
1 answer

How to create a Volume Icon in Flutter App?

Hi@akhtar, You can use Icon Widget to create ...READ MORE

answered Jul 24, 2020 in Others by MD
• 95,460 points
2,006 views
0 votes
1 answer

How to add one image in Flutter App?

Hi@akhtar, You can use Image.network() method to add ...READ MORE

answered Jul 24, 2020 in Others by MD
• 95,460 points
620 views
0 votes
1 answer

How to use hexadecimal color strings in Flutter?

Hi@akhtar, In Flutter the Color class only accepts integers as parameters, or there ...READ MORE

answered Jul 24, 2020 in Others by MD
• 95,460 points
722 views
0 votes
1 answer

How to add a border to a widget in Flutter?

Hi@akhtar, You need to add the TextField as a child to a Container that has ...READ MORE

answered Jul 24, 2020 in Others by MD
• 95,460 points
3,703 views
0 votes
1 answer

What is the future of flutter?

Hi@MD, Flutter is a rather new cross-platform framework ...READ MORE

answered Jul 17, 2020 in Others by akhtar
• 38,260 points
1,063 views
0 votes
1 answer

What is Flutter?

Hi@akhtar, Flutter is an app SDK for building ...READ MORE

answered Jul 17, 2020 in Others by MD
• 95,460 points
1,313 views
0 votes
1 answer

How to install Flutter in Windows system?

Hi@akhtar, You can follow the below-given steps to ...READ MORE

answered Jul 17, 2020 in Others by MD
• 95,460 points
1,726 views
0 votes
1 answer

How to use ListTile class in Flutter App?

Hi@akhtar, A list tile contains one to three ...READ MORE

answered Aug 26, 2020 in Others by MD
• 95,460 points
1,608 views
0 votes
1 answer

How to deploy card banners in flutter app?

Hi, If you are trying to create a ...READ MORE

answered Sep 2, 2020 in Others by MD
• 95,460 points
1,151 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP