Business card in Flutter

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

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:

flutter:
 uses-material-design: true
 assets:
 — images/mariano.png

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:

• Pacifico-Regular.ttf
• SourceSansPro-Regular.ttf

fonts:
 — family: Pacifico
 fonts:
 — asset: fonts/Pacifico-Regular.ttf
 — family: Source Sans Pro
 fonts:
 — asset: fonts/SourceSansPro-Regular.ttf

pubspec.yaml file must be looks like:

flutter:
 uses-material-design: true
 assets:
 — images/mariano.png
 fonts:
 — family: Pacifico
 fonts:
 — asset: fonts/Pacifico-Regular.ttf
 — family: Source Sans Pro
 fonts:
 — asset: fonts/SourceSansPro-Regular.ttf

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.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.teal,
      body: SafeArea(
        child: Column(
          // To show widgets in middle of screen.
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
           // Following widgets here.
          ]
        ),
      ),
    );
  }

For our circle image we are going to use CircleAvatar widget:

CircleAvatar(
 radius: 50.0,
 backgroundImage: AssetImage(‘images/mariano.png’),
)

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:

Text(
 'Mariano Castellano',
     style: TextStyle(
     fontFamily: 'Pacifico',
     fontSize: 30.0,
     color: Colors.white,
    ),
)

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:

Text(
 'FLUTTER DEVELOPER',
     style: TextStyle(
        fontFamily: 'Source Sans Pro',
        fontSize: 20.0,
        letterSpacing: 2.5,
        color: Colors.teal.shade100,
        fontWeight: FontWeight.bold,
    ),
)

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.

Card(
  color: Colors.white,
  margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
  child: ListTile(
    leading: Icon(
      Icons.phone,
      color: Colors.teal,
    ),
    title: Text(
      '+9 5411 2345 6789',
      style: TextStyle(
        fontSize: 20.0,
        fontFamily: 'Source Sans Pro',
        color: Colors.teal.shade900,
      ),
    ),
  ),
)

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.

Card(
  color: Colors.white,
  margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
  child: ListTile(
    leading: Icon(
      Icons.email,
      color: Colors.teal,
    ),
    title: Text(
      'mariano@email.com',
      style: TextStyle(
        fontSize: 20.0,
        fontFamily: 'Source Sans Pro',
        color: Colors.teal.shade900,
      ),
    ),
  ),
)

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!