Flutter Profile Page UI Design Using Flutter Card & ListTile Widget

Welcome To Proto Coders Point, In this tutorial, we will learn how to create a profile page UI Design app using Dart and Flutter. A quick sample app on how to create a simple profile screen page in flutter.

Similar profile page UI design 2 

Flutter Profile Page UI Design Using Flutter Card & ListTile Widget

The Final UI of Flutter profile page will look something like below screenshot.

Video Tutorial play here

Open android Studio and create a new flutter project.

File > New  > New Flutter Project

Give a name you your flutter project and set a path to store you flutter project.

Now you will a see a default counter code generated, that simply counts the number of times the button is pressed and display counting on the screeen.

You can just remove default code of flutter and shown in below Image.

So let’s begin with the actual code for Flutter profile page example UI Design.

before we start implement, we need the resources such as images and fonts to be set/copy in our project directory, For that we need to create 2 directory.

Directory

1. images : to store all our project image resources.
2. fonts : to store all our fonts style ttf extension files.

Here is how to create directory in android-studio ( flutter )

Right Click on project > New > Directory

like wise create a 2nd directory name “fonts”

download an icon and fonts from google

Copy both the image and fonts file in those directorys.

NOTE: you also need to initialize the resources in  pubspec.yaml file

assets:
    - images/user.png
  fonts:
    - family: SourceSansPRO-Regular
      fonts:
        - asset: fonts/SourceSansPRO-Regular.ttf

Please check the indentation ( Many programmer face problems while setting  resources package )

Source Code of Flutter Profile UI Design

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            "Profile Page UI Design using Flutter ",
            style: TextStyle(fontSize: 18.0),
          ),
        ),
        backgroundColor: Colors.blue[300],
        body: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                CircleAvatar(
                  radius: 80,
                  backgroundImage: AssetImage('images/protocoder.png'),
                ),
                Text(
                  'Proto Coders Point',
                  style: TextStyle(
                    fontFamily: 'SourceSansPro',
                    fontSize: 25,
                  ),
                ),
                Text(
                  'Welcome',
                  style: TextStyle(
                    fontSize: 20,
                    fontFamily: 'SourceSansPro',
                    color: Colors.red[400],
                    letterSpacing: 2.5,
                  ),
                ),
                SizedBox(
                  height: 20.0,
                  width: 200,
                  child: Divider(
                    color: Colors.teal[100],
                  ),
                ),
                Text("Keep visiting protocoderspoint.com for more contents"),
                Card(
                    color: Colors.white,
                    margin:
                        EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                    child: ListTile(
                      leading: Icon(
                        Icons.phone,
                        color: Colors.teal[900],
                      ),
                      title: Text(
                        '+91 85465XXX8XX',
                        style:
                            TextStyle(fontFamily: 'BalooBhai', fontSize: 20.0),
                      ),
                    )),
                Card(
                  color: Colors.white,
                  margin:
                      EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                  child: ListTile(
                    leading: Icon(
                      Icons.cake,
                      color: Colors.teal[900],
                    ),
                    title: Text(
                      '08-05-1995',
                      style: TextStyle(fontSize: 20.0, fontFamily: 'Neucha'),
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Explaination of flutter widget used in the above code.

Flutter Card Class

A material design card. A card has slightly rounded corners and a 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.

In the above lines of code Flutter Card i have used child that contains ListTile widget class  with leading icons and title.

Read more above flutter card on official site.

ListTile class

A single fixed-height row that typically contains some text as well as a leading or trailing icon.

It is the responsibility of the caller to ensure that title does not wrap, and to ensure that subtitle doesn’t wrap.

In the above lines of code Flutter ListTile  class that has leading with icons and title with text.

SizedBox Widget Class

A box with a specified size.

If given a child, this widget forces its child to have a specific width and/or height .

In the above code you can observe their is a tiny empty space in between call icon and phone number text

Divider Widget Class

thin horizontal line, with padding on either side.

In the material design language, this represents a divider. Dividers can be used in lists, Drawers, and elsewhere to separate content.

If you are new in flutter development check this post to learn about how to install fluttter in android studio

How to install flutter in android studio with First Flutter App Hello World