Flutter First Application

Flutter First Application

Create a simple application in Android Studio to understand the basics of the Flutter
application. To create Flutter application, do the following steps:

Step 1: Open the Android Studio.

Step 2: Create the Flutter project. To create a project, go to File-> New->New Flutter
Project. The following screen helps to understand it more clearly.

Step 3: In the next wizard, you need to choose the Flutter Application. For this, select Flutter
Application-> click Next, as shown in the below screen.

Prepared by: G Sudhakar Raju Page 1 of 10

Flutter First Application

Step 4: Next, configure the application details as shown in the below screen and click
on the Next button.

Project Name: Write your Application Name.

Flutter SDK Path: <path_to_flutter_sdk>

Project Location: <path_to_project_folder>

Descriptions: <A new Flutter hello world application>.

Prepared by: G Sudhakar Raju Page 2 of 10

Flutter First Application

Step 5: In the next wizard, you need to set the company domain name and click the Finish
button.

After clicking the Finish button, it will take some time to create a project. When the
project is created, you will get a fully working Flutter application with minimal
functionality.

Step 6: Now, let us check the structure of the Flutter project application and its purpose. In
the below image, you can see the various folders and components of the Flutter application
structure, which are going to discuss here.

Prepared by: G Sudhakar Raju Page 3 of 10

Flutter First Application

.idea: This folder is at the very top of the project structure, which holds the
configuration for Android Studio. It doesn't matter because we are not going to work
with Android Studio so that the content of this folder can be ignored.

.android: This folder holds a complete Android project and used when you build the
Flutter application for Android. When the Flutter code is compiled into the native code,
it will get injected into this Android project, so that the result is a native Android
application. For Example: When you are using the Android emulator, this Android
project is used to build the Android app, which further deployed to the Android Virtual
Device.

.ios: This folder holds a complete Mac project and used when you build the Flutter
application for iOS. It is similar to the android folder that is used when developing an
app for Android. When the Flutter code is compiled into the native code, it will get
injected into this iOS project, so that the result is a native iOS application. Building a
Flutter application for iOS is only possible when you are working on macOS.

.lib: It is an essential folder, which stands for the library. It is a folder where we will do
our 99 percent of project work. Inside the lib folder, we will find the Dart files which
contain the code of our Flutter application. By default, this folder contains the
file main.dart, which is the entry file of the Flutter application.

Prepared by: G Sudhakar Raju Page 4 of 10

 Flutter First Application

.test: This folder contains a Dart code, which is written for the Flutter application to
perform the automated test when building the app. It won't be too important for us
here.

We can also have some default files in the Flutter application. In 99.99 percent of
cases, we don't touch these files manually. These files are:

.gitignore: It is a text file containing a list of files, file extensions, and folders that
tells Git which files should be ignored in a project. Git is a version-control file for
tracking changes in source code during software development Git.

.metadata: It is an auto-generated file by the flutter tools, which is used to track the
properties of the Flutter project. This file performs the internal tasks, so you do not
need to edit the content manually at any time.

.packages: It is an auto-generated file by the Flutter SDK, which is used to contain a

list of dependencies for your Flutter project.

flutter_demoapp.iml: It is always named according to the Flutter project's name that

contains additional settings of the project. This file performs the internal tasks, which
is managed by the Flutter SDK, so you do not need to edit the content manually at any
time.

o Project general settings such as name, description, and version of the project.
o Project dependencies.
o Project assets (e.g., images).

pubspec.lock: It is an auto-generated file based on the .yaml file. It holds more detail
setup about all dependencies.

README.md: It is an auto-generated file that holds information about the project. We

can edit this file if we want to share information with the developers.

Step 7: Open the main.dart file and replace the code with the following code snippets.

1. import 'package:flutter/material.dart';
2.
3. void main() => runApp(MyApp());
4.
5. class MyApp extends StatelessWidget {
6. // This widget is the root of your application.
7. @override

Prepared by: G Sudhakar Raju Page 5 of 10

 Flutter First Application

8. Widget build(BuildContext context) {

9. return MaterialApp(
10. title: 'Hello World Flutter Application',
11. theme: ThemeData(
12. // This is the theme of your application.
13. primarySwatch: Colors.blue,
14. ),
15. home: MyHomePage(title: 'Home page'),
16. );
17. }
18. }
19. class MyHomePage extends StatelessWidget {
20. MyHomePage({Key? key, required this.title}) : super(key: key);
21. // This widget is the home page of your application.
22. final String title;
23.
24. @override
25. Widget build(BuildContext context) {
26. return Scaffold(
27. appBar: AppBar(
28. title: Text(this.title),
29. ),
30. body: Center(
31. child: Text('Hello World'),
32. ),
33. );
34. }
35. }

Step 8: Let us understand the above code snippet line by line.

o To start Flutter programming, you need first to import the Flutter package. Here,
we have imported a Material package. This package allows you to create user
interface according to the Material design guidelines specified by Android.
o The second line is an entry point of the Flutter applications similar to the main
method in other programming languages. It calls the runApp function and pass

Prepared by: G Sudhakar Raju Page 6 of 10

Flutter First Application

it an object of MyApp The primary purpose of this function is to attach the

given widget to the screen.
o Line 5 to 18 is a widget used for creating UI in the Flutter framework. Here,
the StatelessWidget does not maintain any state of the widget. MyApp extends
StatelessWidget that overrides its build The build method is used for creating
a part of the UI of the application. In this block, the build method uses
MaterialApp, a widget to create the root level UI of the application and contains
three properties - title, theme, and home.
1. Title: It is the title of the Flutter application.
2. Theme: It is the theme of the widget. By default, it set the blue as the
overall color of the application.
3. Home: It is the inner UI of the application, which sets another widget
(MyHomePage) for the application.
o Line 19 to 35, the MyHomePage is similar to MyApp, except it will return
the Scaffold Scaffold widget is a top-level widget after the MaterialApp widget
for creating the user interface. This widget contains two
properties appBar and body. The appBar shows the header of the app, and
body property shows the actual content of the application.
Here, AppBar render the header of the application, Center widget is used to
center the child widget, and Text is the final widget used to show the text
content and displays in the center of the screen.

Step 9: Now, run the application. To do this, go to Run->Run main.dart, as shown in

the below screen.

Prepared by: G Sudhakar Raju Page 7 of 10

Flutter First Application

Step 10: Finally, you will get the output as below screen.

Prepared by: G Sudhakar Raju Page 8 of 10

Flutter First Application

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Simple App'),
),
body: Center(
child: Text('Hello, World!'),
),
),
);
}
}

Explanation
1. Importing Material Package:

 import 'package:flutter/material.dart';
 This imports the necessary Flutter package to use Material Design
components like AppBar, Scaffold, and Text.
2. Main Function:

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

 The main() function is the entry point of the app. It calls runApp() and
passes the root widget, MyApp, which starts the app.

Prepared by: G Sudhakar Raju Page 9 of 10

Flutter First Application

3. MyApp Class:

 class MyApp extends StatelessWidget { ... }

 This is a simple class that extends StatelessWidget, meaning it doesn’t
have any mutable state.
 The build() method returns a MaterialApp widget, which is the root of
your application.
4. MaterialApp Widget:

 Inside MyApp, the MaterialApp widget sets up the structure of the app.
 home: The Scaffold widget defines the basic visual layout of the app.
5. Scaffold Widget:

 Scaffold provides the structure for the visual interface, including an

AppBar at the top and a body in the center.
 appBar: The AppBar widget shows a title at the top of the app.
 body: The body contains a Center widget that centers its child, which is
a Text widget.
6. Text Widget:

 Text('Hello, World!') displays the text "Hello, World!" at the center of the
screen.

When you run this app, it displays a simple interface with the text "Hello,
World!" centered on the screen, with a title "Simple App" in the app bar at the
top.

Prepared by: G Sudhakar Raju Page 10 of 10