Flutter File Structure

BasicFlutter Widgets
 Flutter File Structure
 The file structure is the organization of the data of an application.
 The file structure is something that plays a very important role in the effective
and easy management of the project be it of any size.
 As the size of a project grows, it becomes more and more important to have a
proper structure and format for the code.
 When building large Flutter apps, one of the first things we should decide is
how to structure our project, otherwise, it can lead to many undesired problems
 Unable to find the specific file in a repository,
 making it a time-consuming task.
 Unfit for teamwork.
 Difficult to maintain.
 Or in the worst-case scenario, it can result in low performance app.
A. Assets: static assets for the app
 This directory is on the root level will contain all the
static assets that are used in the application, for
example, fonts, icons, logos, background images,
demo videos, etc.
 It is very much recommended that we should have
different directories for a different type of data for
example images, videos & logos, should have a
different folder of their own so that it becomes easier
to maintain and access them.
B. lib: Entire code of the Application
 Lib: This is the most important folder in the project,
used to write most of the dart code.
 By default, the lib folder contains the main.dart file,
which is the application's entry point.
 This configuration, however, can be changed.
 Potential subfolders in lib folder
 Screens Reading assignment
 Providers
 Service
 Theme
 Models
 Blocs
…
 C. test

 Testing codes
 D: Android
 Android configuration folder
-build.gradle
-AndroidManifest.xml

 Gradle is a build system (open source) that is used to automate building,

testing, deployment, etc.
 “build.gradle” are scripts where one can automate the tasks.
 For example, the simple task to copy some files from one directory to another
can be performed by the Gradle build script before the actual build process
happens.
 D: Android
 AndroidManifest.xml: it contains information of your package, including
components of the application such as activities, services, broadcast receivers,
content providers etc.
 With Quantum Visualizer, you can define the following options in the
AndroidManifest. xml file:
 Supported screen sizes.
 Supported SDK versions: minimum, target, and maximum.
It performs some other tasks also:
 It is responsible to protect the application to access any protected parts by
providing the permissions.
 It also declares the android api that the application is going to use.
 This is the required xml file for all the android application and located inside
the root directory
 E. ios

 Ios configuration files

- Runner

- pods
 G. Pubspec.yaml
 Every Flutter project includes a pubspec.yaml file, often referred to as the
pubspec.
 A basic pubspec is generated when you create a new Flutter project.
 It’s located at the top of the project tree and contains metadata about the project
that the Dart and Flutter tooling needs to know.
 The pubspec file specifies dependencies that the project requires, such as
 particular packages (and their versions),
 fonts, or
 image files.
 It also specifies other requirements, such as dependencies on developer packages
(like testing or mocking packages), or particular constraints on the version of the
Flutter SDK.
Pubspec.yaml
Flutter Code organization
 main.dart
 The foundation of any Flutter app, the main.dart file, should hold very little
code and only serve as an overview to an app.

 The widget being run by runApp should be a StatelessWidget, and the itself
should be no more complicated than a simple MaterialApp.
 The MaterialApp itself should have no heavy code in it, instead pulling the
Theme and the widget screens from other files.
 void main() {
runApp(ExampleApp());
}

class ExampleApp extends StatelessWidget { @override

Widget build(BuildContext context) { return

MaterialApp(
title: 'ExampleApp’, initialRoute: '/',
routes: <String, WidgetBuilder>{
"/": (BuildContext context) =>
ExScreen1(),
"/ExScreen2": (BuildContext context)
 Navigator
 Flutter provides and
a complete Route
system for navigating between screens and
handling deep links.
 Small applications without complex deep linking can use Navigator, while
 apps with specific deep linking and navigation requirements should also use
the Router to correctly handle deep links on Android and iOS, and to stay in
sync with the address bar when the app is running on the web.
 The Navigator widget displays screens as a stack using the correct transition
animations for the target platform.
 To navigate to a new screen, access the Navigator through the
route’s BuildContext and call imperative methods such as push() or pop():
 Routes and Navigator in Flutter
 Route: Apps are the new trend.
 The number of apps available in the Play Store nowadays is quite a
lot.
 The apps display their content in a full-screen container
called pages or screens.
 In flutter, the pages or screens are called Routes and routes are
referred to as Widgets.
 In android, these pages/screens are referred to as Activity and
 in iOS, it is referred to as ViewController.
 Creating routes: A route can be written in the form of a “Class” in
Dart using object-oriented concepts.
 Each route can be written as a separate class and has its own
contents and UI.
 Navigator in Flutter
 Navigator: As the name suggests, Navigator is a widget that helps us to navigate between
the routes.
 The navigator follows stack method when dealing with the routes. Based on the actions
made by the user, the routes are stacked one over the other and when pressed back, it goes to
the most recently visited route.
 Navigator is a widget that follows a stack discipline.
 Defining Home: While navigating, the first thing that we need to do is to define or initialize
the “home page”.
 The home page can be any route according to our needs. The home usually will be placed at
the bottom of the navigator stack.
 Now let’s see how to initialize our HomeRoute() as our home page:
void main() {
runApp(MaterialApp(
home: HomeRoute(),
));
}
 Flutter – Navigate From One Screen to Another
 Flutter apps may have multiple screens or pages.
 Pages are groups of functionalities.
 The user navigates between different pages to use different functionalities.
 Concepts like pages are called routes in Flutter.
 We can use Navigator.push() to navigate to a new route and
 Navigator.pop() to navigate to the previous route.
 Routes are managed by the Navigator widget.
 The navigator manages a stack of routes.
 Routes can be pushed on the stack using push() method and popped off the stack using pop()
method.
 The top element in the stack is the currently active route. Navigator is a stateful widget with
 Navigating to a Page
 Since we have defined our Home, all the remaining is to navigate from home
to another route of the app.
 For that the navigator widget has a method called Navigator.push().
 This method pushes the route on top of the home, thereby displaying the
second route.
 Navigator class has a push method to Navigate to the next screen.
// Within the `HomeRoute` widget
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SecondRoute()),
);
}),
 Navigating Back to Home
 Navigating Back to Home: Now we have arrived at our
destination, but how do we go back home?
 For that, the navigator has a method called Navigator.pop(). This
helps us to remove the present route from the stack so that we go
back to our home route. This can be done as follows:
// Within the SecondRoute widget
onPressed: () {
Navigator.pop(context);
}
 Navigator.pushNamed(context, “/path”)

 Navigator.push(context,
MaterialPageRoute(builder: (context)=>
Home()))

 Navitor.pop(context)
 ! !!
O U
K Y
AN
T H