All You Need To Know About Flutter Card Widget – Explained With Example

flutter card widget customuzation

In this article, we will discuss flutter card in detail, how to customize flutter card widget, what’s the role of flutter card in flutter app, what properties it has and how we can customize card UI flutter depending on our design. But before that, if you want a complete setup on how to install flutter then click here. So without wasting any more time, let’s just get right into implementing our beautiful flutter card widget.

Introduction: Flutter Card

A flutter card is basically a sheet which can be used to show some related information, like for example, an album etc. Let’s understand how to implement the flutter card widget in our flutter app.

Flutter Card Widget Implementation

Card()

By calling the card class, we have implemented our flutter card widget but we won’t see it on our flutter app screen because it has no height or width. For that, we have to wrap it inside a container or a sized box widget. Let’s see how:

SizedBox(

          height: 100,

          width: 100,

          child: Card(),

        )
We have used sized box, now let’s see how our flutter card widget looks:
flutter card widget
We can see our card now, by default, it has a white background and a shadow.

Flutter Card Color

color: Colors.orange.shade200
Using the color constructor, we can customize the color of our card widget. As in our example, we have set it to orange color. Let’s see how it looks:
flutter card widget color

Flutter Card Elevation

elevation: 10
Flutter card widget elevation constructor is used to spread the effect of the flutter card shadow. Let’s see how it looks after we set it to 10:
flutter card widget color

Flutter Card Margin

margin: EdgeInsets.all(20)
Flutter card margin constructor is used to give margin to the flutter card. In our case, we have set the margin from all dimensions to 20.

Flutter Card Shadow Color

 shadowColor: Colors.green
Flutter card widget shadow color constructor is used to change the color of the shadow that is emitting from the flutter card widget. We have changed it to green color, let’s see how it looks now:
flutter card widget shadow color

Flutter Card Shape

  shape: RoundedRectangleBorder(

                borderRadius: BorderRadius.circular(100)
                                )

Using the flutter card shape constructor, we can customize the flutter card shape. We have used a round rectangle border class and by using its border radius constructor, we have see all the borders to have a circular shape of value 100. Let’s see our card now:

flutter card widget shape

Flutter Card Child

Flutter card child constructor is used to give a child widget to the flutter card. The child can be a row widget, column widget, image widget etc. Let’s now see the whole source code for the mentioned beautiful card UI design.

Custom Flutter Card Widget Source Code

flutter beautiful card widget

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Beautiful Card Widget',

      debugShowCheckedModeBanner: false,

      theme: ThemeData(

          primarySwatch: Colors.orange,

          accentColor: Colors.orange,

          primaryColor: Colors.orange,

          focusColor: Colors.orange,

          cursorColor: Colors.orange),

      home: Homepage(),

    );

  }

}

class Homepage extends StatelessWidget {

  const Homepage({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return SafeArea(

        child: Scaffold(

      body: Center(

        child: SizedBox(

          height: 260,

          width: 260,

          child: Card(

            color: Colors.orange.shade200,

            elevation: 10,

            margin: EdgeInsets.all(10),

            shadowColor: Colors.green,

            shape: RoundedRectangleBorder(

                borderRadius: BorderRadius.circular(100)),

            child: Card(

              color: Colors.orange.shade200,

              elevation: 10,

              margin: EdgeInsets.all(10),

              shadowColor: Colors.green,

              shape: RoundedRectangleBorder(

                  borderRadius: BorderRadius.circular(100)),

              child: Card(

                  color: Colors.orange.shade200,

                  elevation: 8,

                  margin: EdgeInsets.all(10),

                  shadowColor: Colors.green,

                  shape: RoundedRectangleBorder(

                      borderRadius: BorderRadius.circular(100)),

                  child: Padding(

                    padding: const EdgeInsets.all(15),

                    child: Column(

                      children: [

                        Container(

                          height: 60,

                          width: 60,

                          decoration: BoxDecoration(

                              borderRadius: BorderRadius.only(

                                  topLeft: Radius.circular(20),

                                  bottomRight: Radius.circular(20)),

                              image: DecorationImage(

                                  fit: BoxFit.cover,

                                  image: AssetImage('assets/cartoon.jpg'))),

                        ),

                        SizedBox(

                          height: 15,

                        ),

                        Text(

                          'Zeeshan',

                          style: TextStyle(

                              fontSize: 15,

                              fontWeight: FontWeight.bold,

                              color: Colors.white,

                              shadows: [

                                Shadow(

                                    color: Colors.black45,

                                    offset: Offset(1, 1),

                                    blurRadius: 5)

                              ]),

                        ),

                        SizedBox(

                          height: 10,

                        ),

                        Text(

                          'Flutter Developer',

                          style: TextStyle(

                              fontSize: 15,

                              fontWeight: FontWeight.bold,

                              color: Colors.white,

                              shadows: [

                                Shadow(

                                    color: Colors.black45,

                                    offset: Offset(1, 1),

                                    blurRadius: 5)

                              ]),

                        ),

                        SizedBox(

                          height: 10,

                        ),

                        Text(

                          'This is a Card Widget',

                          style: TextStyle(

                              fontSize: 12,

                              fontWeight: FontWeight.bold,

                              color: Colors.white,

                              shadows: [

                                Shadow(

                                    color: Colors.black45,

                                    offset: Offset(1, 1),

                                    blurRadius: 5)

                              ]),

                        ),

                      ],

                    ),

                  )),

            ),

          ),

        ),

      ),

    ));

  }

}

Conclusion

That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would love to see how you have used it in your flutter app. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into other amazing Flutter widgets. Thank you.

Leave a Comment

Your email address will not be published. Required fields are marked *