Flutter animation weird behavior

Question

I am currently encountering a weird problem with animation in Flutter. Here is the code:

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  double age = 0.0;
  int selectedYear;

  AnimationController animationController;
  Animation animation;

  void _showPicker() {
    showDatePicker(
      context: context, 
      initialDate: DateTime.now(), 
      firstDate: DateTime(1900), 
      lastDate: DateTime.now(),
    ).then((dt) {
      setState(() {
        selectedYear = dt.year;
        age = (DateTime.now().year - selectedYear).toDouble();

        animation = Tween<double>(begin: animation.value, end: age).animate(CurvedAnimation(
          parent: animationController, 
          curve: Curves.fastOutSlowIn,
        ));

        animationController.forward();
      });
    });
  }

  @override
  void initState() {
    animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 1500));
    animation = animationController;
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Date Picker"),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            OutlineButton(
              child: Text(
                selectedYear == null ? "Choose your date of birth" : "$selectedYear",
                style: TextStyle(
                  color: Colors.brown,
                  fontWeight: FontWeight.bold,
                ),
              ),
              color: Colors.white,
              borderSide: BorderSide(
                color: Colors.brown,
                width: 3.0,
              ),
              onPressed: _showPicker,
            ),
            Padding(
              padding: const EdgeInsets.all(20.0),
            ),
            Text(
              "Your age is ${animation.value.toStringAsFixed(0)}",
              style: TextStyle(
                color: Colors.brown,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                fontSize: 30.0,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Basically it lets an user to choose a date from Date Picker and it will animate their age in the screen. But in fact the animation was idle and didn't work.

Edit: Added widget specific code in order for anyone to be able to help

Answer 1

By the use of an AnimationController it is evident that you are trying to build what is called a Custom Explicit Animation .

What you have to understand is, in Flutter, not all widgets can automatically listen to changes on an Animation<double> variable.

So, while building Custom Explicit Animations , you wither need to use an AnimatedBuilder or the AnimatedWidget .

So in your code, just wrap the Text widget that you want to animate inside an AnimatedBuilder , like this,

AnimatedBuilder(
    animation: animation,
    builder: (_, __) {
        return Text(
            "Your age is ${animation.value.toStringAsFixed(0)}",
            style: TextStyle(
                color: Colors.brown,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                fontSize: 30.0,
             ),
         );
     }
),

Now you should be able to animate your Text Widget.

For more info on Animations in Flutter. Refer to this Video or this Article