AnimatedWidgetBaseState Widget – Flutter Widget Guide By Flutter Agency

· 3 min read
AnimatedWidgetBaseState Widget - Flutter Widget Guide By Flutter Agency
AnimatedWidgetBaseState Widget - Flutter Widget Guide By Flutter Agency

Earlier we have been through AnimatedWidget Which is most commonly used with Animation objects, which are Listenable, but it can be used with any Listenable, including ChangeNotifier and ValueNotifier. So now this is the time for something exciting new article. In this article, we will go through AnimatedWidgetBaseState Widget with a detailed article on it.

Let’s get started with it.

What is AnimatedWidgetBaseState Widget?

AnimatedWidgetBaseState Widget is a base class for widgets with implicit animations that need to rebuild their widget tree as the animation runs.

This class calls build each frame that the animation tickets. For a variant that does not rebuild each frame, consider subclassing ImplicitlyAnimatedWidgetState directly.

Subclasses must implement the for EachTween method to allow AnimatedWidgetBaseState to iterate through the subclasses’ widget’s fields and animate them.

The default constructor for it will look like below:

AnimatedWidgetBaseStateExample({
  Key key,
}) : super(key: key);

Properties:

  • Key key:  It controls how one widget replaces another widget in the tree. A key is an identifier for Widgets, Elements, and SemanticsNodes. A new widget will only be used to update an existing element if its key is the same as the key of the current widget associated with the element.

Example

Consider a Stateful Widget that makes use of AnimatedWidgetBaseState Widget.

import 'package:flutter/material.dart';

void main() => runApp(
  MyHomePage(),
);


class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({
    Key key,
    this.title,
  }) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: Text("Animated Count example"),
      ),
      body: new Center(
        child: new AnimatedCount(
          count: _count,
          curve: Curves.ease,
          duration: Duration(seconds: 1),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _count += 100;
          });
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

class AnimatedCount extends ImplicitlyAnimatedWidget {
  final int count;

  AnimatedCount({
      Key key,
      @required this.count,
      @required Duration duration,
      Curve curve = Curves.linear,
})
      : super(duration: duration, curve: curve, key: key);

  @override
  ImplicitlyAnimatedWidgetState<ImplicitlyAnimatedWidget> createState() =>
      _AnimatedCountState();
}

class _AnimatedCountState extends AnimatedWidgetBaseState<AnimatedCount> {
  IntTween _count;

  @override
  Widget build(BuildContext context) {
    return new Text(_count.evaluate(animation).toString());
  }

  @override
  void forEachTween(TweenVisitor visitor) {
    _count = visitor(
        _count, widget.count, (dynamic value) => new IntTween(begin: value));
  }
}

Conclusion:

In this article, we dive into What is AnimatedWidgetBaseState Widget in Flutter along with how to implement it in a Flutter.

Thanks for being with us.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply