AnimatedWidget – Flutter Widget Guide By Flutter Agency

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

In this series of Animated Widgets, we have been through AnimatedSize Widget, AnimatedPositioned Widget, AnimatedPositioned Widget, AnimatedModalBarrier Widget so now in this article we will discuss AnimatedWidget in detail.

What is AnimatedWidget?

Animated Widget is a widget that rebuilds when the given Listenable changes value.

AnimatedWidget is most commonly used with Animation objects, which are Listenable, but it can be used with any Listenable, including ChangeNotifier and ValueNotifier.

AnimatedWidget is most useful for widgets that are otherwise stateless. To use it, simply subclass it and implement the build function.

The Default Constructor of it will look like below:

AnimatedWidgetDemo({
  Key key,
  @required Listenable listenable,
});

In Above Constructor all fields marked with @required must not be empty.

Properties:

  • Key key: key controls how one widget replaces another widget in the tree.
  • Listenable listenable: Listenable to which this widget is listening. Commonly an Animation or a ChangeNotifier.

How to use AnimatedWidget in Flutter?

The following code snippet tells us how to implement AnimatedWidget in Flutter.

import 'package:flutter/material.dart';

import 'dart:math' as math;

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: AnimatedWidgetDemo(),
    );
  }
}

class SpinningContainer extends AnimatedWidget {
  const SpinningContainer({Key key, AnimationController controller})
      : super(key: key, listenable: controller);

  Animation<double> get _progress => listenable;

  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      angle: _progress.value * 2.0 * math.pi,
      child: Container(width: 200.0, height: 200.0, color: Colors.green,),
    );
  }
}

class AnimatedWidgetDemo extends StatefulWidget {
  AnimatedWidgetDemo({Key key}) : super(key: key);

  @override
  _AnimatedWidgetDemoState createState() => _AnimatedWidgetDemoState();
}

class _AnimatedWidgetDemoState extends State<AnimatedWidgetDemo>
    with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,
    )..repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    return SpinningContainer(controller: _controller);
  }
}

We will get output like below:

Animated Widget - Flutter Widget Guide By Flutter Agency

AnimatedWidget

Conclusion:

In this article, we have been through What is AnimatedWidget in Flutter along with how to implement it in a Flutter.

Thanks for being with us!!!
Stay tuned for new exciting articles.

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