Flutter: Navigation drawer with expansion tile
0
I`m trying to build a navigation drawer with expansion tile, when i click on the header it collapse and vice versa
but when i set the the drawer header as a child of ExpansionTile, original header padding is lost
Widget _buildDrawer() {
return Drawer(
child: ExpansionTile(
title: UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.deepPurple),
accountName: Text("Mohamed Ali"),
accountEmail: Text("mohamed.ali6996@hotmail.com"),
currentAccountPicture: CircleAvatar(
child: Text("M"),
backgroundColor: Colors.white,
),
),
children: <Widget>[
ListTile(
title: Text("page one"),
trailing: Icon(Icons.android),
onTap: () => _onSelectedItem(0),
),
ListTile(
title: Text("page two"),
trailing: Icon(Icons.accessible),
onTap: () => _onSelectedItem(1),
),
Divider(),
ListTile(
title: Text("Log out"),
trailing: Icon(Icons.exit_to_app),
),
],
initiallyExpanded: false,
)
);
}
flutter flutter-layout asked Nov 12 at 21:57
M.Ali
15912
add a comment |
0
I`m trying to build a navigation drawer with expansion tile, when i click on the header it collapse and vice versa
but when i set the the drawer header as a child of ExpansionTile, original header padding is lost
Widget _buildDrawer() {
return Drawer(
child: ExpansionTile(
title: UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.deepPurple),
accountName: Text("Mohamed Ali"),
accountEmail: Text("mohamed.ali6996@hotmail.com"),
currentAccountPicture: CircleAvatar(
child: Text("M"),
backgroundColor: Colors.white,
),
),
children: <Widget>[
ListTile(
title: Text("page one"),
trailing: Icon(Icons.android),
onTap: () => _onSelectedItem(0),
),
ListTile(
title: Text("page two"),
trailing: Icon(Icons.accessible),
onTap: () => _onSelectedItem(1),
),
Divider(),
ListTile(
title: Text("Log out"),
trailing: Icon(Icons.exit_to_app),
),
],
initiallyExpanded: false,
)
);
}
flutter flutter-layout asked Nov 12 at 21:57
M.Ali
15912
add a comment |
0
0
0
I`m trying to build a navigation drawer with expansion tile, when i click on the header it collapse and vice versa
but when i set the the drawer header as a child of ExpansionTile, original header padding is lost
Widget _buildDrawer() {
return Drawer(
child: ExpansionTile(
title: UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.deepPurple),
accountName: Text("Mohamed Ali"),
accountEmail: Text("mohamed.ali6996@hotmail.com"),
currentAccountPicture: CircleAvatar(
child: Text("M"),
backgroundColor: Colors.white,
),
),
children: <Widget>[
ListTile(
title: Text("page one"),
trailing: Icon(Icons.android),
onTap: () => _onSelectedItem(0),
),
ListTile(
title: Text("page two"),
trailing: Icon(Icons.accessible),
onTap: () => _onSelectedItem(1),
),
Divider(),
ListTile(
title: Text("Log out"),
trailing: Icon(Icons.exit_to_app),
),
],
initiallyExpanded: false,
)
);
}
flutter flutter-layout asked Nov 12 at 21:57
M.Ali
15912
I`m trying to build a navigation drawer with expansion tile, when i click on the header it collapse and vice versa
but when i set the the drawer header as a child of ExpansionTile, original header padding is lost
Widget _buildDrawer() {
return Drawer(
child: ExpansionTile(
title: UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.deepPurple),
accountName: Text("Mohamed Ali"),
accountEmail: Text("mohamed.ali6996@hotmail.com"),
currentAccountPicture: CircleAvatar(
child: Text("M"),
backgroundColor: Colors.white,
),
),
children: <Widget>[
ListTile(
title: Text("page one"),
trailing: Icon(Icons.android),
onTap: () => _onSelectedItem(0),
),
ListTile(
title: Text("page two"),
trailing: Icon(Icons.accessible),
onTap: () => _onSelectedItem(1),
),
Divider(),
ListTile(
title: Text("Log out"),
trailing: Icon(Icons.exit_to_app),
),
],
initiallyExpanded: false,
)
);
}
flutter flutter-layout flutter flutter-layout asked Nov 12 at 21:57
M.Ali
15912
asked Nov 12 at 21:57
M.Ali
15912
asked Nov 12 at 21:57
M.Ali
15912
asked Nov 12 at 21:57
M.Ali
15912
asked Nov 12 at 21:57
M.Ali
15912
15912
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
The problem is that the header takes the place of the first tile in the ExpansionTile.
One possible solution is to use a Stack and tweak the content with an Align so the expansion icon is at the bottom of the header.
Changing the color of the expanding icon may not work for you. There is a reported issue here for which I have already submitted a PR here. Don't know when it will land in master.
_buildDrawer(BuildContext context) {
ThemeData theme = Theme.of(context);
return Drawer(
child: Stack(
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.indigo),
),
Positioned(
top: 120.0,
left: 0.0,
right: 0.0,
child: Theme(
data: theme.copyWith(
textTheme: theme.textTheme.copyWith(
subhead: theme.textTheme.subhead.copyWith(
color: Colors.grey,
),
),
accentColor: Colors.white,
unselectedWidgetColor: Colors.grey,
iconTheme: theme.iconTheme.copyWith(color: Colors.white),
dividerColor: Colors.transparent,
),
child: ExpansionTile(
title: Align(
heightFactor: 0.4,
alignment: Alignment.bottomCenter,
child: UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.transparent),
accountName: Text("Mohamed Ali"),
accountEmail: Text("mohamed.ali6996@hotmail.com"),
currentAccountPicture: CircleAvatar(
child: Text("M"),
backgroundColor: Colors.white,
),
),
),
children: <Widget>[
ListTile(
title: Text("page one"),
trailing: Icon(Icons.android),
onTap: () => {},
),
ListTile(
title: Text("page two"),
trailing: Icon(Icons.accessible),
onTap: () => {},
),
Container(
height: 1.0,
color: Color(0xFFDDDDDD),
),
ListTile(
title: Text("Log out"),
trailing: Icon(Icons.exit_to_app),
),
],
initiallyExpanded: false,
),
),
),
],
),
)
}
answered Nov 12 at 22:43
chemamolins
2,0641716
It worked well, but i think it needs more customization. for example, the arrow is in the middle of the header and i can not change its position or color, and most importantly, i need to show another list tiles when its collapsed.
– M.Ali
Nov 12 at 23:42
Of course it needs more customization. I provided a possible solution to make it work but it's your job to adapt it to your project.
– chemamolins
Nov 13 at 6:17
I will accept your answer as this is a working solution and the customization i want can not be achieved at the moment.thnx
– M.Ali
Nov 13 at 12:20
Well, you are right that it does not cover everything. I will try to add some tweaks when I get home.
– chemamolins
Nov 13 at 12:59
I have edited the answer. It is difficult to know exactly what you want to achieve but you can see that the possibilities are limitless.
– chemamolins
Nov 13 at 22:52
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53270699%2fflutter-navigation-drawer-with-expansion-tile%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
The problem is that the header takes the place of the first tile in the ExpansionTile.
One possible solution is to use a Stack and tweak the content with an Align so the expansion icon is at the bottom of the header.
Changing the color of the expanding icon may not work for you. There is a reported issue here for which I have already submitted a PR here. Don't know when it will land in master.
_buildDrawer(BuildContext context) {
ThemeData theme = Theme.of(context);
return Drawer(
child: Stack(
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.indigo),
),
Positioned(
top: 120.0,
left: 0.0,
right: 0.0,
child: Theme(
data: theme.copyWith(
textTheme: theme.textTheme.copyWith(
subhead: theme.textTheme.subhead.copyWith(
color: Colors.grey,
),
),
accentColor: Colors.white,
unselectedWidgetColor: Colors.grey,
iconTheme: theme.iconTheme.copyWith(color: Colors.white),
dividerColor: Colors.transparent,
),
child: ExpansionTile(
title: Align(
heightFactor: 0.4,
alignment: Alignment.bottomCenter,
child: UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.transparent),
accountName: Text("Mohamed Ali"),
accountEmail: Text("mohamed.ali6996@hotmail.com"),
currentAccountPicture: CircleAvatar(
child: Text("M"),
backgroundColor: Colors.white,
),
),
),
children: <Widget>[
ListTile(
title: Text("page one"),
trailing: Icon(Icons.android),
onTap: () => {},
),
ListTile(
title: Text("page two"),
trailing: Icon(Icons.accessible),
onTap: () => {},
),
Container(
height: 1.0,
color: Color(0xFFDDDDDD),
),
ListTile(
title: Text("Log out"),
trailing: Icon(Icons.exit_to_app),
),
],
initiallyExpanded: false,
),
),
),
],
),
)
}
answered Nov 12 at 22:43
chemamolins
2,0641716
It worked well, but i think it needs more customization. for example, the arrow is in the middle of the header and i can not change its position or color, and most importantly, i need to show another list tiles when its collapsed.
– M.Ali
Nov 12 at 23:42
Of course it needs more customization. I provided a possible solution to make it work but it's your job to adapt it to your project.
– chemamolins
Nov 13 at 6:17
I will accept your answer as this is a working solution and the customization i want can not be achieved at the moment.thnx
– M.Ali
Nov 13 at 12:20
Well, you are right that it does not cover everything. I will try to add some tweaks when I get home.
– chemamolins
Nov 13 at 12:59
I have edited the answer. It is difficult to know exactly what you want to achieve but you can see that the possibilities are limitless.
– chemamolins
Nov 13 at 22:52
add a comment |
0
The problem is that the header takes the place of the first tile in the ExpansionTile.
One possible solution is to use a Stack and tweak the content with an Align so the expansion icon is at the bottom of the header.
Changing the color of the expanding icon may not work for you. There is a reported issue here for which I have already submitted a PR here. Don't know when it will land in master.
_buildDrawer(BuildContext context) {
ThemeData theme = Theme.of(context);
return Drawer(
child: Stack(
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.indigo),
),
Positioned(
top: 120.0,
left: 0.0,
right: 0.0,
child: Theme(
data: theme.copyWith(
textTheme: theme.textTheme.copyWith(
subhead: theme.textTheme.subhead.copyWith(
color: Colors.grey,
),
),
accentColor: Colors.white,
unselectedWidgetColor: Colors.grey,
iconTheme: theme.iconTheme.copyWith(color: Colors.white),
dividerColor: Colors.transparent,
),
child: ExpansionTile(
title: Align(
heightFactor: 0.4,
alignment: Alignment.bottomCenter,
child: UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.transparent),
accountName: Text("Mohamed Ali"),
accountEmail: Text("mohamed.ali6996@hotmail.com"),
currentAccountPicture: CircleAvatar(
child: Text("M"),
backgroundColor: Colors.white,
),
),
),
children: <Widget>[
ListTile(
title: Text("page one"),
trailing: Icon(Icons.android),
onTap: () => {},
),
ListTile(
title: Text("page two"),
trailing: Icon(Icons.accessible),
onTap: () => {},
),
Container(
height: 1.0,
color: Color(0xFFDDDDDD),
),
ListTile(
title: Text("Log out"),
trailing: Icon(Icons.exit_to_app),
),
],
initiallyExpanded: false,
),
),
),
],
),
)
}
answered Nov 12 at 22:43
chemamolins
2,0641716
It worked well, but i think it needs more customization. for example, the arrow is in the middle of the header and i can not change its position or color, and most importantly, i need to show another list tiles when its collapsed.
– M.Ali
Nov 12 at 23:42
Of course it needs more customization. I provided a possible solution to make it work but it's your job to adapt it to your project.
– chemamolins
Nov 13 at 6:17
I will accept your answer as this is a working solution and the customization i want can not be achieved at the moment.thnx
– M.Ali
Nov 13 at 12:20
Well, you are right that it does not cover everything. I will try to add some tweaks when I get home.
– chemamolins
Nov 13 at 12:59
I have edited the answer. It is difficult to know exactly what you want to achieve but you can see that the possibilities are limitless.
– chemamolins
Nov 13 at 22:52
add a comment |
0
0
0
The problem is that the header takes the place of the first tile in the ExpansionTile.
One possible solution is to use a Stack and tweak the content with an Align so the expansion icon is at the bottom of the header.
Changing the color of the expanding icon may not work for you. There is a reported issue here for which I have already submitted a PR here. Don't know when it will land in master.
_buildDrawer(BuildContext context) {
ThemeData theme = Theme.of(context);
return Drawer(
child: Stack(
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.indigo),
),
Positioned(
top: 120.0,
left: 0.0,
right: 0.0,
child: Theme(
data: theme.copyWith(
textTheme: theme.textTheme.copyWith(
subhead: theme.textTheme.subhead.copyWith(
color: Colors.grey,
),
),
accentColor: Colors.white,
unselectedWidgetColor: Colors.grey,
iconTheme: theme.iconTheme.copyWith(color: Colors.white),
dividerColor: Colors.transparent,
),
child: ExpansionTile(
title: Align(
heightFactor: 0.4,
alignment: Alignment.bottomCenter,
child: UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.transparent),
accountName: Text("Mohamed Ali"),
accountEmail: Text("mohamed.ali6996@hotmail.com"),
currentAccountPicture: CircleAvatar(
child: Text("M"),
backgroundColor: Colors.white,
),
),
),
children: <Widget>[
ListTile(
title: Text("page one"),
trailing: Icon(Icons.android),
onTap: () => {},
),
ListTile(
title: Text("page two"),
trailing: Icon(Icons.accessible),
onTap: () => {},
),
Container(
height: 1.0,
color: Color(0xFFDDDDDD),
),
ListTile(
title: Text("Log out"),
trailing: Icon(Icons.exit_to_app),
),
],
initiallyExpanded: false,
),
),
),
],
),
)
}
answered Nov 12 at 22:43
chemamolins
2,0641716
The problem is that the header takes the place of the first tile in the ExpansionTile.
One possible solution is to use a Stack and tweak the content with an Align so the expansion icon is at the bottom of the header.
Changing the color of the expanding icon may not work for you. There is a reported issue here for which I have already submitted a PR here. Don't know when it will land in master.
_buildDrawer(BuildContext context) {
ThemeData theme = Theme.of(context);
return Drawer(
child: Stack(
children: <Widget>[
UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.indigo),
),
Positioned(
top: 120.0,
left: 0.0,
right: 0.0,
child: Theme(
data: theme.copyWith(
textTheme: theme.textTheme.copyWith(
subhead: theme.textTheme.subhead.copyWith(
color: Colors.grey,
),
),
accentColor: Colors.white,
unselectedWidgetColor: Colors.grey,
iconTheme: theme.iconTheme.copyWith(color: Colors.white),
dividerColor: Colors.transparent,
),
child: ExpansionTile(
title: Align(
heightFactor: 0.4,
alignment: Alignment.bottomCenter,
child: UserAccountsDrawerHeader(
decoration: BoxDecoration(color: Colors.transparent),
accountName: Text("Mohamed Ali"),
accountEmail: Text("mohamed.ali6996@hotmail.com"),
currentAccountPicture: CircleAvatar(
child: Text("M"),
backgroundColor: Colors.white,
),
),
),
children: <Widget>[
ListTile(
title: Text("page one"),
trailing: Icon(Icons.android),
onTap: () => {},
),
ListTile(
title: Text("page two"),
trailing: Icon(Icons.accessible),
onTap: () => {},
),
Container(
height: 1.0,
color: Color(0xFFDDDDDD),
),
ListTile(
title: Text("Log out"),
trailing: Icon(Icons.exit_to_app),
),
],
initiallyExpanded: false,
),
),
),
],
),
)
}
answered Nov 12 at 22:43
chemamolins
2,0641716
edited Nov 13 at 22:37
answered Nov 12 at 22:43
chemamolins
2,0641716
answered Nov 12 at 22:43
chemamolins
2,0641716
answered Nov 12 at 22:43
chemamolins
2,0641716
2,0641716
It worked well, but i think it needs more customization. for example, the arrow is in the middle of the header and i can not change its position or color, and most importantly, i need to show another list tiles when its collapsed.
– M.Ali
Nov 12 at 23:42
Of course it needs more customization. I provided a possible solution to make it work but it's your job to adapt it to your project.
– chemamolins
Nov 13 at 6:17
I will accept your answer as this is a working solution and the customization i want can not be achieved at the moment.thnx
– M.Ali
Nov 13 at 12:20
Well, you are right that it does not cover everything. I will try to add some tweaks when I get home.
– chemamolins
Nov 13 at 12:59
I have edited the answer. It is difficult to know exactly what you want to achieve but you can see that the possibilities are limitless.
– chemamolins
Nov 13 at 22:52
add a comment |
It worked well, but i think it needs more customization. for example, the arrow is in the middle of the header and i can not change its position or color, and most importantly, i need to show another list tiles when its collapsed.
– M.Ali
Nov 12 at 23:42
Of course it needs more customization. I provided a possible solution to make it work but it's your job to adapt it to your project.
– chemamolins
Nov 13 at 6:17
I will accept your answer as this is a working solution and the customization i want can not be achieved at the moment.thnx
– M.Ali
Nov 13 at 12:20
Well, you are right that it does not cover everything. I will try to add some tweaks when I get home.
– chemamolins
Nov 13 at 12:59
I have edited the answer. It is difficult to know exactly what you want to achieve but you can see that the possibilities are limitless.
– chemamolins
Nov 13 at 22:52
It worked well, but i think it needs more customization. for example, the arrow is in the middle of the header and i can not change its position or color, and most importantly, i need to show another list tiles when its collapsed.
– M.Ali
Nov 12 at 23:42
It worked well, but i think it needs more customization. for example, the arrow is in the middle of the header and i can not change its position or color, and most importantly, i need to show another list tiles when its collapsed.
– M.Ali
Nov 12 at 23:42
Of course it needs more customization. I provided a possible solution to make it work but it's your job to adapt it to your project.
– chemamolins
Nov 13 at 6:17
Of course it needs more customization. I provided a possible solution to make it work but it's your job to adapt it to your project.
– chemamolins
Nov 13 at 6:17
I will accept your answer as this is a working solution and the customization i want can not be achieved at the moment.thnx
– M.Ali
Nov 13 at 12:20
I will accept your answer as this is a working solution and the customization i want can not be achieved at the moment.thnx
– M.Ali
Nov 13 at 12:20
Well, you are right that it does not cover everything. I will try to add some tweaks when I get home.
– chemamolins
Nov 13 at 12:59
Well, you are right that it does not cover everything. I will try to add some tweaks when I get home.
– chemamolins
Nov 13 at 12:59
I have edited the answer. It is difficult to know exactly what you want to achieve but you can see that the possibilities are limitless.
– chemamolins
Nov 13 at 22:52
I have edited the answer. It is difficult to know exactly what you want to achieve but you can see that the possibilities are limitless.
– chemamolins
Nov 13 at 22:52
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53270699%2fflutter-navigation-drawer-with-expansion-tile%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
