1

Между анимацией возникает ошибка. Все работает, но красный экран появляется на мгновение. Далее полный код и скриншот.

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
      ),
     ),
    ),
   ),

   //кнопка
   floatingActionButton: FloatingActionButton(
    onPressed: () { _f1(); },
    child: AnimatedIcon(
     icon: AnimatedIcons.menu_close,
     progress: _animateIcon!,
    ),
    backgroundColor: _animateColor!.value,
    foregroundColor: Colors.white,
   ),

   //расположение кнопки
   floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

   //бар находится только внизу
   bottomNavigationBar: BottomAppBar(
    child: Container(
     height: 50.0,
    ),
    color: Colors.amber,
    shape: const CircularNotchedRectangle(),
    notchMargin: 8.0,
   ),

  );
 }

}

введите сюда описание изображения

введите сюда описание изображения

введите сюда описание изображения

1 ответ 1

1

Сделал то, что написано в сообщении об ошибке: заменил Tween<Color> на ColorTween. Также заменил все банги на late, но это уже не критично.

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;

  late Curve _curve;
  late AnimationController _animationController;
  late Animation<Color?> _animateColor;
  late Animation<double> _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<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),
          ),
        ),
      ),

      //кнопка
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _f1();
        },
        child: AnimatedIcon(
          icon: AnimatedIcons.menu_close,
          progress: _animateIcon,
        ),
        backgroundColor: _animateColor.value,
        foregroundColor: Colors.white,
      ),

      //расположение кнопки
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

      //бар находится только внизу
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 50.0,
        ),
        color: Colors.amber,
        shape: const CircularNotchedRectangle(),
        notchMargin: 8.0,
      ),
    );
  }
}

1
  • Уважаемый Spatz! Огромное Вам спасибо!
    – Sergey
    Commented 16 дек. 2021 в 12:32

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.