CODEWITHSUNDEEP
animationflutter
Eduardo Pereira
Eduardo Pereira

Reputation: 880

How to auto start animated icon

My application has a stateful widget which is the profile area, I would like to display an animated icon indicating to the user that is possible to scroll the screen, I want to use the animated icon, how to auto animate an AnimatedIcon as soon the Profile screen loads, thanks.

Obs.: The play_pause is just a placeholder for an animated icon

import 'package:flutter/material.dart';

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

class Profile extends StatefulWidget {
  @override
  ProfileState createState() {
    return ProfileState();
  }
}

class ProfileState extends State<Profile> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: AnimatedIcon(
            progress: AnimationController(
              vsync: this,
              duration: Duration(milliseconds: 400),
              reverseDuration: Duration(milliseconds: 400),
            ),
            icon: AnimatedIcons.play_pause,
          ),
        )
      )
   );
  }
}

Upvotes: 0

Views: 2097

Answers (2)

Mahesh Jamdade
Mahesh Jamdade

Reputation: 20379

you could do that using the animationController

_animationController.forward(); /// to start the animation

You can start your animation after the build method executes by calling it like this.

@override
void initState(){
   super.initState();
   WidgetsBinding.instance.addPostFrameCallback((​_){
     _animationController.forward();
   });
}

Upvotes: 0

Crazy Lazy Cat
Crazy Lazy Cat

Reputation: 15103

You have to create an instance of AnimationController and initialize it on the initState. Then you can start the animation by calling animateTo method.

import 'package:flutter/material.dart';

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

class Profile extends StatefulWidget {
  @override
  ProfileState createState() {
    return ProfileState();
  }
}

class ProfileState extends State<Profile> with TickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 400),
    );
    _animationController.animateTo(1.0);
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: AnimatedIcon(
            progress: _animationController,
            icon: AnimatedIcons.play_pause,
          ),
        ),
      ),
    );
  }
}

Upvotes: 2

Related Questions