102046712

Flutter Introduction
Introduction to Dart
• Dart is a client-optimized language for developing fast apps on any platform.
• Its goal is to offer the most productive programming language for multi-platform development,
paired with a flexible execution runtime platform for app frameworks.
• Dart also forms the foundation of Flutter. Dart provides the language and runtimes that power
Flutter apps, but Dart also supports many core developer tasks like formatting, analyzing, and
testing code.
• Dart has built-in sound null safety. This means values can’t be null unless you say they can be.
With sound null safety, Dart can protect you from null exceptions at runtime through static code
analysis.

Dart: The platforms

• Dart’s compiler technology lets you run code in different ways:

• Native platform: For apps targeting mobile and desktop devices, Dart includes both a Dart VM
with just-in-time (JIT) compilation and an ahead-of-time (AOT) compiler for producing
machine code.
• Web platform: For apps targeting the web, Dart can compile for development or production
purposes. Its web compiler translates Dart into JavaScript.
• The Flutter framework is a popular, multi-platform UI toolkit that’s powered by the Dart
platform, and that provides tooling and UI libraries to build UI experiences that run on iOS,
Android, macOS, Windows, Linux, and the web.

12002040601013 12002040601066
102046712

INTRODUCTION TO FLUTTER
Flutter is an open-source mobile application development framework created by Google. It allows
developers to build native-looking apps for iOS, Android, web, and desktop platforms using a single
codebase. Flutter uses the Dart programming language, which is also developed by Google. Dart is an
object-oriented, class-based, garbage-collected language with C-style syntax.

Flutter provides a rich set of pre-built widgets that can be used to create beautiful and responsive user
interfaces. It also has a hot reload feature that allows developers to see the changes they make in real-
time. Flutter's widgets are customizable, and it has a flexible layout system that makes it easy to create
complex UIs.

Flutter is known for its fast development cycle, which makes it an ideal choice for startups and
businesses that want to develop apps quickly. It also has a growing community of developers who
contribute to its development and provide support to other developers.

Features of Flutter:
1. Modern and reactive framework
2. Uses Dart programming language and it is very easy to learn
3. Fast development
4. Beautiful and fluid user interactions
5. Huge widget catalog
6. Runs the same UI for multiple platforms
7. High-performance application

Advantages of Flutter
Flutter comes with beautiful and customizable widgets for high performance and outstanding mobile
application. It fulfills all the custom needs and requirements. Besides these, Flutter offers many more
advantages as mentioned below:
• Dart has a large repository of software packages which lets you to extend the capabilities of
your application.
• Developers need to write just a single code base for both applications (both Android and iOS
platforms). Flutter may to be extended to other platform as well in the future.
• Flutter needs lesser testing. Because of its single code base, it is sufficient if we write automated
tests once for both the platforms.
• Flutter’s simplicity makes it a good candidate for fast development. Its customization capability
and extendibility make it even more powerful.
• With Flutter, developers have full control over the widgets and its layout.
• Flutter offers great developer tools, with amazing hot reload.

12002040601013 12002040601066
102046712

Disadvantages of Flutter
Despite its many advantages, flutter has the following drawbacks in it:
• Since it is coded in Dart language, a developer needs to learn new language (though it is easy to
learn).
• Modern framework tries to separate logic and UI as much as possible but, in Flutter, user
interface and logic are intermixed. We can overcome this using smart coding and using high-
level modules to separate user interface and logic.
• Flutter is yet another framework for creating mobile applications. Developers are having a hard
time choosing the right development tools in the hugely populated segment.

INSTALLATION OF FLUTTER:
1. Go to URL, https://flutter.dev/docs/get-started/install/windows and download the latest
FLUTTER SDK. As of April 2019, the version is 1.2.1 and the file is flutter_windows_v1.2.1-
stable.zip
2. Unzip the zip archive in a folder, say C:\flutter\
3. Update the system path to include the flutter bin directory.
4. Flutter provides a tool, flutter doctor to check that all the requirement of flutter development is

met.
5. Running the above command will analyze the system and show its report as shown below:

The report says that all development tools are available but the device is not connected. We can
fix this by connecting an android device through USB or starting an android emulator.
6. Install the latest Android SDK , if reported by flutter doctor.
7. Install the latest Android Studio, if reported by flutter doctor.
8. Start an android emulator or connect a real android device to the system.
9. Install Flutter and Dart plugin for Android Studio. It provides startup template to create new
Flutter application, an option to run and debug Flutter application in the Android studio itself,
etc.,

12002040601013 12002040601066
102046712

• Open Android studio

• Click File > Settings > Plugins
• Select the Flutter plugin and click Install
• Click Yes when prompted to install the Dart plugin
• Restart Android Studio

CREATING A SIMPLE APPLICATION IN ANDROID STUDIO

Let us create a simple Flutter application to understand the basics of creating a flutter application in
the Android Studio.
1. Open Android Studio
2. Create flutter project. For this, click File -> New -> New Flutter Project

3. Select Flutter Application. For this, select Flutter Application and click Next.

12002040601013 12002040601066
102046712

4. Configure the application as below and click Next.

• Project name: hello_app
• Flutter SDK path: <path_to_flutter_sdk>
• Project Location: <path_to_project_folder>
• Description: Flutter based hello world application

12002040601013 12002040601066
102046712

5. Configure Project. Set the company domain as flutterapp.adit.com and click Finish.
6. Enter Company domain. Android Studio creates a fully working flutter application with
minimum functionality. Let us check the structure of the application and then, change the code
to do our task. The structure of the application and its purpose is as follows:

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, Pub
• README.md - Project description file written in Markdown format
7. Report the dart code in the lib/main.dart file with the below code:

12002040601013 12002040601066
102046712

Let us understand the dart code line by line.

• Line 1: imports the flutter package, material. The material is a flutter package to create user interface
according to the Material design guidelines specified by Android.
• Line 3: This 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.
• Line 5 - 17: Widget is used to create UI in flutter framework. StatelessWidget is a widget, which does
not maintain any state of the widget. MyApp extends StatelessWidget and overrides its build method.
The purpose of the build method is to create a part of the UI of the application. Here, build method
uses MaterialApp, a widget to create the root level UI of the application. It has three properties - title,
theme and home.

12002040601013 12002040601066
102046712

o title is the title of the application.

o theme is the theme of the widget. Here, we set blue as the overall color of the application
using ThemeData class and its property, primarySwatch.
o home is the inner UI of the application, which we set another widget, MyHomePage
• Line 19 - 38: MyHomePage is same as MyApp except it returns Scaffold Widget. Scaffold is a top level
widget next to MaterialApp widget used to create UI conforming material design. It has two important
properties, appBar to show the header of the application and body to show the actual content of the
application. AppBar is another widget to render the header of the application and we have used it in
appBar property. In body property, we have used Center widget, which centers it child widget. Text is
the final and inner most widget to show the text and it is displayed in the center of the screen.
8. Now, run the application using, Run -> Run main.dart
9. Finally, the output of the application is as follows:

12002040601013 12002040601066
102046712

ARCHITECTURE OF FLUTTER APPLICATION

Let us discuss the architecture of the Flutter framework.
Widgets:
The core concept of the Flutter framework is In Flutter, Everything is a widget. Widgets are basically
user interface components used to create the user interface of the application.
In Flutter, the application is itself a widget. The application is the top- level widget and its UI is build
using one or more children (widgets), which again build using its children widgets. This composability
feature helps us to create a user interface of any complexity.
For example, the widget hierarchy of the hello world application (created in previous chapter) is as
specified in the following diagram:

• MyApp is the user created widget and it is build using the Flutter native widget, MaterialApp.
• MaterialApp has a home property to specify the user interface of the home page, which is
again a user created widget, MyHomePage.
• MyHomePage is build using another flutter native widget, Scaffold.
• Scaffold has two properties – body and appBar.

12002040601013 12002040601066
102046712

• body is used to specify its main user interface and appBar is used to specify its header user interface.
• Header UI is build using flutter native widget, AppBar and Body UI is build using Center widget.
• The Center widget has a property, Child, which refers the actual content and it is build using Text
widget.

GESTURES:
Flutter widgets support interaction through a special widget, GestureDetector. GestureDetector is an
invisible widget having the ability to capture user interactions such as tapping, dragging, etc., of its
child widget. Many native widgets of Flutter support interaction through the use of GestureDetector.
We can also incorporate interactive feature into the existing widget by composing it with the
GestureDetector widget. We will learn the gestures separately in the upcoming chapters.

CONCEPT OF STATE
Flutter widgets support interaction through a special widget, GestureDetector. GestureDetector is an
invisible widget having the ability to capture user interactions such as tapping, dragging, etc., of its
child widget. Many native widgets of Flutter support interaction through the use of GestureDetector.
We can also incorporate interactive feature into the existing widget by composing it with the
GestureDetector widget. We will learn the gestures separately in the upcoming chapters.

LAYERS:
The most important concept of Flutter framework is that the framework is grouped into multiple
category in terms of complexity and clearly arranged in layers of decreasing complexity. A layer is build
using its immediate next level layer. The top most layer is widget specific to Android and iOS. The next
layer has all flutter native widgets. The next layer is Rendering layer, which is low level renderer
component and renders everything in the flutter app. Layers goes down to core platform specific code.
The general overview of a layer in Flutter is specifies in the below diagram:

12002040601013 12002040601066
102046712

The following points summarize the architecture of Flutter:

• In Flutter, everything is a widget and a complex widget is composed of already existing widgets.
• Interactive features can be incorporated whenever necessary using GestureDetector widget.
• The state of a widget can be maintained whenever necessary using StatefulWidget widget.
• Flutter offers layered design so that any layer can be programmed depending on the complexity of
the task.

12002040601013 12002040601066
102046712

FLUTTER WIDGETS:

Flutter offers a rich set of widgets to create user interfaces for your mobile, web, and desktop
applications. These widgets are the building blocks of your Flutter app's UI, and you can
customize and combine them to create complex and beautiful user interfaces. Here's a step-by-
step guide on how to work with Flutter widgets:

1. Create a New Flutter Project: If you haven't already, create a new Flutter project using the
flutter create command.
2. Build Your User Interface: Create your app's user interface by assembling various Flutter
widgets. Widgets in Flutter are either stateless or stateful. Stateless widgets represent parts of
the UI that don't change, while stateful widgets manage mutable state and can change over
time.
3. Basic Widgets: Flutter provides a wide range of basic widgets for common UI elements,
including:
• Text: Display text on the screen.
• Image: Show images.
• Container: A box with optional decorations.
• Row and Column: Layout widgets for arranging children horizontally or vertically.
• ListView: Scrollable list of widgets.
• AppBar: Top app bar with options like navigation and actions.
• Button: Various types of buttons, including ElevatedButton, TextButton, and
OutlinedButton.
4. Custom Widgets: You can create custom widgets by extending the StatelessWidget or
StatefulWidget classes. These widgets encapsulate parts of your UI and can be reused
throughout your app.
5. Layout Widgets: Flutter provides layout widgets to arrange child widgets, such as Container,
Row, Column, Stack, Expanded, and Flexible. These widgets help you create responsive and
flexible UIs.
6. Handling User Input: Use widgets like GestureDetector, InkWell, or specific buttons to capture
user input. You can respond to user interactions by defining callback functions.
7. Styling and Theming: Customize the appearance of your widgets using properties like TextStyle,
Color, Border, and more. Flutter also supports theming to apply consistent styles throughout
your app.
8. State Management: Depending on your app's complexity, choose a state management solution
like:
• Provider: A simple and efficient state management solution.
• Bloc: Ideal for managing complex app states.
• GetX: Provides an easy-to-use state management approach.
9. Animation: Add animations to your app using widgets like AnimatedContainer, Hero, or by
defining custom animations using the Animation class.

12002040601013 12002040601066
102046712

10. Responsive Design: Make your app responsive to different screen sizes and orientations by
using layout widgets like MediaQuery, OrientationBuilder, and FittedBox.
11. Testing and Debugging: Flutter offers a robust set of tools for testing and debugging your UI,
including the Flutter Inspector, DevTools, and unit/widget testing frameworks.
12. Accessibility: Ensure your app is accessible to all users by using accessibility features and
widgets like Semantics and providing meaningful descriptions for screen readers.
13. Internationalization (i18n): Localize your app for different languages and regions using
Flutter's internationalization support.
14. Performance Optimization: Optimize your app's performance by using techniques like lazy
loading, code splitting, and minimizing unnecessary widget rebuilds.
15. Responsive App Design: Create adaptive layouts that work well on both mobile and desktop
platforms using Flutter's responsive design features.
16. Platform-Specific Widgets: For platform-specific UI elements, Flutter provides widgets like
Cupertino and Material widgets to ensure a native look and feel on iOS and Android.
17. Third-Party Widgets: Extend your app's functionality by integrating third-party widgets and
packages from the Flutter community through pub.dev.

For example:

My First App

12002040601013 12002040601066
102046712

REFERENCES:

(1) Flutter - Build apps for any screen. https://flutter.dev/.

(2) Flutter Tutorial - GeeksforGeeks. https://www.geeksforgeeks.org/flutter-tutorial/.
(3) An Introduction to Flutter: The Basics - freeCodeCamp.org.
https://www.freecodecamp.org/news/an-introduction-to-flutter-the-basics-9fe541fd39e2/.
(4) What is Flutter? | Working | Features | Advantages and ... - EDUCBA.
https://www.educba.com/what-is-flutter/.
(5) Learn - Flutter. https://flutter.dev/learn.
(6) Flutter Tutorial - Javatpoint. https://www.javatpoint.com/flutter.
(7) What is Flutter? - GeeksforGeeks. https://www.geeksforgeeks.org/what-is-flutter/.
(8) Flutter Tutorial - Online Tutorials Library. https://www.tutorialspoint.com/flutter/index.htm.
(9) Flutter | An introduction to the open source SDK by Google.
https://www.geeksforgeeks.org/flutter-an-introduction-to-the-open-source-sdk-by-google/.

12002040601013 12002040601066