Learning Flutter Widgets, Widget 4 – Animated Container

Flutter AnimatedContainer class

Animated version of Container that gradually changes its values over a period of time.

The AnimatedContainer will automatically animate between the old and new values of properties when they change using the provided curve and duration. Properties that are null are not animated. Its child and descendants are not animated.

This class is useful for generating simple implicit transitions between different parameters to Container with its internal AnimationController. For more complex animations, you’ll likely want to use a subclass of AnimatedWidget such as the DecoratedBoxTransition or use your own AnimationController.

Example Source Code

// Flutter code sample for AnimatedContainer

// The following example (depicted above) transitions an AnimatedContainer
// between two states. It adjusts the [height], [width], [color], and
// [alignment] properties when tapped.

import 'package:flutter/material.dart';

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: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatefulWidget(),
      ),
    );
  }
}

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

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selected = !selected;
        });
      },
      child: Center(
        child: AnimatedContainer(
          width: selected ? 200.0 : 100.0,
          height: selected ? 100.0 : 200.0,
          color: selected ? Colors.red : Colors.blue,
          alignment:
              selected ? Alignment.center : AlignmentDirectional.topCenter,
          duration: Duration(seconds: 2),
          curve: Curves.fastOutSlowIn,
          child: FlutterLogo(size: 75),
        ),
      ),
    );
  }
}

See also:

Constructor

AnimatedContainer(
      {
        Key key, 
        AlignmentGeometry alignment, 
        EdgeInsetsGeometry padding, 
        Color color, 
        Decoration decoration, 
        Decoration foregroundDecoration, 
        double width, 
        double height, 
        BoxConstraints constraints, 
        EdgeInsetsGeometry margin, 
        Matrix4 transform, 
        Widget child, 
        Curve curve: Curves.linear, 
        @required Duration duration, 
        VoidCallback onEnd
      }
    )
Creates a container that animates its parameters implicitly. [...]

Properties

alignment → AlignmentGeometry
Align the child within the container. [...]
final

child → Widget
The child contained by the container. [...]
final

constraints → BoxConstraints
Additional constraints to apply to the child. [...]
final

curve → Curve
The curve to apply when animating the parameters of this container.
final, inherited

decoration → Decoration
The decoration to paint behind the child[...]
final

duration → Duration
The duration over which to animate the parameters of this container.
final, inherited

foregroundDecoration → Decoration
The decoration to paint in front of the child.
final

hashCode → int
The hash code for this object. [...]
@nonVirtual, read-only, inherited

key → Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited

margin → EdgeInsetsGeometry
Empty space to surround the decoration and child.
final

onEnd → VoidCallback
Called every time an animation completes. [...]
final, inherited

padding → EdgeInsetsGeometry
Empty space to inscribe inside the decoration. The child, if any, is placed inside this padding.
final

runtimeType → Type
A representation of the runtime type of the object.
read-only, inherited

transform → Matrix4
The transformation matrix to apply before painting the container.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree. [...]
inherited

createState() → _AnimatedContainerState
Creates the mutable state for this widget at a given location in the tree. [...]
override

debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited

debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
override

noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited

toDiagnosticsNode({String name, DiagnosticsTreeStyle style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep[...]
inherited

toString({DiagnosticLevel minLevel: DiagnosticLevel.info}) → String
Returns a string representation of this object.
inherited

toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug}) → String
Returns a string representation of this node and its descendants. [...]
inherited

toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object. [...]
inherited

toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator. [...]
@nonVirtual, inherited

Source Website: api.flutter.dev

https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html

Er. Sandeep Singh Sidhu

I am the founder of CallStem Software LLP and Stem Technocrats IT Services, Blood Wallet, Apni Boli, and of course flutterfumes.com.
I am very passionate about technology and learning new things. I believe sharing knowledge is the most powerful way to learn. One who is an active learner is always an active contributor too because whatever you learn, you should implement.

I also love to write poetry, and talking to myself is my favorite all-time activity, no matter it is a program logic, emotional poetry, or a social issue.

Previous Post
Next Post

Leave a Reply

Your email address will not be published.

Hey, wait! If You don't want to miss Flutter Updates!

Please join our Newsletter List and enjoy with daily Flutter Updates