Flutter AnimationBuilder 不适用于提供者状态管理

如何解决Flutter AnimationBuilder 不适用于提供者状态管理

当用户点击“点击以激活动画”按钮时，我正在尝试使用提供程序状态管理通过 AnimationBuilder 为绿色“动画框”容器设置动画。

'Animated Box' 容器应该是 Positioned Widget 的子代，因此是 Stack Widget 的子代，因为我想在 Stack Widget 中有多个 'Animated Box'。

下面给出的示例代码没有按预期工作。

有人可以提出解决方案吗？

pubspec.yaml

name: sampleapp
description: A new Flutter project.

publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  Flutter:
    sdk: Flutter

  cupertino_icons: ^1.0.0
  provider: ^5.0.0

dev_dependencies:
  Flutter_test:
    sdk: Flutter


Flutter:
  uses-material-design: true

main.dart

import 'package:Flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => MessageModel()),],child: MyApp(),),);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',home: MyHomePage(),);
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size _size = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Provider Animation'),body: Center(
        child: Column(
          children: [
            Stack(
              children: <Widget>[
                TweenAnimationBuilder(
                  tween: Tween(
                    begin: context.watch<MessageModel>().getMessageBeginTween,end: context.watch<MessageModel>().getMessageEndTween,duration: Duration(milliseconds: 500),curve: Curves.elasticOut,builder: (_,double value,__) {
                    return Positioned(
                      left: _size.width * 0.5 - _size.width * 0.6 * 0.5,top: 100,child: Container(
                        width: _size.width * 0.6,height: _size.height * 0.1,color: Colors.green,child: Center(child: Text('Animated Box')),);
                  },SizedBox(width: _size.width,height: _size.height * 0.4),height: _size.height * 0.1),InkWell(
              onTap: () {
                context.read<MessageModel>().updateGridMessageTween(
                    isVisible ? 50 : 10,isVisible ? 10 : 50);
                print('1 $isVisible');
                isVisible = !isVisible;
                print('2 $isVisible');
              },child: Container(
                width: _size.width * 0.6,height: _size.height * 0.05,color: Colors.grey,child: Center(child: Text('Tap to Activate the Animation')),)
          ],);
  }
}

bool isVisible = true;

class MessageModel with ChangeNotifier {
  double _tweenBegin = 10.0;
  double _tweenEnd = 10.0;

  double get getMessageBeginTween => _tweenBegin;
  double get getMessageEndTween => _tweenEnd;

  void updateGridMessageTween(double begin,double end) {
    print('3 $isVisible');
    _tweenBegin = begin;
    _tweenEnd = end;
    notifyListeners();
  }
}