Mobile

Application
Development
 Introduction to
Flutter and
Project Structure
Chapter Four
 ● Introduction to Flutter
Outline
● Advantages of Flutter
● Comparisons with other mobile app
● Flutter project structure
Introduction to Flutter
● Flutter is a mobile app SDK (software development kit) for building high-performance, high-
fidelity apps for iOS and Android.
● Flutter SDK is Google’s UI toolkit for crafting beautiful, natively compiled applications for
mobile, web, and desktop from a single codebase.
● flutter lets you develop mobile, web, and desktop apps from one code base.
● Flutter is built on the Dart programming language and provides a fast development workflow with
hot reloading, so you can quickly iterate on your code.
● The Flutter framework makes it easy for you to build user interfaces that are beautiful, fast, and
responsive.
Introduction to Flutter
Some of the top features of Flutter include:
● Dart programming language: Flutter uses the Dart programming language, which is easy
to learn and allows you to develop high-quality apps.
● Hot reload: Flutter's "hot reload" feature lets you quickly and easily make changes to your
app without restarting it.
● Expressive and flexible UI: Flutter's UI elements are built using the same principles as
Google's Material Design guidelines, giving you an expressive and flexible way to create
beautiful apps.
● Native performance: Flutter apps are compiled to native code, giving you the best possible
performance on both iOS and Android.
● Open source: Flutter is an open-source project, which means you can use it for free and
contribute to the platform's development.
Introduction to Flutter
● When creating a Flutter app, you'll be working with what's called a "widget." Widgets are
the basic building blocks of a Flutter app, and they're used to create both the visual
components of an app (like buttons and text) and the functional elements (like Stateless
Widgets).
● There are two types of widgets: Stateless Widgets and Stateful Widgets. As the name
suggests, Stateless Widgets are those with no internal state (or "state," for short). These are
the most straightforward widgets and are often used for buttons or text.
● On the other hand, Stateful Widgets have an internal state, and this state can be changed
over time, and it will be reflected in how the widget looks and behaves. Stateful Widgets are
often used for user input fields or animation controllers.
Advantages of Flutter
● Flutter is fast
● Flutter creates cross-platform applications
● Flutter has a rich set of widgets
● Flutter is open source
● Flutter is free
● Google backs Flutter:
● Getting inspired by big successful apps built with Flutter:
● Easy debugging:
● Hardware and software utilization
● Different screen adaptability
Comparisons with other mobile app
There are many mobile development frameworks out there that seek a common goal: to build native
mobile apps for Android and iOS with a single code base. eg:
● Xamarin
● React Native
Flutter has benefits that make space for itself, not necessarily by overcoming the
other frameworks, but by already being at least on the same level as native frameworks:
● High performance
● Full control of the user interface
● Dart language
● Being backed by Google
● Open source framework
● Developer resources and tooling
Comparisons with other mobile app
● Since the beginning of the Flutter framework, it was intended to provide a better experience to the user
through high-performance execution, but that's not the only promise of Flutter.
● The development experience was also focused on addressing some of the problems of multiple platform
mobile development:
○ Long/more expensive development cycles: To be able to cope with market demand, you must
choose to build for a single platform, or create multiple teams.
○ Multiple languages to learn: If a developer wants to develop for multiple platforms, they must
learn how to do something in one OS and programming language, and later, the same thing on
another OS and programming language.
○ Long build/compile time: Some developers may already have experienced how build time may
have an impact on productivity. In Android, for example, some developers experience multiple long
build times after a few minutes of coding (this is evolving, and it's a lot better now, but it was
already causing a lot of pain).
○ Existing cross-platform solutions side effects: You adopt an existing cross platform framework
(that is, React Native, Xamarin, Ionic, Cordova) in an attempt to work around the preceding
problems, but with that come some side effects, such as a performance impact, a design impact, or a
user experience impact.
Flutter project structure
● A Flutter project, when first created, is a big directory. The good news is that most of it doesn’t
matter to us right now. In fact, much of it won’t ever matter to you.
Anatomy of a Flutter app
● APPLICATION ENTRY POINT
○ The main file of the generated project is the entry point of the Flutter application:
○ void main() => runApp(MyApp());
○ The main function by itself is the Dart entry point of an application. What makes the Flutter
application take the scene is the runApp function called by passing a widget as a parameter, which
will be the root widget of the application (the application itself).
● Again, everything is a widget
○ In Flutter, (nearly) everything is a widget, and widgets are just Dart classes that know how to
describe their view.
○ The Flutter library is full to the brim with built-in widgets. When you start creating your own
widgets, you’ll do so by composing these built-in widgets together.
○ These are some of the most common widgets:
■ Layout—Row, Column, Scaffold, Stack
■ Structures—Button, Toast, MenuDrawer
■ Styles—TextStyle, Color, Padding
■ Animations—FadeInPhoto, transformations
■ Positioning and alignment—Center, Padding
Anatomy of a Flutter app
● The build method
○ Every widget that you create must have a build method, and that method must return another
widget.
○ build(): this is a method in both stateless and stateful widget that takes a parameter of type Build
context and returns a widget. Basically, we return the widget tree that we want to display here.
Anatomy of a Flutter app
Widgets: The widget tree, widget types, and the State object

● In the Flutter library, there are a ton of built-in widgets. Almost all of them are made from
two different widget types: StatelessWidget and StatefulWidget
● The general goal when developing a UI with Flutter is to compose a ton of widgets together
to build the widget tree. A Flutter app is represented by a widget tree.
● The widget tree is an actual tree data structure in code built behind the scenes by Flutter, but
it’s also a useful way to talk about the structure of your Flutter app.
● In short, the tree is a collection of nodes, where each node is a widget. Every time you add a
widget in a build method you’re adding a new node the tree. The nodes are connected by
their parent-child relationship
Widgets: The widget tree, widget types, and the State object
Widgets: The widget tree, widget types, and the State object

● The difference between StatefulWidget and a StatelessWidget is right in the name.

END