如何使顶部导航抽屉变得扑朔迷离? [英] How to make top navigation drawer with flutter?

问题描述

我正在尝试打开导航栏(如底页)，在appBar按钮上单击. 我浏览了它，但找不到任何解决方案.

I'm trying to open a navigation drawer like bottom sheet, on appBar button click . I browsed it for but couldn't get any solution.

请参见下图:

我正在尝试的代码:

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

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

but background is black not able to see partial view of previous page.

推荐答案

最后，我添加了带有SlideTransition()小部件的动画.因为我没有得到任何完美的解决方案，但它的工作原理很完美&我对此非常满意:).

At last I added animation with SlideTransition() Widget . Because I didn't get any perfect solution for it but it's working perfect & i'm very happy with it :).

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





import 'package:flutter/material.dart';

class FiltersPage extends StatefulWidget {
  @override
  _FiltersPageState createState() => _FiltersPageState();
}

class _FiltersPageState extends State<FiltersPage> with SingleTickerProviderStateMixin{

  AnimationController controller;
  Animation<Offset> slideAnimation;

  @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(
        padding: const EdgeInsets.all(13.0),
          height: MediaQuery.of(context).size.height/2.7,
          width: MediaQuery.of(context).size.width,
          decoration: BoxDecoration(
            color: Color.fromARGB(255, 255, 255, 255),
          ),
         child:Column(.....)
       )
    );
  }
}

这篇关于如何使顶部导航抽屉变得扑朔迷离?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！