My Profile Card Design — For Flutter Beginners !!
Hello Friends, Congratulations on joining the flutter learning journey with me. Hope you have already installed an android studio and ran your first “Hello world” application. If not please refer Getting started with Flutter !!
Let’s see, how can we create My Profile Card Application in Flutter.
Step 1: Create a flutter project <Projectname>
Step 2: Create folder asset under your project by right click on
project name->New->Directory
It will ask for a directory name, give directory name and click OK
Asset directory will be created under the project
Step 3: Similarly, create subdirectories /fonts and /images under the asset directory.
This time, Right click on /asset directory->New->Directory.
Step 4: asset/images: Copy-paste images directly in the images folder. You can also drag images to the asset/images directory from your device.
Step 5: asset/fonts: Goto the site https://fonts.google.com/ to download fonts:
a) Select the font you want for the Text widget in your flutter app, Click on font
b) Click on Download Family in the top-right corner
c) You got one zip file for your downloaded font in your Downloads on your device.
d) Open this zip file,
One is a text file which gives you information about your downloaded font
The other one is the True Type Font file(.ttf), we are going to use this file in our flutter application
e) So just drag and drop this file to our asset/fonts folder in the flutter application
It will give prompt to add your file in the asset/font folder, click OK to add file in the correct location
Step 6: Add the asset folder into pubspec.yaml file under asset:
asset: - asset/images/ - asset/fonts/
Also adds downloaded fonts in pubspec.yaml file under fonts:
fonts:
- family: Lobster
fonts:
- asset: asset/fonts/Sacramento-Regular.ttfPlease mind the white spaces giving in pubspec.yaml file
Click on Package get, you will get the message:
Process finished with exit code 0
After adding lines in pubspec.yaml file you must be run the Package get command to get exit code 0.
Let’s start our coding part now.
Step 7:
import 'package:flutter/material.dart';The above line allows you to import a flutter package named as material.dart which helps you to create an interface for your application according to the Material design guidelines specified by Android. It allows you to add widgets in your application.
Step 8:
void main() {
runApp(MyApp());
}main() function is our entry point for the program to execute.
runApp() is a function that takes the object of MyApp class. runApp() is used to attach widgets to the screen.
Step 9:
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}Here MyApp class extends StatelessWidget which does not maintain any state.
(you can know about the stateless and stateful widget in Flutter: Stateful Widget Vs Stateless Widget) and override the build method.
Here build() method uses to build the UI part for our application.
build() method returns MaterialApp Widget, this is a root widget for our flutter application.
It takes 3 parameters:
title: title for our application
theme: set theme for our application
home: this is the inner UI inside our application, which is set to MyHomePage().
Step 10:
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.yellow,
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
radius: 50,
backgroundImage: AssetImage('asset/images/avtar.png'),
),
SizedBox(
height: 10,
),
Text(
"ABC",
style: TextStyle(
fontFamily: 'Sacramento',
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 2,
),
Text(
"Flutter Developer",
style: TextStyle(fontSize: 15, fontFamily: 'EBGaramond'),
),
SizedBox(
height: 10,
width: 150,
child: Divider(
thickness: 1,
color: Colors.black,
),
),
Card(
margin: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
color: Colors.grey,
child: ListTile(
leading: Icon(Icons.phone),
title: Text('+44 4745121545451'),
),
),
Card(
margin: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
color: Colors.grey,
child: ListTile(
leading: Icon(Icons.mail),
title: Text('abc@gmail.com'),
),
)
],
),
));
}
}MyHomePage is the same as MyApp widget extending StatelessWidget, the only difference is that it returns Scaffold.
Scaffold is the top-level widget after MaterialApp, Scaffold allows us to place all other widgets in the application.
Scaffold has two important properties appBar and body
We are not using appBar in this application, which is used to design a header for the application.
body contains actual design for your application.
Step 11:
To design a mi-card, Let’s use Column Widget that contains CircleAvtar widget and Text widget.
For setting profile photo, we can change backgroungImage property for CircleAvtar widget and set the full path for our image under asset/images/ directory.
Step 12:
To change font for the Text widget to our downloaded font change the fontFamily property in style property of the Text widget.
Step 13:
ListTile widget, has properties to set the title and leading to make a nice row with some text and leading and trailing icon.
Following is the whole code for my profile card app
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.yellow,
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
radius: 50,
backgroundImage: AssetImage('asset/images/avtar.png'),
),
SizedBox(
height: 10,
),
Text(
"ABC",
style: TextStyle(
fontFamily: 'Sacramento',
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 2,
),
Text(
"Flutter Developer",
style: TextStyle(fontSize: 15, fontFamily: 'EBGaramond'),
),
SizedBox(
height: 10,
width: 150,
child: Divider(
thickness: 1,
color: Colors.black,
),
),
Card(
margin: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
color: Colors.grey,
child: ListTile(
leading: Icon(Icons.phone),
title: Text('+44 4745121545451'),
),
),
Card(
margin: EdgeInsets.symmetric(horizontal: 15, vertical: 15),
color: Colors.grey,
child: ListTile(
leading: Icon(Icons.mail),
title: Text('abc@gmail.com'),
),
)
],
),
));
}
}Please refer to GitHub for the complete code on the link below:
https://github.com/yogitakumar/mi_card
Thank you!
👋 Join FAUN today and receive similar stories each week in your inbox! ️ Get your weekly dose of the must-read tech stories, news, and tutorials.
Follow us on Twitter 🐦 and Facebook 👥 and Instagram 📷 and join our Facebook and Linkedin Groups 💬
