Business card in Flutter
Hello everyone!
In this post I'm going to show you how to make a business card.
This exercise is very useful for practice basic Widgets for example: Column, Icon, Text, Images, Divider and other more complex like CircleAvatar, SizedBox, ListTile and Card.
At the end, we will see a business card like the following image:
Well ... let's work!
We must to prepare some resources:
We need create an images folder where we will put our image for our business card. Also we need to add image to assets in pubspec.yaml:
We need create a fonts folder where we will put ours fonts for our business card. Don't forget, we also need to add two fonts to assets in pubspec.yaml. We will download fonts from Google Fonts:
pubspec.yaml file must be looks like:
Once resources prepared, let's rock coding!
In our StatelessWidget we are going to put a Scaffold and Column as child. If you are developing on iPhone, you should wrap Column in SafeArea widget to fit elements on iPhone screen.
For our circle image we are going to use CircleAvatar widget:
In this case, I'm using AssetImage provider for show image from images folder which we declared at the beginning. For example, you can use NetworkImage provider to fetch image from internet.
The next widget is a simple Text:
The fontFamily property have to match with font named on pubspec.yaml.
In the same way, we are going to add another Text for our role:
NOTE: fontFamily property have to match with font named on pubspec.yaml.
Card is next widget which has a ListTile as child. This child is very useful when you need create rows in a ListView, for example. This ListTile is going to have an Icon on leading property and Text on title property.
NOTE: The fontFamily property have to match with font named on pubspec.yaml. Don't forget this note =).
On the same hand, we are going to create another Card for e-mail contact information.
Of course you can refactor this code and extract Card widget in a method in order to reuse widget, it's a good practice!.
Full gist is available on Github.
All credits is for Angela Yu which her course on Udemy is incredible useful!
If you want, you can read my previous Flutter articles!.
That's all folks!
Enjoy!