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 = 'admin@gmail.com';
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,

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.

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 = 'admin@gmail.com';
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),
);
},
),