放大小部件动画的大小

Question

bounty到期在5天内。该问题的答案有资格获得+ 200声望赏金。DolDurma正在寻找来自信誉良好的来源的答案。

[在Flutter中，您假设我有一个简单的Container，我想将其大小更改为最大，例如，在此简单的屏幕截图中，我想将1部分中的顶部容器更改为一个顶部容器在2节中并且1节中的顶部容器在放大后应仅表现为100.0

B部分和1部分中的容器2在相同的轴上，当容器A的尺寸将被调整到最大时没有更改位置

例如，这就是我想要的

我不确定我可以使用哪一个动画来具有此功能

此代码有效，但这不是我想要的。

我想让可拖动的底部薄片在底部薄片到达屏幕顶部时具有改变的边框半径，例如粘贴样本视频屏幕和appbar内部的fade0n / out小部件，该小部件在底部薄片顶部内部，在底部薄片顶部可见到达顶部时隐藏，或当底部页没有最大尺寸时隐藏

import 'package:flutter/material.dart';

void main()=>runApp(SizeUp());

class SizeUp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'test',
      home: SizeUpAnim(),
    );
  }
}

class SizeUpAnim extends StatefulWidget {
  @override
  State<StatefulWidget> createState() =>_SizeUpAnim();
}

class _SizeUpAnim extends State with SingleTickerProviderStateMixin {
  AnimationController _controller;
  // ignore: constant_identifier_names
  static const _PANEL_HEADER_HEIGHT = 32.0;
  bool get _isPanelVisible {
    final AnimationStatus status = _controller.status;
    return status == AnimationStatus.completed ||
        status == AnimationStatus.forward;
  }

  @override
  void initState() {
    super.initState();
    _controller =  AnimationController(
        duration: const Duration(milliseconds: 100), value: 1.0, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:  AppBar(
        elevation: 8.0,
        title:  const Text("Step4"),
        leading:  IconButton(
          onPressed: () {
            _controller.fling(velocity: _isPanelVisible ? -1.0 : 1.0);
          },
          icon:  AnimatedIcon(
            icon: AnimatedIcons.close_menu,
            progress: _controller.view,
          ),
        ),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: LayoutBuilder(
              builder: _buildStack,
            ),
          ),
          Text('aaa'),
        ],
      ),
    );
  }


  Animation<RelativeRect> _getPanelAnimation(BoxConstraints constraints) {
    final double height = constraints.biggest.height;
    final double top = height - _PANEL_HEADER_HEIGHT;
    const double bottom = -_PANEL_HEADER_HEIGHT;
    return  RelativeRectTween(
      begin:  RelativeRect.fromLTRB(0.0, top, 0.0, bottom),
      end:  const RelativeRect.fromLTRB(0.0, 0.0, 0.0, 0.0),
    ).animate( CurvedAnimation(parent: _controller, curve: Curves.linear));
  }

  Widget _buildStack(BuildContext context, BoxConstraints constraints) {
    final Animation<RelativeRect> animation = _getPanelAnimation(constraints);
    final ThemeData theme = Theme.of(context);
    return  Container(
      color: theme.primaryColor,
      child:  Stack(
        children: <Widget>[
           const Center(
            child:  Text("base"),
          ),
           PositionedTransition(
            rect: animation,
            child:  Material(
              borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(16.0),
                  topRight: Radius.circular(16.0)),
              elevation: 12.0,
              child:  Container(
                height: _PANEL_HEADER_HEIGHT,
                child:  const Center(child:  Text("panel")),
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}

Answer 1

我认为您可以尝试此库，sliding_sheet

Answer 2