Scribd
Upload
3 views

Week-6-1

This document provides a step-by-step guide to creating a Flutter application using Android Studio, including setting up the project and understanding the code structure. It explains the role of the main.dart file, the use of StatelessWidget, and the components of the Flutter project directory. Additionally, it outlines the default files and folders generated in a Flutter project, including their purposes.

Uploaded by

Muneeb Ahmad Bhatti
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

Week-6-1

This document provides a step-by-step guide to creating a Flutter application using Android Studio, including setting up the project and understanding the code structure. It explains the role of the main.dart file, the use of StatelessWidget, and the components of the Flutter project directory. Additionally, it outlines the default files and folders generated in a Flutter project, including their purposes.

Uploaded by

Muneeb Ahmad Bhatti
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 8

CREATING YOUR FIRST

APPLICATION
New project can be created using Android Studio.
Here, we are using Android Studio!

Open the Android Studio.


go to File-> New->New Flutter Project.
CONT.
Provide Flutter SDK path

Mention the:
Project Name
Project Location
Description
Project Type
FIRST APPLICATION
When the project is created, you will get a fully working Flutter application with minimal functionality. You also need an
emulator to display output
import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
); }
}
class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key, required this.title}) : super(key: key);

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

………
}
WIDGETS TREE
DESCRIPTION OF CODE
o Main.dart file is the entry point of the Flutter application. Calls runApp function and pass it an object of MyApp
class. The purpose of the runApp function is to attach the given widget to the screen.

o Import the flutter package, material. The material is a flutter package to create a user interface according to the
Material design guidelines specified by Android.

o StatelessWidget is a widget, which does not maintain any state of the widget. MyApp extends StatelessWidget and
overrides its build method.

o The build method gets the context environment necessary to build the widgets through BuildContext parameter and
returns the widget it builds.

o In the code, we have used the title as one of the constructor arguments and also used Key as another argument. The
title is used to display the title and the Key is used to identify the widget in the built environment.

o The build method calls the build method of Scaffold, which in turn calls the build method of AppBar and Center to
build its user interface. Finally, the Center build method calls the Text build method
FLUTTER PROJECT FILES AND FOLDERS
DESCRIPTION OF THE DEFAULT FILES AND
FOLDERS
Various components of the structure of the application are explained here:
 android - Auto generated source code to create android application
 ios - Auto generated source code to create ios application
 lib - Main folder containing Dart code written using flutter framework
 lib/main.dart - Entry point of the Flutter application
 test - Folder containing Dart code to test the flutter application
 test/widget_test.dart - Sample code
 .gitignore - Git version control file
 .metadata - auto generated by the flutter tools
 .packages - auto generated to track the flutter packages
 .iml - project file used by Android studio
 pubspec.yaml - Used by Pub, Flutter package manager
 pubspec.lock - Auto generated by the Flutter package manager.
 README.md - Project description file written in Markdown format

You might also like