MOBILE APPLICATION
DEVELOPMENT WITH FLUTTER
LESSON 5: GESTURES, ANIMATIONS
AND SPLASH SCREEN
OUTLINE
What you will learn
• Gesture Detector
• Implicit Animations
• Routing Transitions
• Splash screen
GESTURES
Gesture-based widgets detect different user touch behaviors. You wrap
gesture widgets around other widgets that need touch behavior. Gesture
widgets try to recognize what type of gesture the user performed — for
example, if they tapped, double-tapped, long-pressed or panned.
The two most common gesture widgets are:
1. GestureDetector: Provides other controls, like dragging.
2. InkWell: Provides animated ripple feedback. For example, when the
user taps a UI element you use it to display a splash animation, as
shown below:
GestureDetector widget
GestureDetector needs only two things passed to it: a widget (its child)
and a callback to correspond to a gesture.
Here’s an example:
GestureDetector(
onTap: () => print("tapped!"),
child: Text("Tap Me"),
);
Although GestureDetector needs only one gesture callback, it can be
passed many different callbacks and will respond differently based on
the gesture it detects. These are some of the nearly 30 gestures it can
work with, below are some common gestures.
GestureDetector cont…
Gesture callbacks
• onTap
• onTapUp
• onTapDown
• onLongPress
• onDoubleTap
• onHorizontalDragStart
• onVerticalDragDown
• onPanDown
• onScaleStart
Animations
• Well-designed animations make a UI feel more intuitive, contribute to
the slick look and feel of a polished app, and improve the user
experience. Flutter’s animation support makes it easy to implement a
variety of animation types. Many widgets, especially Material widgets,
come with the standard motion effects defined in their design spec, but
it’s also possible to customize these effects.
Two main animation flavors in flutter
1. Implicit animations
2. Explicit animations
Implicit Animations
Flutter have a series of Animated widgets that are animated widgets of
existing widgets. These include
1. Align AnimatedAlign
2. Container AnimatedContainer
3. DefaultTextStyle AnimatedDefaultTextStyle
4. Opacity AnimatedOpacity
5. Padding AnimatedPadding
6. PositionedAnimatedPositioned
7. ThemeAnimatedThemeSize AnimatedSize
Animated Container
Let’s say you want to animate a container from width 100 to width 200 triggered by a
click of a button, here is how we do it.
// declare a variable to hold the state of the animation
bool isSmall = false;
//animated container from 100 to 200 width
AnimatedContainer( width: isSmall ? 100 : 200, duration: 100)
//button that triggers the animation
ElevatedButton(child: Text(“Animate”),
onPressed: () {
setState((){
isSmall = !isSmall
});
}
Page Transitions
Sometimes it is cool to have a custom transition when navigating from
one Screen to another in flutter. There are many ways of achieving
transitions between screen, but we will use the page_transition package
as it is more easy to setup and get working.
Steps
1. Add page_transition dependency to pubspec.yaml and Run flutter
pug get command
2. Use PageTransition widget in Navigator.push
NB: Full description and examples on how to use the page_transition
package can be found at https://pub.dev/packages/page_transition
Page Transition cont…
Step 1: Add page_transition dependency to pubspec.yaml and Run
flutter pug get command
dependencies:
page_transition: "^2.0.5"
Step 2: Use PageTransition widget in Navigator.push
Navigator.push(context, PageTransition(type:
PageTransitionType.leftToRight, child: DetailScreen()));
Splash screen
• Splash screens (also known as launch screens) provide a simple initial
experience while your mobile app loads. They set the stage for your
application, while allowing time for the app engine to load and your app
to initialize.
There are many ways of adding splash screen to our apps, we will use the
splash_screen_view package as it is quick to setup and easy to use.
Read more about the package at
https://pub.dev/packages/splash_screen_view
Steps
1. Add splash_screen_view as a dependency
2. Set up the splash screen
3. Run the package
Splash screen cont…
Step 1: Add flutter_native_splash as a dependency
Go to pubspec.yaml to add the dependency as shown below
splash_screen_view: ^3.0.0
Step 2: Set up the splash screen
Create a file named flutter_native_splash.yaml in your root directory
and add the following codes
pubspec.yaml
splash_screen_view:
color: "#ffffff"
Splash screen cont…
main.dart
SplashScreenView(
navigateRoute: SecondScreen(),
duration: 3000,
imageSize: 130,
imageSrc: "logo.png",
backgroundColor: Colors.white,
);
Splash screen cont…
Step 3: Run the package
After adding your settings, run the following command in the terminal:
flutter pub run splash_screen_view:create
