How to create Custom Flutter Card UI - Modern Design

In this post I am going to talk about “How to create Custom Flutter Card UI” according to modern design. This is also responsive and you can customize whatever you like. I am writing this post because a lot of my article readers asked me about how to design a custom Card UI in flutter. You can see the image below. That is the design I am going to design with Flutter. So let’s get into the article.

As you can see, there are 3 component/widget in the design.

Main dart file – In my project filename is Home.dart
Component/Widget for Categories Card – In my project, there is a CustomCardCategory file
Component/Widget for below two Cards – In my project, there is a CustomCardOther file

Home.dart file is the file which includes all components in my design. So Why we are wasting our time. Let’s get into the code.

01. Home.dart file Implementation – Custom Flutter Card UI

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

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

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Container(
               child: ListView(
                  physics: ClampingScrollPhysics(),
                  children: <Widget>[

                     Container(
                        child: Column(
 
                          children: <Widget>[
                             Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  Container(
                                     height: 175.0,
                                     width: MediaQuery.of(context).size.width,
                                     child: Padding(
                                        padding: const EdgeInsets.only(left: 16, right: 16),
                                        child: InkWell( 
                                        onTap: () {
                                           Navigator.push(context, 
                                           MaterialPageRoute(builder: (context) => CategoriesScreen())
);
                                        },//onTap
                                        child: customCardCategory('Categories', 'Travel Places by Categories', Icons.ac_unit, 'carousel_01'), ),                         
                                   )),
                                ],
                             ),
                             Row(
                                 mainAxisAlignment: MainAxisAlignment.center,
                                 children: <Widget>[
                                     Column(
                                         children: <Widget>[
                                           Container(
                                              height: 125.0,
                                              width: MediaQuery.of(context).size.width*.5,
                                              child: Padding(
                                                  padding: const EdgeInsets.only(left: 16),
                                                  child: customCardOther('Blog', 'dummy 2', Icons.access_alarm, 'carousel_02'),
                                          )),
                                        ]
                                     ),
                                     Column(
                                         children: <Widget>[
                                            Container(
                                                height: 125.0,
                                                width: MediaQuery.of(context).size.width*.5,
                                                child: Padding(
                                                    padding: const EdgeInsets.only(right: 16),
                                                    child: customCardOther('About Us', 'dummy 3', Icons.access_time, 'carousel_03'),
                                          )),
                                         ]
                                    )
                                ]
                            )//row
                    ],
              ),
            ),
                  ]
               );//ListView
            ); //Container
        )
    )

  }

}

02. CustomCardCategory.dart file implementation – Custom Flutter Card UI

import 'package:flutter/material.dart';
import 'package:take_me_there/constants/ColorConstants.dart';

Widget customCardCategory(String title, String spots, icon, String img) {
  return Card(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
    child: Container(
      decoration: BoxDecoration(
        color: Colors.black,

      borderRadius: BorderRadius.circular(10.0),
      image: DecorationImage(
        image: AssetImage('assets/images/$img.jpg'),
        colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.3), BlendMode.dstATop),
        fit: BoxFit.cover,

      )),
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <widget>[
            Icon(icon, size: 30, color: mWhiteColor,),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <widget>[
              Text(title, style: TextStyle(color: mWhiteColor, fontSize: 20, fontWeight: FontWeight.bold),),
              SizedBox(height: 5,),
              Text(spots, style: TextStyle( color: Colors.white.withOpacity(0.6)))
            ],),
          ],
        ),
      ),
    ),
  );
}

03. CustomCardOther.dart file implementation – Custom Flutter Card UI

import 'package:flutter/material.dart';
import 'package:take_me_there/constants/ColorConstants.dart';

Widget customCardOther(String title, String spots, icon, String img) {
  return Card(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
    child: Container(
      decoration: BoxDecoration(
        color: Colors.black,
   
      borderRadius: BorderRadius.circular(10.0),
      image: DecorationImage(
        image: AssetImage('assets/images/$img.jpg'),
        colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.3), BlendMode.dstATop),
        fit: BoxFit.cover,

      )),
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <widget>[
            Icon(icon, size: 30, color: mWhiteColor,),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <widget>[
              Text(title, style: TextStyle(color: mWhiteColor),),
              SizedBox(height: 5,),
              Text(spots, style: TextStyle( color: Colors.white.withOpacity(0.6)))
            ],),
          ],
        ),
      ),
    ),
  );
}

Thank you for reading. If you are interesting on my article, make sure to follow my other articles as well. Make sure to leave a comment.