Animate Image Rotation in flutter

In Flutter two types of image loading 1. Image.assets() 2. Image.network() Widget is used to display images locally and network. Image. assets() method used when showing a local image on the image widget. Image. network() method used when showing network images on the image widget. we can also apply animation to the image widget. Image Rotation which will give a smooth rotation of the images on mobile application. A sample video is given below.

Step By Step Implementation

Step 1: Create a new project in android studio.

Step 2: Import the package

First of all import material.dart file.

 import 'package:flutter/material.dart';

Here the execution of our application starts.

 import 'package:flutter/material.dart';
 import 'package:untitled/screen/home.dart';

 void main() {
   runApp(MyApp());
 }
 class MyApp extends StatelessWidget{
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       home: HomeScreen(),
     );
   }
 }

Here is the full Code of HomeScreen.dart file.

 import 'package:flutter/material.dart';

 void main()
 {
   runApp(HomeScreen());
 }
 class HomeScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       theme: ThemeData(
         primarySwatch: Colors.blue, 
       ),
       debugShowCheckedModeBanner: false,
       home: MyHomePage(),
     );
   }
 }

 class MyHomePage extends StatefulWidget {
   @override
   _MyHomePageState createState() => _MyHomePageState();
 }

 class _MyHomePageState extends State<MyHomePage>
     with SingleTickerProviderStateMixin {
   late AnimationController _controller;
   late Animation<double> _animation;

   @override
   void initState() {
     super.initState();
     _controller = AnimationController(
       vsync: this, 
       duration: Duration(seconds: 2), 
     );
    
     _animation = Tween<double>(
       begin: 0, 
       end: 2 * 3.141, 
     ).animate(_controller);

     // Repeat the animation indefinitely
     _controller.repeat();
   }

   @override
   Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Rotation Animation'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Transform.rotate(
              angle: _animation.value,
              child: Image.asset(
                'assets/images/company_logo.png', 
                width: 200,
                height: 200,
               ),
             );
           },
         ),
       ),
     );
   }

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

Step 3: Output of above example.

Happy coding!

in Mobile

365Bloggy May 29, 2024

Animate Image Rotation in flutter

Step By Step Implementation

Step 1: Create a new project in android studio.

Step 2: Import the package

Here is the full Code of HomeScreen.dart file.

Step 3: Output of above example.

Share this post

Tags

SUBSCRIBE THIS FORM

Recent Posts

Our blogs

Archive

Follow us