Home>

An error occurs between animations. Everything works, but the red screen appears for a moment. Further full code and screenshot.

main.dart

import 'package: flutter /material.dart';
void main ()= >
 runApp (const MyApp ());
class MyApp extends StatelessWidget {
 const MyApp ({Key? key}): super (key: key);
 @override
 Widget build (BuildContext context) {
  return MaterialApp (
   debugShowCheckedModeBanner: false,
   title: 'Name App',
   theme: ThemeData (
    primarySwatch: Colors.blue,
   ),
   home: const MyHomePage (),
  );
 }
}
class MyHomePage extends StatefulWidget {
 const MyHomePage ({Key? key}): super (key: key);
 @override
 _MyHomePageState createState ()= >
 _MyHomePageState ();
}
class _MyHomePageState extends State <
MyHomePage >
 with
 SingleTickerProviderStateMixin {
 String _str= '1';
 bool _b= false;
 Curve? _curve;
 AnimationController? _animationController;
 Animation <
Color >
? _animateColor;
 Animation <
double >
? _animateIcon;
 @override
 void initState () {
  super.initState ();
  _curve= Curves.easeOut;
  _animationController= AnimationController (
   vsync: this,
   duration: const Duration (milliseconds: 500))
   ..addListener (() {
    setState (() {
    });
   });
  _animateColor= Tween <
Color >
(
   begin: Colors.green,
   end: Colors.lightBlue,
  ) .animate (CurvedAnimation (
   parent: _animationController !,
   curve: Interval (
    0.00,
    1.00,
    curve: _curve!
   ),
  ));
  _animateIcon= Tween <
double >
(
   begin: 0.0,
   end: 1.0
  ) .animate (_animationController!);
 }
 @override
 void dispose () {
  super.dispose ();
  _animationController! .dispose ();
 }
 void _f1 () {
  setState (() {
   if (_b) {
    _str= '1';
    _b= false;
    _animationController! .reverse ();
   } else {
    _str= '2';
    _b= true;
    _animationController! .forward ();
   }
  });
 }
 @override
 Widget build (BuildContext context) {
  return Scaffold (
   appBar: AppBar (
    title: const Text ('Name Page'),
   ),
   body: SafeArea (
    child: Center (
     child: Text (
      _str,
      style: const TextStyle (
       fontSize: 36.0,
       color: Colors.pink
      ),
     ),
    ),
   ),
   //button
   floatingActionButton: FloatingActionButton (
    onPressed: () {_f1 (); },
    child: AnimatedIcon (
     icon: AnimatedIcons.menu_close,
     progress: _animateIcon !,
    ),
    backgroundColor: _animateColor! .value,
    foregroundColor: Colors.white,
   ),
   //button location
   floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
   //the bar is only at the bottom
   bottomNavigationBar: BottomAppBar (
    child: Container (
     height: 50.0,
    ),
    color: Colors.amber,
    shape: const CircularNotchedRectangle (),
    notchMargin: 8.0,
   ),
  );
 }
}
  • Answer # 1

    Did what the error message says: replacedTween < Color >on theColorTween... Also replaced all bangs withlate, but this is no longer critical.

    import 'package: flutter /material.dart';
    void main ()= &gt;
     runApp (const MyApp ());
    class MyApp extends StatelessWidget {
      const MyApp ({Key? key}): super (key: key);
      @override
      Widget build (BuildContext context) {
        return MaterialApp (
          debugShowCheckedModeBanner: false,
          title: 'Name App',
          theme: ThemeData (
            primarySwatch: Colors.blue,
          ),
          home: const MyHomePage (),
        );
      }
    }
    class MyHomePage extends StatefulWidget {
      const MyHomePage ({Key? key}): super (key: key);
      @override
      _MyHomePageState createState ()= &gt;
     _MyHomePageState ();
    }
    class _MyHomePageState extends State &lt;
    MyHomePage &gt;
     with SingleTickerProviderStateMixin {
      String _str= '1';
      bool _b= false;
      late Curve _curve;
      late AnimationController _animationController;
      late Animation &lt;
    Color? &gt;
     _animateColor;
      late Animation &lt;
    double &gt;
     _animateIcon;
      @override
      void initState () {
        super.initState ();
        _curve= Curves.easeOut;
        _animationController=
            AnimationController (vsync: this, duration: const Duration (milliseconds: 500))
              ..addListener (() {
                setState (() {});
              });
        _animateColor= ColorTween (
          begin: Colors.green,
          end: Colors.lightBlue,
        ) .animate (CurvedAnimation (
          parent: _animationController,
          curve: Interval (0.00, 1.00, curve: _curve),
        ));
        _animateIcon= Tween &lt;
    double &gt;
    (begin: 0.0, end: 1.0) .animate (_animationController);
      }
      @override
      void dispose () {
        super.dispose ();
        _animationController.dispose ();
      }
      void _f1 () {
        setState (() {
          if (_b) {
            _str= '1';
            _b= false;
            _animationController.reverse ();
          } else {
            _str= '2';
            _b= true;
            _animationController.forward ();
          }
        });
      }
      @override
      Widget build (BuildContext context) {
        return Scaffold (
          appBar: AppBar (
            title: const Text ('Name Page'),
          ),
          body: SafeArea (
            child: Center (
              child: Text (
                _str,
                style: const TextStyle (fontSize: 36.0, color: Colors.pink),
              ),
            ),
          ),
          //button
          floatingActionButton: FloatingActionButton (
            onPressed: () {
              _f1 ();
            },
            child: AnimatedIcon (
              icon: AnimatedIcons.menu_close,
              progress: _animateIcon,
            ),
            backgroundColor: _animateColor.value,
            foregroundColor: Colors.white,
          ),
          //button location
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
          //the bar is only at the bottom
          bottomNavigationBar: BottomAppBar (
            child: Container (
              height: 50.0,
            ),
            color: Colors.amber,
            shape: const CircularNotchedRectangle (),
            notchMargin: 8.0,
          ),
        );
      }
    }
    

    Dear Spatz! Thank you very much!

    Sergey2021-12-17 21:21:15
  • Answer # 2

    Did what the error message says: replacedTween < Color >on theColorTween... Also replaced all bangs withlate, but this is no longer critical.

    import 'package: flutter /material.dart';
    void main ()= &gt;
     runApp (const MyApp ());
    class MyApp extends StatelessWidget {
      const MyApp ({Key? key}): super (key: key);
      @override
      Widget build (BuildContext context) {
        return MaterialApp (
          debugShowCheckedModeBanner: false,
          title: 'Name App',
          theme: ThemeData (
            primarySwatch: Colors.blue,
          ),
          home: const MyHomePage (),
        );
      }
    }
    class MyHomePage extends StatefulWidget {
      const MyHomePage ({Key? key}): super (key: key);
      @override
      _MyHomePageState createState ()= &gt;
     _MyHomePageState ();
    }
    class _MyHomePageState extends State &lt;
    MyHomePage &gt;
     with SingleTickerProviderStateMixin {
      String _str= '1';
      bool _b= false;
      late Curve _curve;
      late AnimationController _animationController;
      late Animation &lt;
    Color? &gt;
     _animateColor;
      late Animation &lt;
    double &gt;
     _animateIcon;
      @override
      void initState () {
        super.initState ();
        _curve= Curves.easeOut;
        _animationController=
            AnimationController (vsync: this, duration: const Duration (milliseconds: 500))
              ..addListener (() {
                setState (() {});
              });
        _animateColor= ColorTween (
          begin: Colors.green,
          end: Colors.lightBlue,
        ) .animate (CurvedAnimation (
          parent: _animationController,
          curve: Interval (0.00, 1.00, curve: _curve),
        ));
        _animateIcon= Tween &lt;
    double &gt;
    (begin: 0.0, end: 1.0) .animate (_animationController);
      }
      @override
      void dispose () {
        super.dispose ();
        _animationController.dispose ();
      }
      void _f1 () {
        setState (() {
          if (_b) {
            _str= '1';
            _b= false;
            _animationController.reverse ();
          } else {
            _str= '2';
            _b= true;
            _animationController.forward ();
          }
        });
      }
      @override
      Widget build (BuildContext context) {
        return Scaffold (
          appBar: AppBar (
            title: const Text ('Name Page'),
          ),
          body: SafeArea (
            child: Center (
              child: Text (
                _str,
                style: const TextStyle (fontSize: 36.0, color: Colors.pink),
              ),
            ),
          ),
          //button
          floatingActionButton: FloatingActionButton (
            onPressed: () {
              _f1 ();
            },
            child: AnimatedIcon (
              icon: AnimatedIcons.menu_close,
              progress: _animateIcon,
            ),
            backgroundColor: _animateColor.value,
            foregroundColor: Colors.white,
          ),
          //button location
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
          //the bar is only at the bottom
          bottomNavigationBar: BottomAppBar (
            child: Container (
              height: 50.0,
            ),
            color: Colors.amber,
            shape: const CircularNotchedRectangle (),
            notchMargin: 8.0,
          ),
        );
      }
    }
    

    Dear Spatz! Thank you very much!

    Sergey2021-12-17 21:21:15