Home>

flutter : an error occurs between animations

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,
   ),
  );
 }
}
flutter dart
  • 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