Business card in Flutter
In this post I'm going to show you how to make a business 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!
For our circle image we are going to use CircleAvatar widget:
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!