#3 Card (Flutter Famous Widgets’ Guide)

Hey everyone! This is the third article of the series, Flutter Famous Widgets’ Guide. If you haven’t yet checked the previous articles, then go right here: 1st and 2nd. Let’s get started!

Card

Card, that’s what our topic is. We’ll go through the basic concepts, and then check out some harder ones.

What is it?

It is basically a material design card: a panel with slightly rounded corners and an elevation shadow.

How to Make it?

1. Create a new Flutter project in your IDE(Any would work but I’m using Android Studio).
2. Open the main.dart file. Make a new stful widget. Name it CardDemo.
3. Return a Scaffold widget.
4. Place the Container widget as the body property of the Scaffold. Set the dimensions using height and width property of the Container.
5. Place the Card widget as the child property of the Container.
6. Wrap the Container widget with Center widget so that it can be placed at the center of the screen.

Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Container(
        height: 300,
        width: 300,
        child: Card(),
      ),
    ),
  );
}

Voila! You’ve made yourself a very basic Card widget. Now, let’s try and customize it.

Changing the Color

Our Card widget has white color from scratch. Let’s change it! We can achieve this with the help of one of its property, color.

body: Center(
  child: Container(
    height: 300,
    width: 300,
    child: Card(
      color: Colors.blueAccent,
    ),
  ),
),

Adding Some Widgets

Our Card has been made but it doesn’t hold something in it. Let’s do it!

With the card’s child property, let’s add some text in it with the help of the Text widget.

body: Center(
  child: Container(
    height: 300,
    width: 300,
    child: Card(
      color: Colors.blueAccent,
      child: Center(
        child: Text(
          'Flutter is Cool',
          style: TextStyle(color: Colors.white, fontSize: 30),
        ),
      ),
    ),
  ),
),

Let’s add an image too. For that a single child property isn’t enough. We have to return the Column widget for that.

body: Center(
  child: Container(
    height: 300,
    width: 300,
    child: Card(
      color: Colors.blueAccent,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Flutter is Cool',
            style: TextStyle(color: Colors.white, fontSize: 30),
          ),
          SizedBox(height: 20),
          Container(height: 100, width: 100, child: FlutterLogo()),
        ],
      ),
    ),
  ),
),

Changing the Shape

Now, let’s try to change the shape of our premade Card. For that, we can use the shape property of the card. Let’s change it to a RoundedRectangleBorder with a border and radius.

shape: RoundedRectangleBorder(
  side: BorderSide.merge(
      BorderSide(
          width: 1.5, color: Colors.grey, style: BorderStyle.solid),
      BorderSide(
          width: 1.5,
          color: Colors.grey,
          style: BorderStyle.solid)),
  borderRadius: BorderRadius.circular(20),
),

Making it More Beautiful

Now, after learning all this, can you achieve this?

Try it yourself and then check out the code at below.

Complete Code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: FloatingActionButtonDemo());
  }
}

class FloatingActionButtonDemo extends StatefulWidget {
  const FloatingActionButtonDemo({Key key}) : super(key: key);

  @override
  _FloatingActionButtonDemoState createState() =>
      _FloatingActionButtonDemoState();
}

class _FloatingActionButtonDemoState extends State<FloatingActionButtonDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 300,
          width: 300,
          child: Card(
            shape: RoundedRectangleBorder(
              side: BorderSide.merge(
                  BorderSide(
                      width: 1.5, color: Colors.grey, style: BorderStyle.solid),
                  BorderSide(
                      width: 1.5,
                      color: Colors.grey,
                      style: BorderStyle.solid)),
              borderRadius: BorderRadius.circular(20),
            ),
            color: Colors.blueAccent,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  height: 250,
                  width: 250,
                  child: Card(
                    shape: RoundedRectangleBorder(
                      side: BorderSide.merge(
                          BorderSide(
                              width: 1.5,
                              color: Colors.grey,
                              style: BorderStyle.solid),
                          BorderSide(
                              width: 1.5,
                              color: Colors.grey,
                              style: BorderStyle.solid)),
                      borderRadius: BorderRadius.circular(20),
                    ),
                    color: Colors.white,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Center(
                          child: Text(
                            'Flutter is Cool',
                            style: TextStyle(
                                color: Colors.blueAccent, fontSize: 30),
                          ),
                        ),
                        SizedBox(height: 20),
                        Container(height: 100, width: 100, child: FlutterLogo())
                      ],
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

We are done🏁. Hope you enjoyed!

Make sure to hit the claps👏if you liked this article. If I got something wrong, mention it in the comments.

Buy me a coffee☕ to show me your support.

Reach me out at LinkedIn, GitHub and Twitter.