Show your support by subscribing to my blog. Don’t worry it’s free. 😊

After setting up our application now we have to actually make the application.

Let us take a look at what we are making…

Our application consists of 4 cards inhering different shape, different header and displays different items inside.

There are different approaches to create such UI. The old me would do something like start making four new widgets for cards setting them to a particular width and height afterwards putting rows and columns to make each card.

Yes this gets the job done. But there is a difference between working hard and working smart.

A good developer goal is to make his / her code as reusable as possible even outside the scope of the application currently being developed.

Now take a closer look at the application. although each card seems different due to their shape and the items they collect but ultimately they are the same.

Observe closely:

The box decoration of each card is same. Meaning the color, shadow, border, padding etc.

Each card consist of a column widget containing a header, a line separator and list of items.

A container can adjust it’s width and height with regards to it’s children.

Concluding that we can make one custom card widget that can be modified into all the cards that are needed in the application.

Awesome now let’s make that widget.

Starting off where we left previously in step one. We will now create a new file container a stateless widget CustomCard in the lib directory.

Let me just list stuff out to so we can better understand what we want to achieve.

// file customCard.dart class CustomCard extends StatelessWidget { @override Widget build(BuildContext context) { return Container( // Contain some kind of box decoration to resemble our design // Contains a column containing: // Header // Line separator // List of items ); } }

Now I would like you to take a pause and try to implement this by yourself. Don’t worry there are no right answers here as we all are learning (yes I am learning as well). I just want you to think…

Really man go think. I am watching you 0_0

Let us start of by decorating the container. We will be using Box Decoration. Giving it a curve light grayish border with shadow (to get that elevation effect) along with the color. We will also be using the BorderRadius widget to have rounded corners. Which will look something like this:

BoxDecoration( border: Border.all(color: Color(0x33E0DFDD)), color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(5.0)), boxShadow: [ BoxShadow( color: Color(0x33000000), offset: Offset(0.0, 3.0), blurRadius: 6.0, ), ], );

One thing you can observe is that this is a very common setting and can be used later on in any other project on the subject of re-usability what we can do us make a class extending BoxDecoration so that if needed later on in any other application we can just Ctrl + c and Ctrl + v. 🙂

Looking good..

Now we’ll add the Column widget to the container. But before that we’ll set up a padding around it so everything doesn’t stick to the border.

Of course our column will have three children: a Header, a Separator and a List of items. But how exactly will we know which header and items to put?

And the million rupees answer is… WE DON’T.

What we’ll do is use a constructor taking the header as well as a widget containing the list items. So every time we initiate our custom card we tell it exactly what header to put and what items to display. BRILLIANT!

Setting up a constructor is super easy…

class CustomCard extends StatelessWidget { // Constructor CustomCard({Key key, this.header, this.child}) : super(key: key); // The variables which will store the values provided to constructor final String header; final Widget child; @override Widget build(BuildContext context) { // blah blah blah code ); } }

Now the last problem is the line seperator. How do we do that?

What I have done is just make a container of height 1.0 and gave it a horizontal padding (using EdgeInset.symmetric) of 16.0. As the width of the container is not mentioned it adjusts itself automatically depending on the size of the card.

Combining everything we have made an easy to use custom card widget.

CustomCard(header: {card header}, child: {list of items})

There you have it a card that is not only reusable inside the application but also can be used in future projects. 😊

For today’s code and research challenge I want you to layout the cards as shown in the design. It’s simple use of rows and columns. You can refer to the docs for layout in flutter.

Do let me know how it went and also what else can such card be used for?

Coming tutorial are going to be little tricky and full of tips so make sure you subscribe to know about it as soon as it’s published. Thank you.

Like for support and subscribe for more ❤