Practice Flutter layout concepts by creating a credit card widget — Tutorial
Today I’m sharing a tutorial where we are going to create a credit card using Flutter basic widgets.
You’ll build the layout for the following app :
Through the tutorial, we are going to explore Flutter’s layout approach and to give you a clear comprehension of how to combine and nest Flutter widgets to achieve the desired layout.
Step 0: Provide the needed assets ( images & fonts )
For this tutorial, we need to use some custom fonts and images, let’s import them into the Flutter project.
Make sure that you have a stable version of Flutter installed on your machine then do the following :
- Download the assets folder.
- Extract and place the asset folder at the top of the project.
- Update the pubspec.yaml file to include an assets and fonts tag.
This makes the images and the custom fonts available to your app.
Step 1: Create the app base code
Now let’s update the main.dart file :
/*1*/ Here we are setting Lato font as the project default fontFamily.
/*2*/ Now we put the CreditCardsPage as the body of the Scaffold which is a stateless widget that we are going to create in the next steps.
** SafeArea is used to insets its child by sufficient padding to avoid intrusions by the operating system.
Step 2: Diagram the layout of the CreditCardsPage widget
The first step is to break the layout down to its basic parts :
To reduce the visual confusion of the nested layout code and make the widgets configurable, we will place them in functions.
The _buildTitleSection will be responsible for building the title section, the _buildCreditCard for the credit card widget, and _buildAddCardButton for the button section.
Now, we should create a new file named credit_cards_page.dart in the lib folder to contain our CreditCardsPage widget and here is it’s current code for now :
/*1*/ Wrapping the Column with a Container enables you to add padding.
/*2*/ This Column will contain later the credit card widget and the button section that we are going to create in the next steps
Step 3: Implement the _buildTitleSection
Now we are going to implement the function that builds the title section Column in the CreditCardsPage class :
/*1*/ Setting the crossAxisAlignment property to CrossAxisAlignment.start positions the children at the start of the Column horizontally.
/*2*/ Wrapping the text widget inside a Padding enables you to adjust the spacing between the title and the subtitle Text widgets.
Next, we should add the title section to the CreditCardsPage build method like this:
Now if we run the app, we should see this result :
Step 4: Implement the _buildCreditCard
Now we are going to implement the _buildCreditCard function, it takes as a parameter the credit card background color, the card number, the cardholder, and the expiration date :
/*1*/ Here we are putting a RoundedRectangleBorder as the shape of the Card widget to get the rounded corner style.
/*2*/ Setting the crossAxisAlignment property to CrossAxisAlignment.start positions the children at the start of the Column horizontally.
/*3*/ Adding spaceBetween as the MainAxisAlignment of a Column to place the free space evenly between the children.
Next, we should call the _buildCreditCard in the CreditCardsPage build method :
If we run the app now, we should get this result with the empty body of the credit card :
Step 4.1: Implement the _buildLogosBlock
Now, we are going to implement the top Row that holds the logos
/*1*/ Adding spaceBetween as the MainAxisAlignment of a Row to place the free space evenly between the children and put the two children at the extremity of the Row.
Now, we need to call the _buildLogosBlock inside the _buildCreditCard function like this :
And now, if we run the app we should see the logos in the top of the credit card widget :
Step 4.2: Add the card number
Now, we are going to add the credit card number text inside the _buildCreditCard function like this :
and if we run the app now we should see the credit card number displayed like this :
Step 4.3: Implement the _buildDetailsBlock
Now we are going to implement the _buildDetailsBlock Column that will be used to display the cardholder and the expiration information :
Now, we should call the _buildDetailsBlock inside the _buildCreditCard function like this :
If we run the app now, we should see the completed credit card widget :
👏 Congrats, we get as a result now our elegant credit card widget! let’s continue to the next step.
Step 4.3: Implement the _buildAddCardButton
Here is our final block to implement, it holds the FloatingActionButton, as a parameter, it takes the color and the icon displayed inside the button :
Now, we should call the _buildAddCardButton inside the CreditCardsPage build function as the last child of the Column like this :
The result on your device :
Step 5: Final touch
In this final step, we are going to add the second credit card with a different background color and wrap all the elements in the CreditCardsPage build function inside a SingleChildScrollView to make the app body scrollable when the app is run on a small device.
Now when you run the app, you should see the same app layout as the one displayed at the beginning of the tutorial 😄.
💻 The complete project source code is available on Github. I hope it clears out the basics of the Flutter framework and how to combine widgets to create an awesome layout.
For more tutorials and resources, feel free to follow me on Twitter 🐦.
