flutter - Flutter AnimationBuilder 无法与提供者状态管理一起使用

Question

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

“动画框”容器应该是定位小部件的子级，因此是堆栈小部件的子级，因为我希望堆栈小部件中有多个“动画框”。

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

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

发布规范.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),
              ],
            ),
            SizedBox(width: _size.width, 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();
  }
}

标签： flutteranimationprovider