diff --git a/README.md b/README.md index beb2fef..eae9ada 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,33 @@ -# animations +# Flutter Animations -A new Flutter project. +### Each Screen shows a simple animation which uses one basic flutter animation principle -## Getting Started +## How to get started -This project is a starting point for a Flutter application. +- Clone this repository to your local machine -A few resources to get you started if this is your first Flutter project: + `git clone git@github.com:AyanDas-99/Flutter-animations.git` -- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab) -- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook) +- Move to the project folder +- Run this command to install the reuqired packages -For help getting started with Flutter development, view the -[online documentation](https://docs.flutter.dev/), which offers tutorials, -samples, guidance on mobile development, and a full API reference. + ` flutter pub get` + +- Run this command to start the application + + `flutter run` + +## Referring + +On startup, you are presented with this screen from where you can choose one animation + +Each file inside +` lib/Screens/` has the code of the animations in each card, based on the index of the card you choose. + +## Contributions + +You can contribute with new animations by following the steps below: + +1. Create a file named + `lecture{lecture_number}.dart` in the + `lib/Screens/` folder, where {lecture_number} is the number after the last animation is. diff --git a/lib/Screens/lecture5.dart b/lib/Screens/lecture5.dart index 62d1296..76b7453 100644 --- a/lib/Screens/lecture5.dart +++ b/lib/Screens/lecture5.dart @@ -1,7 +1,6 @@ // ignore_for_file: public_member_api_docs, sort_constructors_first import 'package:flutter/material.dart'; -import 'package:flutter/src/widgets/framework.dart'; -import 'package:flutter/src/widgets/placeholder.dart'; +import 'dart:math' show pi; class Lecture5 extends StatefulWidget { final String title; @@ -15,12 +14,32 @@ class Lecture5 extends StatefulWidget { } class _Lecture5State extends State { + bool zoomed = false; + @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), + body: Center( + child: InkWell( + onTap: () { + setState(() { + zoomed = !zoomed; + }); + }, + child: AnimatedContainer( + curve: Curves.fastOutSlowIn, + duration: const Duration(milliseconds: 400), + height: zoomed ? 100 : 400, + width: zoomed ? 100 : 400, + color: zoomed ? Colors.purple : Colors.blue, + transformAlignment: Alignment.center, + transform: Matrix4.identity()..rotateZ(zoomed ? 0 : pi / 2), + ), + ), + ), ); } } diff --git a/lib/main.dart b/lib/main.dart index 9594ee9..fb84ce2 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -4,6 +4,7 @@ import 'dart:math'; import 'package:animations/Screens/lecture2.dart'; import 'package:animations/Screens/lecture3.dart'; import 'package:animations/Screens/lecture4.dart'; +import 'package:animations/Screens/lecture5.dart'; import 'package:flutter/material.dart'; import 'Screens/lecture1.dart'; @@ -37,6 +38,7 @@ class MyApp extends StatelessWidget { 'lec3/': (context) => const Lecture3(title: "3D Animation, Stack and rotate widgets"), 'lec4/': (context) => const Lecture4(title: "Hero Animation"), + 'lec5/': (context) => const Lecture5(title: "Implicit Animations"), }, ); } @@ -71,6 +73,7 @@ class _MyHomePageState extends State { link: 'lec3/', title: "3D Animations, Stack and rotate widgets"), Link(link: 'lec4/', title: 'Hero Animations'), + Link(link: 'lec5/', title: 'Implicit Animations') ], ), ),