Prerequisites
Before you begin building a Flutter app, you need to have the following software installed on your system:
Flutter SDK
The first thing you need to install is the Flutter SDK. The Flutter SDK is a set of tools that allows you to develop, test, and deploy Flutter apps. You can download the Flutter SDK from the official website by following the instructions for your operating system:
Integrated Development Environment (IDE)
Next, you need an Integrated Development Environment (IDE) to write and test your Flutter code. There are many IDEs available for Flutter development, but the recommended IDE is Android Studio. You can download and install it from the official website:
Alternatively, you can install Visual Studio Code, another popular IDE for Flutter development. You can download and install it from the official website:
Android Emulator (Optional)
If you want to test your Flutter app on an Android device without having a physical device, you can use an Android emulator. Android Studio comes with a built-in Android Virtual Device (AVD) Manager that allows you to create and manage virtual devices. Follow the instructions in the official documentation to create and configure an Android emulator:
Xcode (macOS Only)
If you are developing a Flutter app on a macOS system and want to test it on an iOS device, you need to install Xcode. Xcode is an Integrated Development Environment (IDE) for macOS that provides tools to develop, test, and deploy iOS apps. You can download and install Xcode from the App Store.
This is How Our App Will Look Like
Before diving into the code, let's take a look at how our app will look like.
As you can see, the app is a simple business card that provides basic information such as name, phone number, and email address. The app also features a drawer menu that includes options such as Home, Profile, and Mail Me.
Exploring the Code
Let's take a closer look at the code and understand how the app is built.
First, we import package:flutter/cupertino.dart and package:flutter/material.dart packages which provide the necessary widgets to build our app.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
Then we define the main() function which is the entry point of our Flutter app. Inside the main() function, we call the runApp(MyApp()) function to create and display our app.
void main() {
runApp(const MyApp());
}
The MyApp() class is our main widget that builds the UI of our app. The build method of the MyApp() class returns a MaterialApp widget which is a top-level widget that provides basic material design visual elements such as AppBar, Drawer, and Scaffold.
class MyApp extends StatelessWidget {
const MyApp({super.key});
// ...
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: SafeArea(
child: Scaffold(
appBar: AppBar(
// ...
),
drawer: Drawer(
// ...
),
backgroundColor: const Color.fromARGB(255, 105, 41, 216),
body: Column(
// ...
),
),
),
);
}
}
AppBar
Inside the Scaffold widget, we define an AppBar widget that provides a top app bar with a title and a background color. The appBar property of the Scaffold widget takes an AppBar widget as an argument.
appBar: AppBar(
title: const Text(
'MiCard App',
style: TextStyle(fontSize: 25.0),
),
backgroundColor: const Color.fromARGB(255, 105, 41, 216),
elevation: 1,
),
Drawer
The Drawer widget is a sliding panel that appears from the left side of the screen and provides a navigation menu. Inside the Drawer, we define a ListView widget that includes menu items such as Home, Profile, and Mail Me.
drawer: Drawer(
backgroundColor: const Color.fromARGB(255, 105, 41, 216),
child: Container(
color: const Color.fromARGB(255, 105, 41, 216),
child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
decoration: const BoxDecoration(
color: Color.fromARGB(255, 105, 41, 216),
),
padding: EdgeInsets.zero,
child: UserAccountsDrawerHeader(
accountName: const Text(
"Harsh Vardhan Singh",
),
accountEmail: const Text("lionrbl6@gmail.com"),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(imgurl),
),
decoration: const BoxDecoration(
color: Colors.transparent,
),
),
),
ListTile(
onLongPress: () {},
onTap: () {},
leading: const Icon(
CupertinoIcons.home,
color: Colors.white,
),
title: const Text(
"Home",
textScaleFactor: 1.2,
style: TextStyle(color: Colors.white),
),
),
ListTile(
onTap: () {},
leading: const Icon(
CupertinoIcons.profile_circled,
color: Colors.white,
),
title: const Text(
"Profile",
textScaleFactor: 1.2,
style: TextStyle(color: Colors.white),
),
),
ListTile(
onTap: () {},
leading: const Icon(
CupertinoIcons.mail,
color: Colors.white,
),
title: const Text(
"Mail Me",
textScaleFactor: 1.2,
style: TextStyle(color: Colors.white),
),
),
],
),
),
),
Background Color
The backgroundColor property of the Scaffold widget sets the background color of our app.
backgroundColor: const Color.fromARGB(255, 105, 41, 216),
Business Card
To create the business card, we define a Column widget inside the body property of the Scaffold widget. The Column widget is a flexible widget that allows us to arrange its children vertically.
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const CircleAvatar(
radius: 60.0,
backgroundColor: Colors.amber,
backgroundImage: NetworkImage(
'https://pbs.twimg.com/profile_images/1635029193913139200/lpZDxWWH_400x400.jpg'),
),
const Text(
"Harsh Vardhan",
style: TextStyle(
fontFamily: 'Pacifico',
fontSize: 40.0,
color: Colors.white),
),
Text(
'Flutter Developer',
style: TextStyle(
fontFamily: 'Source Sans Pro',
fontSize: 20.0,
letterSpacing: 3.0,
fontWeight: FontWeight.bold,
color: Colors.teal[100],
),
),
SizedBox(
height: 20.0,
width: 150.0,
child: Divider(
color: Colors.teal[100],
),
),
Card(
// ...
),
Card(
// ...
),
],
),
Circle Avatar
We use the CircleAvatar widget to display the profile picture. The backgroundImage property of the CircleAvatar widget takes a URL pointing to the profile picture.
CircleAvatar(
radius: 60.0,
backgroundColor: Colors.amber,
backgroundImage: NetworkImage(
'https://pbs.twimg.com/profile_images/1635029193913139200/lpZDxWWH_400x400.jpg'),
),
Text Widgets
We use Text widgets to display the name and job title. We set the fontFamily, fontSize, and color properties to style the Text widgets.
const Text(
"Harsh Vardhan",
style: TextStyle(
fontFamily: 'Pacifico',
fontSize: 40.0,
color: Colors.white),
),
Copy
Text(
'Flutter Developer',
style: TextStyle(
fontFamily: 'Source Sans Pro',
fontSize: 20.0,
letterSpacing: 3.0,
fontWeight: FontWeight.bold,
color: Colors.teal[100],
),
),
Divider
We use the Divider widget to add a horizontal line between the name and job title.
SizedBox(
height: 20.0,
width: 150.0,
child: Divider(
color: Colors.teal[100],
),
),
Card Widgets
We define two Card widgets to display the phone number and email address. The Card widget provides a container with rounded corners and a shadow effect that makes it stand out.
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)),
clipBehavior: Clip.antiAlias,
margin: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 25.0),
child: ListTile(
leading: const Icon(
Icons.phone,
color: Colors.teal,
),
title: Text(
'+91 9555489012',
style: TextStyle(
color: Colors.teal.shade900,
fontFamily: 'Source Sans Pro',
fontSize: 20.0,
),
),
),
),
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0)),
margin: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 25.0),
child: ListTile(
leading: const Icon(
Icons.email,
color: Colors.teal,
),
title: Text(
'lionrbl6@gmail.com',
style: TextStyle(
color: Colors.teal.shade900,
fontFamily: 'Source Sans Pro',
fontSize: 20.0),
),
),
),
Conclusion
Congratulations! You have created your first Flutter app. You learned about basic Flutter widgets such as Scaffold, AppBar, Drawer, CircleAvatar, Text, Divider, and Card. You also learned how to arrange widgets using Column and style text using TextStyle.
Flutter is a powerful framework that allows you to develop high-quality, cross-platform apps. With Flutter, you can create beautiful and responsive user interfaces for both Android and iOS platforms.