Mobile Application Development

using Dart & Flutter Presentation

❏ Name : Shreelesh Pawar
❏ College : Muchhala Polytechnic
❏ Enrollment Number : 2201460251
❏ Aim Of The Project : Implementation of the Simple Web
Application that Displays the Sign in Screen.
❏ Roll Number : 2134
❏ Introduction
• In general, creating a mobile application is a very complex and challenging
task. There are many frameworks available, which provide excellent features
to develop mobile applications.
• For developing mobile apps, Android provides a native framework based
on Java and Kotlin language, while iOS provides a framework based on
Objective-C/Swift language.
• Thus, we need two different languages and frameworks to develop
applications for both OS.
• Today, to overcome form this complexity, there are several frameworks have
introduced that support both OS along with desktop apps.
• These types of the framework are known as cross-platform development
tools.
❏ Introduction
• The cross-platform development framework has the ability to write
one code and can deploy on the various platform (Android, iOS, and
Desktop).
• It saves a lot of time and development efforts of developers. There are
several tools available for cross-platform development, including
web-based tools, such as Ionic from Drifty Co. in 2013, Phonegap
from Adobe, Xamarin from Microsoft, and React Native form
Facebook.
• Each of these frameworks has varying degrees of success in the mobile
industry.
• In recent, a new framework has introduced in the cross- Platform
development family named Flutter developed from Google.
❏ What is Flutter ?

● Flutter is Introduced By Google.

● It helps The Mobile Application Developers to Build
the Cross-Platform apps with the help of single
Programming Language.
● Flutter uses Dart Programming Language (a fast and
easy to learn).
❏ What is Flutter ?
• Flutter apps use Dart programming language for
creating an app.
• The dart programming shares several same features as
other programming languages, such as Kotlin and Swift,
and can be trans-compiled into JavaScript code.
• Flutter is mainly optimized for 2D mobile apps that can
run on both Android and iOS platforms.
• We can also use it to build full-featured apps, including
camera, storage, geolocation, network, third-party
SDKs, and more.
❏ Features
❏ What makes the Flutter unique ?
• Flutter is different from other frameworks because it neither
uses WebView nor the OEM widgets that shipped with the
device.
• Instead, it uses its own high-performance rendering engine
to draw widgets.
• It also implements most of its systems such as animation,
gesture, and widgets in Dart programing language that
allows developers to read, change, replace, or remove
things easily.
• It gives excellent control to the developers over the system.
❏ Advantages Observed

● Flutter reduces the time and efforts of testing. As we

know, flutter apps are cross-platform so that testers do
not always need to run the same set of tests on
different platforms for the same app.

● It has an excellent user interface because it uses a

design-centric widget, high-development tools,
advanced APIs, and many more features.
❏ Disadvantages Observed
● The Flutter is a comparatively new language that
needs continuous integration support through the
maintenance of scripts.
● The Flutter apps do not support the browser. It only
supports Android and iOS platforms.
● It uses Dart programming for coding, so a developer
needs to learn new technologies. However, it is easy
to learn for developers.
❏ Why Flutter is Best For Mobile App Developers ?

● Speed up the Mobile App Development Process.

● Less App Development Cost.
● Faster and easy code Writing.
● Use one code to develop apps for both iOS and Android.
● Flutter is Rich in Development APIs and UI Components.
❏ What you’ll Build ?
● You'll implement a simple web app that displays a sign in screen. The screen
contains three text fields: first name, last name, and username. As the user
fills out the fields, a progress bar animates along the top of the sign in area.
When all three fields are filled in, the progress bar displays in green along
the full width of the sign in area, and the Sign up button becomes enabled.
Clicking the Sign up button causes a welcome screen to animate in from the
bottom of the screen.
● The animated GIF shows how the app works at the completion of this lab.
❏ What you’ll learn ?
● How to write a Flutter app that looks natural on the web.
● Basic structure of a Flutter app.
● How to implement a Tween animation.
● How to implement a stateful widget.
● How to use the debugger to set breakpoints.

❏ What you’ll use ?

You need the Three pieces of Software to Complete this :
● Flutter SDK
● Chrome browser
● Text editor or IDE
While developing, run your web app in Chrome, so you can debug with Dart DevTools (also call Flutter
DevTools).
❏ Observations :
● The entire code for this example lives in the lib/main.dart file.
● Calling a widget's setState() method tells Flutter that the widget needs to be updated on
screen. The framework then disposes of the previous immutable widget (and its children),
creates a new one (with its accompanying child widget tree), and renders it to screen. For this to
work seamlessly, Flutter needs to be fast. The new widget tree must be created and rendered to
screen in less than 1/60th of a second to create a smooth visual transition—especially for an
animation. Luckily Flutter is Fast.
● Notice that the _updateFormProgress passes a function to setState(). This is called an
anonymous function and it has the Specified Syntax.
● If you know Java, the Dart Language should feel very familiar.
● In Flutter, almost everything is a Widget. Even the app itself is a widget. The app's UI can be described
as a widget tree.
Step 1: Show The welcome Screen :
The SignUpForm class is a stateful widget. This simply means that the widget stores information that can
change, such as user input, or data from a feed. Since widgets themselves are immutable (can't be modified
once created), Flutter stores state information in a companion class, called the State class. In this lab, all of
your edits will be made to the private _SignUpFormState class.

1.Locate the build() method for the _SignUpFormState class. This is the part of the code that builds the SignUp
button. Notice how the button is defined: It's a TextButton with a blue background, white text that says Sign up
and, when pressed, does nothing.

2.Update the onPressed property.

Change the onPressed property to call the (non-existent) method that will display the welcome screen.

3.Add the _showWelcomeScreen method.

4.Add the /welcome route.

Create the connection to show the new screen. In the build() method for SignUpApp.
Step 2 : Enable Sign in Progress Tracking :
This sign in screen has three fields. Next, you will enable the ability to track the user's progress on filling
in the form fields, and update the app's UI when the form is complete.

1. Add a method to update _formProgress. In the _SignUpFormState class, add a new method called
_updateFormProgress():

2. Call _updateFormProgress when the form changes.

In the build() method of the _SignUpFormState class, add a callback to the Form widget's onChanged argument.
Add the code below marked as NEW:

3. Update the onPressed property (again).

In step 1, you modified the onPressed property for the Sign up button to display the welcome screen. Now,
update that button to display the welcome screen only when the form is completely filled in .
Step 3 : Add Animation For Sign in Progress :
It's time to add animation! In this final step, you'll create the animation for the
LinearProgressIndicator at the top of the sign in area. The animation has the following
behavior :

● When the app starts, a tiny red bar appears across the top of the sign in area.
● When one text field contains text, the red bar turns orange and animates 0.15 of the way
across the sign in area.
● When two text fields contain text, the orange bar turns yellow and animates half of the way
across the sign in area.
● When all three text fields contain text, the orange bar turns green and animates all the way
across the sign in area. Also, the Sign up button becomes enabled.
1. Add an AnimatedProgressIndicator. At the bottom of the file, add this widget:

2. Use the new AnimatedProgressIndicator. Then, Replace the LinearProgressIndicator

in the Form with this new AnimatedProgressIndicator:

3. Run the App .Type anything into the three fields to verify that the animation works, and that
clicking the Sign up button brings up the Welcome screen.

4.Build The APK of your App and Try to Run on Your Mobile Phone.

5.Here is the Final APK of the App That we build and Successfully it’s
Running on the Mobile.
❏ References Taken From :

➢ https://docs.flutter.dev/get-started/codelab-web
➢ https://www.javatpoint.com/flutter
➢ https://www.scribd.com/presentation/697600978/Flutter-ppt-MAD
➢ https://www.geeksforgeeks.org/flutter-tutorial/
➢ https://flutter.dev/learn