I build a drawer as in the image using Flutter, but the elements of the drawer are showed in the left side and its not beautiful like this. I would like to show them in the center of the drawer or at least a little more to the right. Below you can find my code as a reference. It would be great if someone here can give a little help.
return Scaffold(
endDrawer: Drawer(backgroundColor: const Color(0xFF262533),
elevation: 10,
child: ListView(
children: [
PopupMenuButton(
tooltip: '',
child: Text(
'Escorts',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[]),
Padding(padding: EdgeInsets.all(10.0)),
PopupMenuButton(
tooltip: '',
color: Color(0xFF262533),
position: PopupMenuPosition.under,
child: Text(
'Agenturen & Clubs',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Escortagenturen',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Bordelle',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Laufhauser',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Saunaclubs',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Domina & BDSM-Studios',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Tantra & Massaage-Studios',
style:
TextStyle(color: Colors.white),
),
),
),
]),
PopupMenuButton(
tooltip: '',
child: Text(
'Inserieren',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[]),
Padding(padding: EdgeInsets.all(10.0)),
PopupMenuButton(
tooltip: '',
color: Color(0xFF262533),
position: PopupMenuPosition.under,
child: Text(
'Werben',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Werbenformate',
style:
TextStyle(color: Colors.white),
),
),
),
const PopupMenuItem(
child: ListTile(
title: Text(
'Preise',
style:
TextStyle(color: Colors.white),
),
),
),
]),
Padding(padding: EdgeInsets.all(10.0)),
PopupMenuButton(
tooltip: '',
color: Color(0xFF262533),
position: PopupMenuPosition.under,
child: Text(
'Blog',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[
const PopupMenuItem(
child: ListTile(
title: Text(
'Archiv',
style:
TextStyle(color: Colors.white),
),
),
),
]),
const Padding(
padding: EdgeInsets.all(10.0),
),
PopupMenuButton(
position: PopupMenuPosition.under,
tooltip: '',
child: const Text(
'Kontakt',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontFamily: 'Poppins',
),
),
itemBuilder: (BuildContext context) =>
<PopupMenuEntry>[]),
],
),
),
CodePudding user response：
replace ListView with Column widget
and inside Column make
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
code:
endDrawer: Drawer(
backgroundColor: const Color(0xFF262533),
elevation: 10,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//todo
]
))
CodePudding user response：
you can align your element by use Container or Column in my case I build drawer like this
Drawer(
backgroundColor: black,
child: Column(
children: [
SizedBox(
child: Container(
width: double.infinity,
decoration: BoxDecoration(
color: black,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: accent,
width: 0.5,
),
),
height: MediaQuery.of(context).size.width / 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
"assets/logs.png",
height: 80,
width: 80,
),
const Text(
"Name App",
style: TextStyle(
color: grey,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
const Text(
"some body text",
style: TextStyle(
color: white,
fontSize: 14,
),
),
],
)),
),
const SizedBox(
height: 10,
),
Expanded(
child: ListView(
children: [
const Padding(
padding: EdgeInsets.only(right: 10),
child: Text(
"body text",
style: TextStyle(
color: white,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: const EdgeInsets.only(right: 15),
child: Row(
children: const [
Icon(
Icons.check_circle_outline_outlined,
size: 20,
color: accent,
),
SizedBox(
width: 10,
),
Text(
"some body text",
style: TextStyle(
color: grey,
fontSize: 14,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(right: 15, top: 4),
child: Row(
children: const [
Icon(
Icons.check_circle_outline_outlined,
color: accent,
size: 20,
),
SizedBox(
width: 10,
),
Text(
"some body text",
style: TextStyle(
color: grey,
fontSize: 14,
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(right: 15, top: 4),
child: Row(
children: const [
Icon(
Icons.check_circle_outline_outlined,
size: 20,
color: accent,
),
SizedBox(
width: 10,
),
Text(
"some body text",
style: TextStyle(
color: grey,
fontSize: 14,
),
),
],
),
),
const Divider(
endIndent: 10,
indent: 10,
color: grey,
),
ListTile(
dense: true,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const AboutPage()));
},
leading: const Icon(
Icons.info_outlined,
color: accent,
),
title: const Text(
"About App",
style: TextStyle(
color: white,
fontSize: 14,
),
),
trailing: const Icon(
Icons.arrow_back_ios_new,
color: grey,
size: 15,
),
),
ListTile(
dense: true,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const AboutMe()));
},
leading: const Icon(
Icons.engineering,
color: accent,
),
title: const Text(
"About",
style: TextStyle(
color: white,
fontSize: 14,
),
),
trailing: const Icon(
Icons.arrow_back_ios_new,
color: grey,
size: 15,
),
),
],
),
),
Container(
padding: const EdgeInsets.only(left: 8, right: 8),
child: const Text(
"Folow me Now !",
style: TextStyle(fontSize: 12, color: grey),
textAlign: TextAlign.center,
)),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: black,
),
margin: const EdgeInsets.all(10),
child: Row(
children: [
const Spacer(),
IconButton(
onPressed: () {
},
icon: const Icon(
FontAwesomeIcons.facebook,
color: accent,
),
),
IconButton(
onPressed: () {
},
icon: const Icon(
FontAwesomeIcons.instagram,
color: accent,
),
),
IconButton(
onPressed: () {},
icon: const Icon(
FontAwesomeIcons.whatsapp,
color: accent,
),
),
IconButton(
onPressed: () {},
icon: const Icon(
FontAwesomeIcons.telegram,
color: accent,
),
),
const Spacer(),
],
),
),
],
),
),