Question 169406 in Flutter Question posted in
The official Flutter documentation can be found here.

Can a Flutter animation controller repeat a fading animation?

so i want to make something similar to shimmer but it’s just fading and not sliding fading like from this package https://pub.dev/packages/fade_shimmer but since it doesn’t have child property so i want to make my own animation, i just want to create a container that has animation of blinking effect i think it only chnage the opacity but i don’t know. here is my code

  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1200),
    );

    _animation = Tween<double>(begin: 1, end: 0.3).animate(_animationController)
      ..addListener(() {
        _animationController
            .forward()
            .then((value) => _animationController.reverse());
        setState(() {});
        log('animation value === ${_animation.value}');
      });
  }

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

Container(
      height: widget.height,
      width: widget.width,
      clipBehavior: Clip.antiAlias,
      margin: EdgeInsets.fromLTRB(widget.marginLeft ?? 0, widget.marginTop ?? 0,
          widget.marginRight ?? 0, widget.marginBottom ?? 0),
      decoration: BoxDecoration(
        color: widget.altColor
            ? MyThemes.colorBrown
            : MyThemes.colorLightBrown.withOpacity(_animation.value),
        borderRadius: widget.radius != null
            ? BorderRadius.all(
                Radius.circular(widget.radius ?? 0),
              )
            : BorderRadius.vertical(
                bottom: Radius.circular(widget.radiusBottom ?? 0),
                top: Radius.circular(widget.radiusTop ?? 0),
              ),
      ),
      child: widget.child,
    );

enter image description here

Tags:

2

Answers


  1. 0

    Here is what I could produce the blinking effect. You may change the duration to suit your need.

    Link to the output

    class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {

  late AnimationController _animationController;
  late Animation<double> _animation;

  Timer? timer;

    @override
  void initState() {
    super.initState();
    _animationController = AnimationController(vsync: this, duration: const Duration(seconds: 2));
    _animation = Tween<double>(begin: 0, end: 1).animate(CurvedAnimation(
      parent: _animationController,
      curve: Interval(0, 0.6, curve: Curves.easeIn),
    ))
      ..addListener(() async {
        if (_animationController.isCompleted) timer = Timer(const Duration(seconds: 0), () => mounted ? _animationController.forward(from: 0) : null);
        setState(() {});

      });
    _animationController.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        margin: const EdgeInsets.all(12),
        height: 200,
        width: 200,
        clipBehavior: Clip.antiAlias,
        decoration: BoxDecoration(
          color: Colors.white.withOpacity(_animation.value),
        ),
        child: Container(
          child: const Text('My Animation'),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    try this code.

      @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1000),
    );

    _animation = Tween<double>(begin: 0.15, end: 1).animate(
        CurvedAnimation(parent: _animationController, curve: Curves.easeIn))
        ..addListener(() {
          if(_animationController.isCompleted){
            _animationController.repeat();
          }
        });
    _animationController.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: const Text('Demo'),
        ),
        body: Center(
            child: AnimatedBuilder(
          animation: _animationController,
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
            child: const Center(
              child: Text('Whee!'),
            ),
          ),
          builder: (BuildContext context, Widget? child) {
            return Opacity(
              opacity: _animation.value,
              child: child,
            );
          },
        ) // This trailing comma makes auto-formatting nicer for build methods.
            ));
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search