Hinge Animation - Flutter

Certain applications in Flutter have distinct mobile application animations set. It enhances the visual appeal and user-friendliness of an app. We shall go into great detail about the Hinge animations in this blog. There are two methods in Flutter for working with animations, specifically:

Animated Builder Widget
A pub package

In this article, you will learn how to create your Staggered Grid widget in Flutter. So let’s take Staggered Grid example of the Table in Flutter of Mobile application.

Video example of Lottie widget mentioned below

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project).

Step 2: Adding material package

Import method the runApp method in the main function call first while run the application.

import 'package:flutter/material.dart';

void main() {

runApp(RunMyApp());

}

Step 3: Creating a stateless widget

We can create a stateless widget that contains MaterialApp widget,AppBar,etc.

class RunMyApp extends StatelessWidget {

const RunMyApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(home);

}

Step 4: Final code of Hinge Animation .

 import 'package:flutter/material.dart';

 void main() {
   runApp(HingeAnimation());
 }

 class HingeAnimation extends StatelessWidget {
   const HingeAnimation({Key? key}) : super(key: key);
   static const String _title = 'Flutter';
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
     );
   }
 }

 class MyStatefulWidget extends StatefulWidget {
   const MyStatefulWidget({Key? key}) : super(key: key);

   @override
   State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
 }

 class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
    late final AnimationController _controller = AnimationController(
     duration: const Duration(seconds: 4),
      vsync: this,
   )..repeat();

   final Tween<double> turnsTween = Tween<double>(
      begin: 1,
      end: 0,
   );

   @override
   void dispose() {
     _controller.dispose();
     super.dispose();
   } 

   @override
   Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RotationTransition(
          turns: turnsTween.animate(_controller),
          child: const Padding(
            padding: EdgeInsets.all(8.0),
            child: FlutterLogo(size: 150.0),
           ),
         ),
       ),
     );
   }
 }

Hinge Animation - Flutter

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project).

Step 2: Adding material package

Step 3: Creating a stateless widget

Step 4: Final code of Hinge Animation .

Output of above example

Share this post

Tags

SUBSCRIBE THIS FORM

Recent Posts

Our blogs

Archive

Follow us