LAB ASSIGNMENT 1

Name: Om Badhe
Roll No: 01
Sub- MAD&PWA
Class-TE IT Sem- VI
Date of display: 21-02-24
Date of submission: 12-03-24
Assignment 1: MAD: To build interactive App by including Flutter Gestures and Animations

Theory:
Flutter provides built-in support for handling gestures and creating animations, making it easy to
create interactive and visually appealing user interfaces.

Gestures in Flutter:

Flutter offers a wide range of gesture recognizers like `GestureDetector`, `InkWell`,

`GestureDetector`, etc., which can detect various types of user input such as taps, swipes, drags,
pinches, and more.

These gesture recognizers are used to detect user actions on widgets, enabling developers to create
interactive elements in their apps.

Gesture detection in Flutter is highly customizable, allowing developers to specify different callbacks
for various gestures and fine-tune gesture recognition parameters like sensitivity and velocity.

Animations in Flutter:

Flutter provides powerful animation APIs that allow developers to create smooth and fluid
animations to enhance the user experience.

Animations in Flutter can be applied to any property of a widget, including size, position, opacity,
rotation, and more.

There are various ways to create animations in Flutter, such as using explicit animation controllers
(`AnimationController`), implicit animations (e.g., `AnimatedContainer`, `AnimatedOpacity`), physics-
based animations (e.g., `AnimatedAlign`, `AnimatedPositioned`), and custom animations using
`Animation` objects.

Flutter's animation system is declarative, meaning that developers describe how animations should
behave rather than manually updating widget properties over time.

Flutter's animation APIs support complex animations with features like curves (e.g.,
`Curves.easeInOut`), tweens (e.g., `Tween`), interpolation, chaining animations, and more.
Code: Flutter Gesture and Animation Example: Interactive Box Scaling

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Gesture & Animation Example',

theme: ThemeData(

primarySwatch: Colors.blue,

visualDensity: VisualDensity.adaptivePlatformDensity,

),

home: MyHomePage(),

);

class MyHomePage extends StatefulWidget {

@override

_MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {

bool _scaledUp = true;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Gesture & Animation Example'),

),
 body: Center(

child: GestureDetector(

onTap: () {

setState(() {

_scaledUp = !_scaledUp; // Toggle scale state

});

},

child: AnimatedContainer(

duration: Duration(milliseconds: 200),

curve: Curves.easeInOut,

width: _scaledUp ? 120 : 100, // Adjust width based on scale state

height: _scaledUp ? 120 : 100, // Adjust height based on scale state

color: Colors.blue,

child: Center(

child: Text(

'Tap me!',

style: TextStyle(color: Colors.white),

),

),

),

),

),

);

}
OUTPUT:

Before Tap After Tap