如何使顶部导航抽屉有抖动？

Question

我正在尝试打开导航抽屉，如底部工作表，在appBar按钮上单击。我浏览了它，但找不到任何解决方案。

请参见下图：

我正在尝试的代码：

 return Scaffold(
      backgroundColor: Colors.transparent,
      body: Container(
        height: MediaQuery.of(context).size.height/2,
        //constraints: BoxConstraints.expand(),
        decoration: BoxDecoration(
          color: Color.fromARGB(255, 255, 255, 255),
        ),
      )
    );

但是背景为黑色，无法看到上一页的局部视图。

Answer 1

在Flutter中有一个小部件BackDrop来执行所需的功能。您需要使用backdrop 0.2.7库。您可以从Flutter Backdrop中获取引用

Answer 2

您可以看到示例小部件BackDrop

我想如果您更改顶部和底部的位置，一切将正常运行

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

Answer 3

[最后我用SlideTransition()小部件添加了动画。因为我没有任何完美的解决方案。

 new IconButton(
    icon: new Image.asset('assets/images/ui-16px-3-funnel-40.png'),
    onPressed: () {        
     showDialog(
      context: context,
      child: FiltersPage()
     );
   },
 ),





import 'dart:math';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:geolocator/geolocator.dart';
import 'package:project/style/style.dart';
//import 'package:backdrop/backdrop.dart';
import 'package:flutter_xlider/flutter_xlider.dart';
class FiltersPage extends StatefulWidget {
  @override
  _FiltersPageState createState() => _FiltersPageState();
}

class _FiltersPageState extends State<FiltersPage> with SingleTickerProviderStateMixin{


  @override
  void initState() {
    controller =  AnimationController(vsync: this, duration: Duration(milliseconds: 450)); 
    slideAnimation = Tween<Offset>(begin: Offset(0.0, -4.0), end: Offset.zero)
      .animate(CurvedAnimation(parent: controller, curve: Curves.decelerate));
    controller.addListener(() {
      setState(() {});
    });
    controller.forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: slideAnimation,
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar:AppBar(.......)
        body: Container(
        ........
       )
    );
  }
}