Question 191458 in Flutter Question posted in
The official Flutter documentation can be found here.

doubts on Navigation Drawer in flutter

I have created a Navigation drawer and it doesn’t pop up from the right side, it pops from the left side. i want my navigation drawer to pop up from the right side of my screen. could somebody help?
(i have given the code and images below)

import 'package:flutter/material.dart';
import 'package:invoiceapp/Home/navigationdrawe/masterspage.dart';
import 'package:invoiceapp/Home/navigationdrawe/productspage.dart';
import 'package:invoiceapp/Home/navigationdrawe/profilepic.dart';
import 'package:invoiceapp/Home/navigationdrawe/reportspage.dart';
import 'package:invoiceapp/Home/navigationdrawe/salespage.dart';
import 'package:invoiceapp/Home/navigationdrawe/settingspage.dart';
import 'package:invoiceapp/Home/navigationdrawe/users.dart';

class NavigationDrawerWidget extends StatelessWidget {
final padding =EdgeInsets.symmetric(horizontal: 20);

@override
Widget build(BuildContext context) {
final name = 'Super Admin';
final email = '[email protected]';
final urlImage =
'https://unsplash.com/photos/2LowviVHZ-E';

return Drawer(
child: Material(
color: Colors.white,
child: ListView(
children: <Widget>[
buildHeader(
urlImage: urlImage,
name: name,
email: email,
onClicked:  () => Navigator.of(context).push(MaterialPageRoute(
builder: (context) => Profilepic(
name : 'Super Admin',
urlImage: urlImage,
),
),
),),
const SizedBox(height: 24,),
const Divider(color: Colors.black,thickness: 2.5),
const SizedBox(height: 24),
Container(
padding: padding,
child: Column(
children: [
const SizedBox(height: 48),
buildMenuItem(
text: 'Sales',
onClicked: () => selectedItem(context, 0),
),
const SizedBox(height: 16),
buildMenuItem(
text: 'Products',
onClicked: () => selectedItem(context, 1),
),
const SizedBox(height: 16),
buildMenuItem(
text: 'Masters',
onClicked: () => selectedItem(context, 2),
),
const SizedBox(height: 16),
buildMenuItem(
text: 'Reports',
onClicked: () => selectedItem(context, 3),
),
const SizedBox(height: 16),
buildMenuItem(
text: 'Settings',
onClicked: () => selectedItem(context, 4),
),
const SizedBox(height: 16),
buildMenuItem(
text: 'Users',
onClicked: () => selectedItem(context, 5),
),
],
),
),
],
),
),
);
}

Widget buildHeader({
required String urlImage,
required String name,
required String email,
required VoidCallback onClicked,
}) =>

InkWell(
onTap: onClicked,
child: Container(
padding: padding.add(EdgeInsets.symmetric(vertical: 40)),
child: Row(
children: [
CircleAvatar(radius: 30, backgroundImage: NetworkImage(urlImage)),
SizedBox(width: 20,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: TextStyle(fontSize: 20, color: Colors.black),
),

const SizedBox(height: 4,),
Text(
email,
style: TextStyle(fontSize: 14,color: Colors.black),
),
],
),
],
),
),
);

Widget buildMenuItem({
required String text,
VoidCallback? onClicked,
}){
final color = Colors.indigo;

final hoverColor = Colors.white70;
return ListTile(
title: Text(text, style: TextStyle(color: color),),
hoverColor: hoverColor,
onTap: onClicked,
);
}
void selectedItem(BuildContext context, int index){
switch (index) {
case 0:
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => Salespage(),
));
break;
case 1:
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => Productspage(),
));
break;
case 2:
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => Masterspage(),
));
break;
case 3:
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => Reportspage(),
));
break;
case 4:
 Navigator.of(context).push(MaterialPageRoute(
builder: (context) => Settingspage(),
));
break;
case 5:
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => Userspage(),
));
break;
} 
}
}

this is the result i get,
this is how i wanted, to pop up from right,

Tags:

2

Answers


  1. 0

    You should be wrapping your app view in a Scaffold Widget, which has 2 fields a drawer and endDrawer, drawer will be on left and endDrawer will be on right.

    Login or Signup to reply.
  2. 0

    You can refer to the below code:

      class NavigationDrawerWidget extends StatelessWidget {
  const NavigationDrawerWidget({super.key});

  final padding = const EdgeInsets.symmetric(horizontal: 20);
  final name = 'Super Admin';
  final email = '[email protected]';
  final urlImage = 'https://unsplash.com/photos/2LowviVHZ-E';

  @override
  Widget build(BuildContext context) {
    return NavigationDrawer(
        backgroundColor: Colors.white,
        indicatorColor: Colors.red,
        children: [
          Column(
            children: [
              buildHeader(
                urlImage: urlImage,
                name: name,
                email: email,
                onClicked: () => Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => Container(),
                  ),
                ),
              ),
              const SizedBox(
                height: 24,
              ),
              const Divider(color: Colors.black, thickness: 2.5),
              const SizedBox(height: 24),
              Container(
                padding: padding,
                child: Column(
                  children: [
                    const SizedBox(height: 48),
                    _buildMenuItem(
                      text: 'Sales',
                      onClicked: () => _selectedItem(context, 0),
                    ),
                    const SizedBox(height: 16),
                    _buildMenuItem(
                      text: 'Products',
                      onClicked: () => _selectedItem(context, 1),
                    ),
                    const SizedBox(height: 16),
                    _buildMenuItem(
                      text: 'Masters',
                      onClicked: () => _selectedItem(context, 2),
                    ),
                    const SizedBox(height: 16),
                    _buildMenuItem(
                      text: 'Reports',
                      onClicked: () => _selectedItem(context, 3),
                    ),
                    const SizedBox(height: 16),
                    _buildMenuItem(
                      text: 'Settings',
                      onClicked: () => _selectedItem(context, 4),
                    ),
                    const SizedBox(height: 16),
                    _buildMenuItem(
                      text: 'Users',
                      onClicked: () => _selectedItem(context, 5),
                    ),
                  ],
                ),
              ),
            ],
          )
        ]);
  }

  Widget buildHeader({
    required String urlImage,
    required String name,
    required String email,
    required VoidCallback onClicked,
  }) =>
      InkWell(
        onTap: onClicked,
        child: Container(
          padding: padding.add(const EdgeInsets.symmetric(vertical: 40)),
          child: Row(
            children: [
              CircleAvatar(radius: 30, backgroundImage: NetworkImage(urlImage)),
              const SizedBox(
                width: 20,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    name,
                    style: const TextStyle(fontSize: 20, color: Colors.black),
                  ),
                  const SizedBox(
                    height: 4,
                  ),
                  Text(
                    email,
                    style: const TextStyle(fontSize: 14, color: Colors.black),
                  ),
                ],
              ),
            ],
          ),
        ),
      );

  Widget _buildMenuItem({
    required String text,
    VoidCallback? onClicked,
  }) {
    const color = Colors.indigo;
    const hoverColor = Colors.white70;
    return ListTile(
      title: Text(
        text,
        style: const TextStyle(color: color),
      ),
      hoverColor: hoverColor,
      onTap: onClicked,
    );
  }

  void _selectedItem(BuildContext context, int index) {
    switch (index) {
      case 0:
        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => Container(),
        ));
        break;
      case 1:
        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => Container(),
        ));
        break;
      case 2:
        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => Container(),
        ));
        break;
      case 3:
        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => Container(),
        ));
        break;
      case 4:
        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => Container(),
        ));
        break;
      case 5:
        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => Container(),
        ));
        break;
    }
  }
}

    And return this Widget in the Scaffold Widget endDrawer property directly, like this:

      @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        endDrawer: const NavigationDrawerWidget(),
      ),
    );
  }

    And replace the below code with your AppBar IconButton to open the drawer:

    Builder(
  builder: (context) {
    return IconButton(
      onPressed: () => Scaffold.of(context).openEndDrawer(),
      icon: const Icon(Icons.list, color: Colors.indigo),
    );
  },
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search