CODEWITHSUNDEEP
flutterdartdrawer
Shruti Ramnandan Sharma
Shruti Ramnandan Sharma

Reputation: 4565

How to make top navigation drawer with flutter?

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.

See below image:

enter image description here

The Code I was trying:

 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.

Upvotes: 3

Views: 4061

Answers (4)

Vladimir Demirev
Vladimir Demirev

Reputation: 676

I did something similar using PageRouteBuilder, it is the parent of the DialogBuilder, with animation params, also you can set the dim color etc. Say, in the main widget you have a button:

TextButton(
        child: Text("open drawer"),
        onPressed: () {
          Navigator.of(context).push(_createRoute());
        },
      )

then the route builder with animations etc:

  Route _createRoute() {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => TopDrawer(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        const begin = Offset(0.0, -4.0);
        const end = Offset.zero;
        const curve = Curves.decelerate;
        var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

        return SlideTransition(
          position: tween.animate(animation),
          child: child,
        );
      },
      opaque: false,
      barrierDismissible: true,
      barrierColor: Color.fromRGBO(100, 100, 100, 0.5), //color of the grayed under
      transitionDuration: Duration(milliseconds: 450),
      reverseTransitionDuration: Duration(milliseconds: 450),
    );
  }

And the drawer page it shows:

import 'package:flutter/material.dart';

class TopDrawer extends StatelessWidget {
  const TopDrawer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: MediaQuery.of(context).size.height/2,
          width: MediaQuery.of(context).size.width,
          child: Text("some content here"),
          color: Colors.green,
        ),
      ],
    );
  }
}

Upvotes: 0

Shruti Ramnandan Sharma
Shruti Ramnandan Sharma

Reputation: 4565

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(.....)
       )
    );
  }
}

Upvotes: 3

Vitali
Vitali

Reputation: 864

You can see an example widget BackDrop

I think if you change the position of the top and bottom, everything will work perfectly

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

Upvotes: 1

Guru Prasad mohapatra
Guru Prasad mohapatra

Reputation: 1979

There is a widget BackDrop in flutter to do the functions you want.You need to use backdrop 0.2.7 library.You can get reference from Flutter Backdrop

Upvotes: 0

Related Questions