Coding Monkey
Posted on December 27, 2020
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
Now let's get started with our code.
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
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.
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.
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.
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),
),
],
),
),
),
);
As you can see I have used different custom fonts for the Name and profession which are Pacifico and 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.
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.
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:
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:
Late time edit: Here's the widget tree structure of the app we have created now
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 👋
Posted on December 27, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
