Cross Platform Mobile Application

Development

1 / 27
Using Animated Container
●
The Container class provides a convenient way to
create a widget with specific properties: width,
height, background color, padding, borders, and
more.
●
To animate these properties, Flutter provides the
AnimatedContainer widget.
●
Like the Container widget, AnimatedContainer allows
you to define the width, height, background colors,
and more. However, when the AnimatedContainer is
rebuilt with new properties, it automatically animates
between the old and new values. In Flutter, these
types of animations are known as “implicit
animations.”
2 / 27
●
This recipe describes how to use an
AnimatedContainer to animate the size,
background color, and border radius when
the user taps a button using the following
steps:
●
Create a StatefulWidget with default
properties.
●
Build an AnimatedContainer using the
properties.
●
Start the animation by rebuilding with new
properties.
3 / 27
●
The AnimatedContainer constructor has
arguments called duration, curve, color,
height, width, child, decoration, transform,
and many others.

4 / 27
AnimatedCrossFade
●
The AnimatedCrossFade widget provides a
great cross-fade between two children
widgets.
●
TheAnimatedCrossFade constructor takes
duration, firstChild, secondChild,
crossFadeState, sizeCurve, and many other
arguments.
●
It is used when you need to give a fade kind
of transition in between two widgets. It
supports any kind of Flutter Widget like Text,
Images, Icon as well as anything that is
extended from the widget in Flutter.
5 / 27
Crossfade properties

6 / 27
s

7 / 27
Animation Opacity

●
Animated version of Opacity which
automatically transitions the child's opacity
over a given duration whenever the given
opacity changes.
●

8 / 27
AnimationController

●
Special Animation object to control the
animation itself. It generates new values
whenever the application is ready for a new
frame. It supports linear based animation and
the value starts from 0.0 to 1.0
●

9 / 27
10 / 27
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. In android, these
pages/screens are referred to as Activity and in iOS, it is
referred to as ViewController. But, in a flutter, routes are
referred to as Widgets. In Flutter, a Page / Screen is called a
Route.
●
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.

11 / 27
●
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. The code for
pushing a route into the stack is as follows:
●
// Within the `HomeRoute` widget
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const SecondRoute()),
);
12 / 27
}),
●
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);
}

13 / 27
Flutter – Named Routes

14 / 27
Hero Animation

●
The hero refers to the widget that flies between screens.
●
Fly the hero from one screen to another.
●
A Route describes a page or screen in a Flutter app.
●
A standard hero animation flies the hero from one route to a
new route, usually landing at a different location and with a
different size.
●
In radial hero animation, as the hero flies between routes its
shape appears to change from circular to rectangular.

15 / 27
Hero animation code has
the following structure:
●
Define a starting Hero widget, referred to as the source hero. The hero
specifies its graphical representation (typically an image), and an
identifying tag, and is in the currently displayed widget tree as defined
by the source route.
●
Define an ending Hero widget, referred to as the destination hero. This
hero also specifies its graphical representation, and the same tag as
the source hero. It’s essential that both hero widgets are created with
the same tag, typically an object that represents the underlying data.
For best results, the heroes should have virtually identical widget
trees.
●
Create a route that contains the destination hero. The destination
route defines the widget tree that exists at the end of the animation.
●
Trigger the animation by pushing the destination route on the
Navigator’s stack. The Navigator push and pop operations trigger a
hero animation for each pair of heroes with matching tags in the
source and destination routes.
16 / 27
Hero Class

17 / 27
BottomNavigationBar

●
The bottom navigation bar in Flutter can contain multiple items
such as text labels, icons, or both. It allows the user to navigate
between the top-level views of an app quickly. If we are using a
larger screen, it is better to use a side navigation bar.
●
We can display only a small number of widgets in the bottom
navigation that can be 2 to 5.
●
It must have at least two bottom navigation items. Otherwise,
we will get an error.
●
It is required to have the icon and title properties, and we need
to set relevant widgets for them.

18 / 27
Properties of the
BottomNavigationBar
Widget
●
items: It defines the list to display within the bottom navigation bar.
●
currentIndex: It determines the current active bottom navigation bar
item on the screen.
●
onTap: It is called when we tapped one of the items on the screen.
●
onTap: It is called when we tapped one of the items on the screen.
●
fixedColor: It is used to set the color of the selected item. If we have
not set a color to the icon or title, it will be shown.
●
type: It determines the layout and behavior of a bottom navigation bar.
It behaves in two different ways that are: fixed and shifting. If it is null,
it will use fixed. Otherwise, it will use shifting where we can see an
animation when we click a button.

19 / 27
Bottom appbar

20 / 27
Using the TabBar and
TabBarView

21 / 27
USING THE DRAWER AND
LISTVIEW

22 / 27
23 / 27
24 / 27
●
ListView.builder()
●
The builder() constructor constructs a
repeating list of widgets. The constructor
takes two main parameters:
●
An itemCount for the number of repetitions
for the widget to be constructed (not
compulsory).
●
An itemBuilder for constructing the widget
which will be generated ‘itemCount‘ times
(compulsory).
25 / 27
26 / 27
More Details & Example

●
https://docs.flutter.dev/

27 / 27