{"id":2097,"date":"2022-04-07T19:09:01","date_gmt":"2022-04-07T19:09:01","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=2097"},"modified":"2022-04-07T19:09:01","modified_gmt":"2022-04-07T19:09:01","slug":"card-example","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/04\/07\/card-example\/","title":{"rendered":"Card Example"},"content":{"rendered":"\n<p>In this example, we will create a card widget that shows the\u00a0<strong>album information and two actions named Play and Pause<\/strong>. Create a project in the IDE, open the main.dart file and replace it with the following code.<a href=\"https:\/\/www.javatpoint.com\/flutter-card#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-card#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-card#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() => runApp(MyApp());  \n  \n\/\/\/ This Widget is the main application widget.  \nclass MyApp extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      home: Scaffold(  \n        appBar: AppBar(title: Text('Flutter Card Example')),  \n        backgroundColor: Colors.yellow,  \n        body: MyCardWidget(),  \n      ),  \n    );  \n  }  \n}  \n  \n\/\/\/ This is the stateless widget that the main application instantiates.  \nclass MyCardWidget extends StatelessWidget {  \n  MyCardWidget({Key key}) : super(key: key);  \n  \n  @override  \n  Widget build(BuildContext context) {  \n    return Center(  \n      child: Container(  \n        width: 300,  \n        height: 200,  \n        padding: new EdgeInsets.all(10.0),  \n        child: Card(  \n          shape: RoundedRectangleBorder(  \n            borderRadius: BorderRadius.circular(15.0),  \n          ),  \n          color: Colors.red,  \n          elevation: 10,  \n          child: Column(  \n            mainAxisSize: MainAxisSize.min,  \n            children: &lt;Widget>&#91;  \n              const ListTile(  \n                leading: Icon(Icons.album, size: 60),  \n                title: Text(  \n                  'Sonu Nigam',  \n                  style: TextStyle(fontSize: 30.0)  \n                ),  \n                subtitle: Text(  \n                  'Best of Sonu Nigam Music.',  \n                  style: TextStyle(fontSize: 18.0)  \n                ),  \n              ),  \n              ButtonBar(  \n                children: &lt;Widget>&#91;  \n                  RaisedButton(  \n                    child: const Text('Play'),  \n                    onPressed: () {\/* ... *\/},  \n                  ),  \n                  RaisedButton(  \n                    child: const Text('Pause'),  \n                    onPressed: () {\/* ... *\/},  \n                  ),  \n                ],  \n              ),  \n            ],  \n          ),  \n        ),  \n      )  \n    );  \n  }  \n}  <\/code><\/pre>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<p>When we run this app, it will show the UI of the screen as below screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-card.png\" alt=\"Flutter Card\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In this example, we will create a card widget that shows the\u00a0album information and two actions named Play and Pause. Create a project in the IDE, open the main.dart file and replace it with the following code. Output: When we run this app, it will show the UI of the screen as below screenshot.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[517],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2097"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=2097"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2097\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}