Let's Create Personal Info App Using Flutter
Tags: flutter, beginners
Published: 2020-12-27 10:52:28

Heya All,

As I was following the Angela Yu course on Udemy to learn the Flutter I have created the Personal Info app which displays your image, name, email and phone number (Nothing fancy 😅). So I am just sharing my learnings in this blog.

## Introduction
So In this blog, we are going to create an App which displays our hardcoded information such as Name, Image, Phone No and finally our email. Main Learning out of this blog is Use of widgets such as `card`, `Row`, `Column`, `SizedBox` and `Text Style` also the usage of `assets` in Flutter. which looks like this
<img width="250" height="250" src="https://dev-to-uploads.s3.amazonaws.com/i/lgsg3t74q446mko7uspw.png">

Now let's get started with our code.
```dart
MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
        ),
      ),
    );
```
This would be over base setup with background colour as teal and with Use of `SafeArea` widget
> Safe Area widget is used to prevent the content from going out of the screen. For example, this will indent the child by enough to avoid the status bar at the top of the screen.

And by `backgroundColor` we will be setting the background colour of the whole app to our required colour.

Since our background and Base widgets are set now let's add our profile image to the app.
As we now there most know `ImageAsset` to add an image to the app. But as per our requirement, we need avatar sort of image for profile image. so let's use a new widget called `CircleAvatar` which displays a circular profile image.

>A circle that represents a user.
Typically used with a user's profile image, or, in the absence of such an image, the user's initials. A given user's initials should always be paired with the same background colour, for consistency.

So now our code will be like
```Dart
MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
              CircleAvatar(
                radius: 50.0,
                backgroundImage: AssetImage('./images/Life.jpeg'),
              ),
          ),
        ),
      ),
    );
```

Oh, right I forget to explain about the adding assets to flutter app. So to add any new custom images to our app we need to make a folder and store the images inside that folder(Since we are adding images so let's name the folder as `images` 😉). Next, we have to tell the flutter that the images are available in the images folder that can be done by adding the assets in `pubsec.yml` file.

```YAML
name: my_card
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
    
  cupertino_icons: ^1.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/
```

As you can see In the last 2 lines we are telling the flutter to take all the images inside the `images` folder. (Also be in mind that don't disrupt the indentation of 2 spaces otherwise you face an error when you click on `pub get`.

So as of now, our app looks like this.
<img width="250" height="250" src="https://dev-to-uploads.s3.amazonaws.com/i/l2ngre73shptzy6ahmda.png">

So now let's add our Name and profession below our profile image by using the Text widget and also style it to look good.
While doing so we will require to use the `Column` widget to compile multiple widgets one above another as we want to display Profile image, Name and Profession in a column.

>A widget that displays its children in a vertical array.
To cause a child to expand to fill the available vertical space, wrap the child in an Expanded widget.
The Column widget does not scroll (and in general it is considered an error to have more children in a Column than will fit in the available room). If you have a line of widgets and want them to be able to scroll if there is insufficient room, consider using a ListView.

```Dart
MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 50.0,
                backgroundImage: AssetImage('./images/Life.jpeg'),
              ),
              Text(
                'Game Monk',
                style: TextStyle(
                    fontFamily: 'Pacifico',
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
              ),
              Text(
                'Flutter Student',
                style: TextStyle(
                    fontSize: 20.0,
                    fontFamily: 'Source Sans Pro',
                    color: Colors.teal.shade100,
                    fontWeight: FontWeight.bold,
                    letterSpacing: 2.5),
              ),
            ],
          ),
        ),
      ),
    );

```
<img width="250" height="250" src="https://dev-to-uploads.s3.amazonaws.com/i/4vwrin9vs1ozypm5uwd8.png">

As you can see I have used different custom fonts for the Name and profession which are [`Pacifico`](https://fonts.google.com/specimen/Pacifico) and [`Source Sans Pro`](https://fonts.google.com/specimen/Source+Sans+Pro) which are not available by default in Flutter. So let's add those fonts to our project. First, let's create a folder to store the `tff` file of the font we are going to use then let's add these lines to the end of the `pubsec.yml` file. 
Along with it, you can see a new argument named `mainAxisAlignment` which helps us in aligning the content of the Column widget to the centre of the Screen.

```yaml
fonts:
    - family: Pacifico
      fonts:
        - asset: fonts/Pacifico-Regular.ttf

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


Now let's add the Contact info such as Email and Phone number. Here we are going to use 3 new widgets `Icon`, `Card` and `ListTile`.
Let's get into it At first since we are going to use Card format for displaying the contact info then we will be needing text styles such as shadow effect to the cards, padding margin between cards also rounded corners which makes it more appealing. Since all these styles are offered by the widget `Card` we'll use that to simplify our work.

>A material design card: a panel with slightly rounded corners and an elevation shadow.
A card is a sheet of Material used to represent some related information, for example: an album, a geographical location, a meal, contact details, etc.

Next is `ListStyle` widgets which is used when we are displaying leading or trailing icon with some text, subtext etc.
>A single fixed-height row that typically contains some text as well as a leading or trailing icon.

Lastly `Icon` widget which provides the inbuilt icons to use for our app which are handier than using the images as icon.

>A graphical icon widget drawn with a glyph from a font described in an IconData such as material's predefined IconDatas in Icons.

```Dart
MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 50.0,
                backgroundImage: AssetImage('./images/Life.jpeg'),
              ),
              Text(
                'Game Monk',
                style: TextStyle(
                    fontFamily: 'Pacifico',
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
              ),
              Text(
                'Flutter Student',
                style: TextStyle(
                    fontSize: 20.0,
                    fontFamily: 'Source Sans Pro',
                    color: Colors.teal.shade100,
                    fontWeight: FontWeight.bold,
                    letterSpacing: 2.5),
              ),
              Card(
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                child: ListTile(
                  leading: Icon(
                    Icons.phone,
                    color: Colors.teal,
                  ),
                  title: Text(
                    '+91 1234 567890',
                    style: TextStyle(
                        fontSize: 20.0,
                        fontFamily: 'Source Sans Pro',
                        color: Colors.teal.shade900),
                  ),
                ),
              ),
              Card(
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                child: ListTile(
                  leading: Icon(
                    Icons.email,
                    color: Colors.teal,
                  ),
                  title: Text(
                    'keertirajmalik@gmail.com',
                    style: TextStyle(
                        fontFamily: 'Source Sans Pro',
                        fontSize: 20.0,
                        color: Colors.teal.shade900),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
```
So let's Just goes through the new code that is added now So we'll start with `Card` widget then inside that we'll add `ListTile` widget (To add widget inside widget we'll need `child` parameter which I didn't know till now 😔).
So as offered by the `ListTile` then `leading` parameter is used to tell the icon is leading then the text will be there.
So firstly we'll be adding phone number so using the `Icon` widget we'll display Phone icon then the colour of the icon displayed.
In title argument we'll add `Text` widget for displaying the phone number then using the `TextStyle` we'll provide the font-family which we have added using the asset.

So by now, we have mostly what we wanted to display at last we'll just add a horizontal line make some separation between Contact info and Name. Using the `SizedBox` widget we can add one light bar to separate contact info from others which add more aesthetic to the App.
So the final App looks like this:
```Dart
MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 50.0,
                backgroundImage: AssetImage('./images/Life.jpeg'),
              ),
              Text(
                'Game Monk',
                style: TextStyle(
                    fontFamily: 'Pacifico',
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white),
              ),
              Text(
                'Flutter Student',
                style: TextStyle(
                    fontSize: 20.0,
                    fontFamily: 'Source Sans Pro',
                    color: Colors.teal.shade100,
                    fontWeight: FontWeight.bold,
                    letterSpacing: 2.5),
              ),
              SizedBox(
                width: 150.0,
                height: 20.0,
                child: Divider(
                  color: Colors.teal.shade100,
                ),
              ),
              Card(
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                child: ListTile(
                  leading: Icon(
                    Icons.phone,
                    color: Colors.teal,
                  ),
                  title: Text(
                    '+91 1234 567890',
                    style: TextStyle(
                        fontSize: 20.0,
                        fontFamily: 'Source Sans Pro',
                        color: Colors.teal.shade900),
                  ),
                ),
              ),
              Card(
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                child: ListTile(
                  leading: Icon(
                    Icons.email,
                    color: Colors.teal,
                  ),
                  title: Text(
                    'keertirajmalik@gmail.com',
                    style: TextStyle(
                        fontFamily: 'Source Sans Pro',
                        fontSize: 20.0,
                        color: Colors.teal.shade900),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
```
And our final app looks like this:
<img width="250" height="250" src="https://dev-to-uploads.s3.amazonaws.com/i/rmvn2idnrdfy5b1d7kct.png">

Late time edit: Here's the widget tree structure of the app we have created now
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r4yi9xn2yt3kwwnsj3kr.png)
## Thank You
If you followed through the whole blog with your custom changes you will be having your own Personal info app And you share the app instead of your Visiting card (Don't think anyone will be doing that 😂).

So once again if you find any mistakes in the blog please let me know so I can correct my mistakes if you like the blog leave like and comment 😎.

Au revoir 👋