Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to make the navigation drawer always open in Flutter?

Tags:

flutter

I want the drawer to always open in screen so the user do not have to slide the screen from left to right. I found many question regarding this issue but I could not find it in Dart/Flutter.

This is the solution from @aziza on how to change the content of the Scaffold. body content upon user click on the Drawer but I want it to always open.

Flutter Drawer Widget - change Scaffold.body content

Flutter Drawer Widget - change Scaffold.body content

like image 873
Nur Haslina Avatar asked Aug 22 '19 02:08

Nur Haslina


2 Answers

You may try this :

import 'package:flutter/material.dart';

class SideMenuScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Row(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Flexible(
                  child: ListView(
                    children: <Widget>[
                      ListTile(title: Text("Menu A")),
                      ListTile(title: Text("Menu B")),
                      ListTile(title: Text("Menu C")),
                      ListTile(title: Text("Menu D")),
                      ListTile(title: Text("Menu E")),
                      ListTile(title: Text("Menu F")),
                      ListTile(title: Text("Menu G")),
                      ListTile(title: Text("Menu H")),
                      ListTile(title: Text("Menu I")),
                      ListTile(title: Text("Menu J")),
                      ListTile(title: Text("Menu K")),
                      ListTile(title: Text("Menu L")),
                      ListTile(title: Text("Menu M")),
                    ],
                  ),
                ),
                Expanded(
                  child: Container(
                    child: Center(child: Text('Content')),
                    color: Colors.black26,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Demo

We can improve to more be interactive by PageView : Github Repo

Flexible(
  child: StaticDrawer(),
),
Expanded(
  child: PageView(
    children: <Widget>[
      MainContent(),
      MainContent(),
      MainContent(),
    ],
  ),
),

later you will find this ..

enter image description here

like image 193
ejabu Avatar answered Sep 25 '22 14:09

ejabu


I think my package suits your needs. I designed this originally for a desktop flutter app but decided to.make a package out of it.

https://pub.dev/packages/side_navigation

In the README you can also find an example and some pictures to showcase.

Cheers!

like image 20
jksevend Avatar answered Sep 22 '22 14:09

jksevend