Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    Flutter Interview Questions for freshers

    June 25, 2023

    Flutter Interview Questions for Experienced

    June 25, 2023

    Top 15 Flutter Interview Questions and Answers 2023

    April 22, 2023
    Facebook Twitter Instagram
    Facebook Twitter Instagram Pinterest YouTube
    DeepCrazyWorld
    Subscribe
    • Home
    • FLUTTER
      • UI
        • Splash Screen
        • Card Design
        • Login Screen
      • APPS
    • ANDROID
      • ANDROID APP
      • GAME APP
    • SOURCE CODE
    • ANDROID STUDIO
    • PROJECT
      • Android Projects
      • College Projects
      • Project Ideas
      • PHP Projects
      • Python Projects
    • MCQ
      • AKTU MCQ
        • RPA MCQ
        • COA MCQ
        • HPC MCQ
        • SPM MCQ
        • Renewable Energy All MCQ
        • Data Compression MCQ
        • Data Structure MCQ
        • Digital Image Processing MCQ
        • Software Engineering MCQ
        • Machine Learning MCQ
        • Artificial Intelligence MCQ
      • D PHARMA MCQ
        • Pharmaceutics – I MCQ
        • Pharmacognosy MCQ
        • Pharmaceutical Chemistry MCQ
        • Biochemistry and Clinical Pathology MCQ
        • Human Anatomy and Physiology MCQ
        • Heath Education and Community Pharmacy MCQ
      • COLLECTION
        • WORDPRESS
          • SEO
          • TOP 10 WORDPRESS THEME
        • PRODUCTIVITY
        • Networking
        • Program
        • YOUTUBE
        • QUOTES
    • INTERVIEW QUESTIONS
    DeepCrazyWorld
    Home»Card Design»Flutter Card Widget with Example Tutorial 2023
    Card Design

    Flutter Card Widget with Example Tutorial 2023

    DeepikaBy DeepikaJune 16, 2022Updated:February 19, 2023No Comments5 Mins Read
    Facebook Twitter LinkedIn WhatsApp Telegram
    Share
    Facebook Twitter LinkedIn Pinterest Telegram WhatsApp

    Flutter Card Widget with Example – In this tutorial we will learn how to use card in flutter with example. Learn how to customize it’s look by styling it with different properties.

    Table of Contents

    • Flutter Card Widget
    • Creating And Showing Card In Flutter
      • Flutter Card Properties
      • color / backgroundColor
      • elevation
      • shadowColor
      • shape
      • margin
      • rounded corners
      • border and border color
      • circular card
    • Flutter Card Example
    • Additional Reading
    • Related Articles:
    • READ MORE

    Flutter Card Widget

    Card widget in flutter is a sheet of Material used to represent all the similar information in a single block. For example, a card can be used to design an album cover as it will represent all the songs that belong to that album. A card will have rounded corners and is elevated by default. We can change the value of elevation as per our requirement. While designing a card we can use elements like text, images, videos, text buttons etc. Cards make the application UI more beautiful and eye-catching to the user.

    Creating And Showing Card In Flutter

    <img decoding=

    To create and display a card in flutter we have to call the constructor of the card class provided by flutter. There are no required properties for a card widget but to show the card we have to provide the child property with a widget. Without providing the child with a widget we cannot see the card.

    Flutter Card Constructor :

    Card(
        {Key? key,
        Color? color,
        Color? shadowColor,
        double? elevation,
        ShapeBorder? shape,
        bool borderOnForeground,
        EdgeInsetsGeometry? margin,
        Clip? clipBehavior,
        Widget? child,
        bool semanticContainer}
    ) 

    Below is the example code to add a card to our flutter application.

    Card(
            child: ListTile(
              title: Text("Codesinsider.com"),
            ),
         )

    Flutter Card Properties

    The properties of the card widget are:

    • color
    • elevation
    • shadowColor
    • shape
    • margin

    color / backgroundColor

    We will use this property to change the background color of the card. It takes Color as value.

    Card(
              child: ListTile(
                title: Text("Codesinsider.com", style: TextStyle(color: Colors.white),),
              ),
              color: Colors.green,
            )

    elevation

    We will use this property to add or change elevation of the card. It takes double as value.

    Card(
              child: ListTile(
                title: Text("Codesinsider.com"),
              ),
              elevation: 8,
            )

    shadowColor

    To change the color of the shadow that appears when the card is elevated we will use shadow color property. It takes color as value.

    Card(
              child: ListTile(
                title: Text("Codesinsider.com"),
              ),
              elevation: 8,
              shadowColor: Colors.green,
            )

    shape

    To change the shape of the card we will use this property. By using shape property we can add border, change border color, make rounded corners, circular card etc. In the below example i’ m using BeveledRectangleBorder shape. If you want to try other shapes.

    Card(
              child: ListTile(
                title: Text("Codesinsider.com"),
              ),
              elevation: 8,
              shadowColor: Colors.green,
              shape: BeveledRectangleBorder(
                  borderRadius: BorderRadius.circular(15)
              ),
            )

    margin

    To provide margin to card we will use this property. It takes Edge Insets Geometry as value.

    Card(
              child: ListTile(
                //leading: Icon(Icons.music_note),
                title: Text("Codesinsider.com"),
              ),
              elevation: 8,
              shadowColor: Colors.green,
              margin: EdgeInsets.all(20),
            )

    Container(
              height: 200,
              width: 200,
              child: Card(
                child: ListTile(
                  title: Text("Codesinsider.com"),
                ),
                elevation: 8,
                shadowColor: Colors.green,
                margin: EdgeInsets.all(20),
              ),
            )

    rounded corners

    There is no property available for making rounded corners so we will use shape property to make rounded corners.

    Card(
              child: ListTile(
                title: Text("Codesinsider.com"),
              ),
              elevation: 8,
              shadowColor: Colors.green,
              margin: EdgeInsets.all(20),
              shape:  OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10), 
                  borderSide: BorderSide(color: Colors.white)
              ),
            )

    border and border color

    To add border and border color i’ ve used outlineInputBorder since there is no property in card widget to add border and border color. To try other shapes and borders for refere

    Card(
              child: ListTile(
                title: Text("Codesinsider.com"),
              ),
              elevation: 8,
              shadowColor: Colors.green,
              margin: EdgeInsets.all(20),
              shape:  OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: BorderSide(color: Colors.green, width: 1)
              ),
            )

    circular card

    To make a circular card we will use CircleBorder shape.

    Card(
              child: Container(
                height: 160,
                width: 160,
                child: Center(
                  child: ListTile(
                    title: Text("Codesinsider.com"),
                  ),
                ),
              ),
              elevation: 8,
              shadowColor: Colors.green,
              margin: EdgeInsets.all(20),
              shape: CircleBorder(side: BorderSide(width: 1, color: Colors.white),
              ),
            )

    Flutter Card Example

    Let’s see an example where we design a music album card with white background color, an image to left and some text in the right. Below the text we will add two Text buttons play and add to queue.

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter/widgets.dart';
    import 'package:flutter_app_learning/NavDrawer.dart';
    import 'package:flutter_app_learning/contact.dart';
    void main()
    {
      runApp(MyApp());
    }
     
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Learning',
          theme: ThemeData(
            primarySwatch: Colors.green,
          ),
          home: MyHomePage(),
        );
      }
    }
     
    class MyHomePage extends StatefulWidget {
      @override
      _MyHomePageState createState()
      {
        return _MyHomePageState();
      }
    }
     
    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Flutter Card"),
          ),
            body:Card(
              child:Container(
                height: 100,
                color: Colors.white,
                child: Row(
                  children: [
                    Center(
                      child: Padding(
                        padding: EdgeInsets.all(10),
                        child: Expanded(
                          child:Image.asset("assets/images/shape_of_you.png"),
                          flex:2 ,
                        ),
                      ),
                    ),
                    Expanded(
                      child:Container(
                        alignment: Alignment.topLeft,
                        child: Column(
                          children: [
                            Expanded(
                              flex: 5,
                              child: ListTile(
                                title: Text("Shape Of You"),
                                subtitle: Text("Ed Sheeran"),
                              ),
                            ),
                            Expanded(
                              flex: 5,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.end,
                                children: [
                                  TextButton(
                                    child:Text("PLAY"),
                                    onPressed: ()
                                    {},
                                  ),
                                  SizedBox(width: 8,),
                                  TextButton(
                                    child: Text("ADD TO QUEUE"),
                                    onPressed: (){},
                                  ),
                                  SizedBox(width: 8,)
                                ],
                              ),
                            )
                          ],
                        ),
                      ),
                      flex:8 ,
                    ),
                  ],
                ),
              ),
              elevation: 8,
              margin: EdgeInsets.all(10),
            ),
        );
      }
    }

    Output :

    That brings an end to the tutorial on how to create and display or show Card in flutter. We have also seen an example where we’ve used Card widget and customized it. Let’s catch up with some other widget in the next post. Have a great day!!

    Do like & share my Facebook page. Subscribe to newsletter if you find this post helpful. Thank you!!

    How to Setup Space Between Elements In Flutter 2023

    Additional Reading

    Do like & share my Facebook page. if you find this post helpful. Thank you!!

    Related Articles:

    • How to Install Flutter in windows 10 | With videos guide
    • How to Setup Space Between Elements In Flutter 
    • Integrating an API into a Flutter – Working with REST APIs
    • Create a simple splash screen in Flutter
    • Android Projects with Source Code
    • Flutter Interview Questions
    • School Database Management System Project 

    READ MORE

    If you found this post useful, don’t forget to share this with your friends, and if you have any query feel free to comment it in the comment section.

    Thank you 🙂 Keep Learning !

    Share this…
    • Facebook
    • Pinterest
    • Twitter
    • Linkedin
    • Whatsapp
    • Gmail
    Post Views: 404
    flutter beautiful card design flutter card list flutter card onpressed flutter card size flutter card width flutter card with image and buttons flutter card with image and text example flutter card with image example How do you decorate cards in Flutter? How do you give a style card in Flutter? How do you make a card widget in Flutter? What is card widget in Flutter?
    Share. Facebook Twitter LinkedIn WhatsApp Telegram
    Previous ArticleTop ways to improve Google PageSpeed on WordPress
    Next Article How to create a simple splash screen in Flutter 2023
    Deepika
    • Website
    • Facebook
    • Twitter
    • Pinterest
    • Instagram
    • LinkedIn

    Hey, I'm Deepika a professional blogger and Experienced in Android Developer,Flutter Developer, PHP Web Developer. Technically sound Post graduate pursuing M.Tech in Computer Science and Engineering. I Love to gain every type of knowledge that's why i have done many courses in different fields like engineering and technology. Skilled in Java, HTML, CSS,Bootstrap,j query PHP, Python, SQL, C, C++,Firebase,MySQL,SQLite,JavaScript. Also I have learned Networking.

    Related Posts

    Flutter Interview Questions for freshers

    June 25, 2023

    Flutter Interview Questions for Experienced

    June 25, 2023

    Top 15 Flutter Interview Questions and Answers 2023

    April 22, 2023

    The Best Flutter Stepper Widget : Build Multi-Step Forms

    April 22, 2023

    Leave A Reply Cancel Reply

    Our Picks
    • Facebook
    • Twitter
    • Pinterest
    • Instagram
    • YouTube
    • Vimeo
    Don't Miss
    FLUTTER

    Flutter Interview Questions for freshers

    By DeepikaJune 25, 202303 Mins Read

    Certainly! Here’s a Flutter interview question along with its answer suitable for a fresher: Question:…

    Share this...
    • Facebook
    • Pinterest
    • Twitter
    • Linkedin
    • Whatsapp
    • Gmail

    Flutter Interview Questions for Experienced

    June 25, 2023

    Top 15 Flutter Interview Questions and Answers 2023

    April 22, 2023

    The Best Flutter Stepper Widget : Build Multi-Step Forms

    April 22, 2023
    Archives

    Subscribe to Updates

    Get the latest creative news from SmartMag about art & design.

    About Us
    About Us

    Hey, I'm Deepika a professional blogger and Experienced in Mobile App Developer ( Android and Flutter ) Technically sound Post graduated M.Tech in Computer Science and Engineering.
    I Love to gain every type of knowledge that's why i have done many courses in different fields like engineering and technology.

    Recent Posts
    • Flutter Interview Questions for freshers
    • Flutter Interview Questions for Experienced
    • Top 15 Flutter Interview Questions and Answers 2023
    • The Best Flutter Stepper Widget : Build Multi-Step Forms
    • Flutter ListView – A Guide to Creating Dynamic Lists with flutter
    • Top 10 Flutter Projects with source code For Startups
    • How to use chatGPT for UI/UX design with examples in 2023
    • Top 30 Flutter Interview Questions in 2023

    Flutter Interview Questions for freshers

    June 25, 2023

    Flutter Interview Questions for Experienced

    June 25, 2023

    Top 15 Flutter Interview Questions and Answers 2023

    April 22, 2023

    The Best Flutter Stepper Widget : Build Multi-Step Forms

    April 22, 2023
    Facebook Twitter Instagram Pinterest
    • Home
    • Contact Us
    • Disclaimer
    • Privacy Policy
    © 2023 DeepCrazyWorld. Designed by DeepCrazyWorld.

    Type above and press Enter to search. Press Esc to cancel.