I have positioned a FloaatingActionButton at the end (I would like to have a bottom right alignment) but unfortunately it goes too far off the right with part of the bottom being cut off by the margins
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FloatingActionButton(
onPressed: displayDialog,
child: Icon(
Icons.queue_music,
),
foregroundColor: Colors.white,
backgroundColor: Colors.red[900],
)
],
),
how can I add some spacing and avoid this overlap ?
Add Container in the widgets as child of Row after FAB having some margin on right
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FloatingActionButton(
onPressed: displayDialog,
child: Icon(
Icons.queue_music,
),
foregroundColor: Colors.white,
backgroundColor: Colors.red[900],
),
Container(
margin: EdgeInsets.only(right: someMargin),
),
],
),
Related
Am building a navigation Drawer in flutter, with some items on top and some items on the bottom of the drawer. But in ListView, am unable to add Column widget on the bottom of the Drawer. I had even tried expanded, but that didn't resolved the problem.
Drawer(
child: ListView(
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 10, right: 10.0, left: 10.0),
padding: const EdgeInsets.only(bottom: 10),
child: Stack(
alignment: Alignment.topRight,
children: <Widget>[
Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(height: 30),
CircleAvatar(
radius: 45,
child: Text(
'AC',
style: TextStyle(fontSize: 40),
),
),
],
),
),
],
),
),
Divider(),
Column(children: _drawerOptions),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text(
AppStrings.termsAndConditions,
style: TextStyle(
fontSize: 16.0,
color: Color.fromARGB(255, 39, 39, 39),
),
)
],
),
)
],
),
);
That last widget Column wrapped with Expanded was to put that Column at bottom of the Drawer, but that's not happening.
Can anyone suggest any solution?
You should do it the other way, put ListView inside Column using Expanded , here is the full working code.
Drawer(
child: Column(
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 10, right: 10.0, left: 10.0),
padding: const EdgeInsets.only(bottom: 10),
child: Stack(
alignment: Alignment.topRight,
children: <Widget>[
Center(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(height: 30),
CircleAvatar(
radius: 45,
child: Text(
'AC',
style: TextStyle(fontSize: 40),
),
),
],
),
),
],
),
),
Divider(),
Expanded(child: ListView(children: _drawerOptions)),
Spacer(),
Text("Terms and conditions"),
],
),
),
I want to center a Text vertically in the bottom: Sektion of my AppBar.
Some things I allready tried are:
1. wrap the Text in a Center(...) Widget
2. wrap the Text in a Column(...) and use crossAxisAlignment: CrossAxisAlignment.center
The bottom: Sektion is a PreferredSizeWidget and does not provide anything to format a Widget.
appBar: new AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
print("Settings Icon");
},
),
],
bottom: PreferredSize(
preferredSize: Size(130.0, 130.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Text(
'N/A',
),
],
),
),
),
I have have found this issue here: https://github.com/flutter/flutter/issues/16262 where the Text was centered but the reproduce code did not worked out for me.
The Text should me somewhere like the red line is (see Image)
Thank you!
PreferredSizeWidget does not impose a size constraint on its child, so you must wrap the Column in a widget with defined height in order to add alignment.
Also, mainAxisAlignment should be used, since this is the vertical alignment in a Column.
bottom: PreferredSize(
preferredSize: Size(130.0, 130.0),
child: Container(
height: 130,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'N/A',
),
],
),
),
)
I am make settings page and want make like iOS settings (grey background and white tile). I am try add Container so can add color to ListTile but always get error.
Anyone know how to add Container here?
body: new SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Column(
children: <Widget>[
ListTile(
leading: Icon(
Icons.person,
color: Colors.grey,
),
title: Text("Account"),
trailing: Icon(Icons.keyboard_arrow_right),
),
Just wrap your ListTile in a Container
Container(
color: Colors.grey[200],
child: ListTile(
leading: Icon(
Icons.person,
color: Colors.grey,
),
title: Text("Account"),
trailing: Icon(Icons.keyboard_arrow_right),
),
)
I wrap the ListTile with a Material widget and set the color. This will preserve the ripple effect of the listTile.
eg.
Material(
color: Colors.grey[300],
child: ListTile(
title: Text('Hello')
)
);
I've an ExpansionTile in a ListView in a Drawer ..I want the sub headings to align directly under its main heading the following gif shows current state..
Scaffold(
appBar: AppBar(title: Text(title)),
body: Center(child: Text('My Page!')),
drawer: Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the Drawer if there isn't enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
// padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ExpansionTile(
title: Text('Item0'),
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('subHeading1'),
),
Text('subheading2')
],
),
ListTile(
title: Text('Item 1'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
ListTile(
title: Text('Item 2'),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
],
),
),
);
This Should Solve this :
ExpansionTile(
title: Text('Item0'),
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Align(
alignment: Alignment.topLeft,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('subHeading1'),
Text('subHeading2')
],
),
),
),
],
),
You can have the padding and the alignment with a container:
ExpansionTile(
title: Text('Item0'),
children: <Widget>[
Container(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.topLeft,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('subHeading1'),
Text('subHeading2')
],
),
),
],
),
I'm trying to have a Widget align to the bottom of my NavDrawer while still keeping a DrawerHeader and a list at the top of the Drawer. Here's what I'm trying:
drawer: new Drawer(
child: new Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
new Text('Top'),
new Align(
alignment: FractionalOffset.bottomCenter,
child: new Text('Bottom'),
),
],
),
),
The bottom text should be aligned to the bottom of the drawer, but It isn't!
You need to wrap your Align widget in Expanded.
drawer: Drawer(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Text('Top'),
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Text('Bottom'),
),
),
],
),
),
Edit:
Years on and there's a much easier solution:
return Drawer(
child: Column(
children: [
ListView(), // <-- Whatever actual content you want goes here
Spacer(), // <-- This will fill up any free-space
// Everything from here down is bottom aligned in the drawer
Divider(),
ListTile(
title: Text('Settings'),
leading: Icon(Icons.settings),
),
ListTile(
title: Text('Help and Feedback'),
leading: Icon(Icons.help),
),
]
);
A little late to the party, but here's my solution to this problem:
#override
Widget build(BuildContext context) {
return Drawer(
// column holds all the widgets in the drawer
child: Column(
children: <Widget>[
Expanded(
// ListView contains a group of widgets that scroll inside the drawer
child: ListView(
children: <Widget>[
UserAccountsDrawerHeader(),
Text('In list view'),
Text('In list view too'),
],
),
),
// This container holds the align
Container(
// This align moves the children to the bottom
child: Align(
alignment: FractionalOffset.bottomCenter,
// This container holds all the children that will be aligned
// on the bottom and should not scroll with the above ListView
child: Container(
child: Column(
children: <Widget>[
Divider(),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings')),
ListTile(
leading: Icon(Icons.help),
title: Text('Help and Feedback'))
],
)
)
)
)
],
),
);
}
This produces the below output where the UserAccountDrawerHeader and the text items can be scrolled around inside the drawer but the Divider and the two ListTiles stay static on the bottom of the drawer.
look whats the problem with your code you have added a Column as a Child to the Drawer so whatever you add in it are vertically placed and The height of Column is by default shrunk to its children's height and it gets larger as the child gets, so there's no point in adding an Align inside a Column
The Simpler Solution Would be to use an Expanded Widget that takes the remaining Space Look I have used a Column and added A widget above and below the Expanded Widget.
Drawer(
elevation: 1.5,
child: Column(children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.redAccent,
)),
Expanded(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
ListTile(
title: Text('My Cart'),
leading: Icon(Icons.shopping_cart),
onTap: () {},
),
ListTile(
title: Text('My Orders'),
leading: Icon(Icons.add_shopping_cart),
onTap: () {},
),
ListTile(
title: Text('Logout'),
leading: Icon(Icons.exit_to_app),
onTap: () {})
],
)),
Container(
color: Colors.black,
width: double.infinity,
height: 0.1,
),
Container(
padding: EdgeInsets.all(10),
height: 100,
child: Text("V1.0.0",style: TextStyle(fontWeight: FontWeight.bold),)),
])),
A simple approach would be to use Spacer() like:
Scaffold(
drawer: Drawer(
child: Column(
children: <Widget>[
Text('Top'),
Spacer(), // use this
Text('Bottom'),
],
),
)
)
here is my solution of a vertical Row with icons in the end of the drawer.
#override
Widget build(BuildContext context) {
return Drawer(
child: Column(
children: <Widget>[
Expanded(
child: ListView(
children: <Widget>[
DrawerHeader(
padding: const EdgeInsets.all(7),
decoration: BoxDecoration(
color: AppColors.menuHeaderColor,
),
child: buildHeader(),
),
AccountDrawerRow(),
ListTile(
leading: Icon(Icons.directions_car),
title: Text(translations.button.vehicles),
),
ListTile(
leading: Icon(Icons.calendar_today),
title: Text(translations.button.appointments,),
),
],
),
),
Container(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Container(
padding: EdgeInsets.all(15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
InkWell(
onTap: () => Navigator.of(context).push(MaterialPageRoute(
builder: (context) => SettingsPage())),
child: Icon(Icons.settings)),
Icon(Icons.help),
Icon(Icons.info),
],
),
),
),
),
],
),
);
}
I'd put it in a row and align all the stuff to bottom using crossAxisAlignment: CrossAxisAlignment.baseline
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.baseline,
children: <Widget>[
Text(
'12.00',
style: Theme.of(context).textTheme.headline2,
textAlign: TextAlign.start,
),
Text(
'USD',
style: Theme.of(context).textTheme.bodyText2,
textAlign: TextAlign.start,
),
]),
Using Expanded widget to align widget to bottom of column parent widget
Column(
children: [
..other children
Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: Text(
'Button',
style: TextStyle(
decoration: TextDecoration.underline,
fontSize: 18,
color: Colors.black),
),
),
),
],
),