Currently, I am trying to create a card template to insert into a list view. I want the column with the icon buttons to be positioned on the far right. I cannot seem to find a way to say that the column containing the icon buttons needs to be flushed to the right.
new Expanded(
child: new ListView(
shrinkWrap: true,
padding: const EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 0.0),
children: <Widget>[
new Card(
child: new Row(
children: <Widget>[
new Padding(
padding: const EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 0.0),
),
new Image(
//image: new AssetImage("assets/ic_access_alarm_red_24dp.png"),
image: new AssetImage("assets/pastDue.png"),
height: 50.0,
width: 50.0,
),
new Padding(
padding: const EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 0.0),
),
new Column(
children: <Widget>[
new Text("This is the title"),
new Text("This is the Description"),
new Text("This is the date"),
],
),
new Column(
children: <Widget>[
new IconButton(
icon: new Icon(Icons.note_add),
onPressed: () {
select("AddCalibration");
}
),
new IconButton(
icon: new Icon(Icons.edit),
onPressed: () {
select("EditInstrument");
}
)
],
)
],
)
),
const Text("I am"),
const Text("A ListView"),
],
)
)
This is a capture of what it currently looks like.
Thank you, vbandrade!
This definitely solved my problem.
new Expanded(
child: new ListView(
shrinkWrap: true,
padding: const EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 0.0),
children: <Widget>[
new Card(
child: new ListTile(
leading: new Image(
image: new AssetImage("assets/pastDue.png"),
height: 50.0,
width: 50.0,
),
title: new Column(
children: <Widget>[
new Text("This is the title"),
new Text("This is the Description"),
new Text("This is the date"),
],
),
trailing: new Column(
children: <Widget>[
new IconButton(
icon: new Icon(Icons.note_add),
onPressed: () {
select("AddCalibration");
}),
new IconButton(
icon: new Icon(Icons.edit),
onPressed: () {
select("EditInstrument");
})
],
),
),
),
const Text("I am"),
const Text("A ListView"),
],
))
This is the end result.
use the Expanded widget to push the icons to the right
new Expanded(child: new Container())
so in your example :
new Column(
children: <Widget>[
new Text("This is the title"),
new Text("This is the Description"),
new Text("This is the date"),],
),
new Expanded(child: new Container()),
new Column(
children: <Widget>[
new IconButton(
icon: new Icon(Icons.note_add),
onPressed: () {}),
Related
I'm trying to add a floating action button to an image. The button will be used to change the selected image. I want the button to float over the bottom right of the image. So far all I can do is add the floating action button directly below the image. Thanks for any help!
#override
Widget build(BuildContext context) {
// Create the view scaffold. Use a list view so things scroll.
return new Scaffold(
appBar: new AppBar(
title: new Text("My Title"),
),
body: new ListView(
children: [
new Container(
padding: EdgeInsets.zero,
child: new Image.asset(
"assets/images/background_image.png",
fit: BoxFit.fitWidth,
),
),
new FloatingActionButton(
child: const Icon(Icons.camera_alt),
backgroundColor: Colors.green.shade800,
onPressed: () {},
),
new Divider(),
new ListTile(
title: new Text('Email'),
leading: const Icon(Icons.email),
onTap: () {},
),
new Divider(),
],
),
);
}
You may use a Stack and Positioned widget, you can read about those widgets here:
Stack:
https://docs.flutter.io/flutter/widgets/Stack-class.html
Positioned:
https://docs.flutter.io/flutter/widgets/Positioned-class.html
return new Scaffold(
appBar: new AppBar(
title: new Text("My Title"),
),
body: new ListView(
children: [
Stack(
children: <Widget>[
new Container(
padding: EdgeInsets.zero,
child: new Image.asset(
"assets/images/background_image.png",
fit: BoxFit.fitWidth,
)),
Positioned(
right: 0.0,
bottom: 0.0,
child: new FloatingActionButton(
child: const Icon(Icons.camera_alt),
backgroundColor: Colors.green.shade800,
onPressed: () {},
),
),
],
),
new Divider(),
new ListTile(
title: new Text('Email'),
leading: const Icon(Icons.email),
onTap: () {},
),
new Divider(),
],
),
);
I am using TabBar and a custom searchview, when I click inside TextField to search and keyboard pops up my all view hides, am attaching screenshots below. Is this flutter issue or I am doing wrong in my code. Please have a look at my code. without popping up keyboard my this is working fine.
return new Scaffold(
body: new Container(
// margin: EdgeInsets.all(10.0),
//color: Colors.white30,
child: new Column(
children: <Widget>[
new Container(
height: 70.0,
color: Theme.of(context).primaryColor,
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new Card(
child: new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 3.0),
child: new Icon(Icons.search),
),
new Container(
width: MediaQuery.of(context).size.width - 100.0,
// Subtract sums of paddings and margins from actual width
child: new TextField(
controller: controller,
decoration: new InputDecoration(
hintText: 'Search', border: InputBorder.none),
// onChanged: onSearchTextChanged,
),
),
new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
controller.clear();
// onSearchTextChanged('');
FocusScope.of(context).requestFocus(new FocusNode());
},),
],
),
)
))),
new Flexible(
child: new ListView.builder(
itemCount: productList == null ? 0 : productList.length,
itemBuilder: (BuildContext context, int index) {
return new Container(
child: new Column(
children: <Widget>[
new Container(
margin: EdgeInsets.all(10.0),
child: new Column(
children: <Widget>[
new Column(
children: <Widget>[
new Padding(padding: const EdgeInsets.only(top: 5.0)),
new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Container(
alignment: FractionalOffset.topLeft ,
width: 250.0,
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Text(productList[index].name,
style: new TextStyle(color: Colors.black,
fontSize: 18.0, fontWeight: FontWeight.bold),
)
],
),
),
new Text("£"+productList[index].price.toString(),
style: new TextStyle(color: Colors.black,
fontSize: 18.0, fontWeight: FontWeight.bold
),),
],
)
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Flexible(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start ,
children: <Widget>[
new Text(
productList[index].description,
overflow: TextOverflow.fade ,),
],
))
],
),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new ListTileItemAddRemove(productList[index]),
new Padding(padding: EdgeInsets.only(bottom: 10.0))
],
)
],
),
),
new Divider(color: Colors.black,)
],
),
);
}),
),
],
)
),
);
when I click inside TextField all widgets disappears. please see below.
I think flutter widgets are resized when keyboard pops up, I've resolved this issue by setting value false of resizeToAvoidBottomPadding inside Scaffold. Issue has been resolved but still I am looking for the reason behind this issue.
return new Scaffold(
resizeToAvoidBottomPadding : false,
body: new Container(
-
-
-
-
}
I use this method to show a AlertDialog:
_onSubmit(message) {
if (message.isNotEmpty) {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
title: Center(child: Text('Alert')),
content: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children : <Widget>[
Expanded(
child: Text(
message,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
),
),
)
],
),
actions: <Widget>[
FlatButton(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
}),
FlatButton(
child: Text('Ok'),
onPressed: () {
_inputTextController.clear();
Navigator.of(context).pop();
})
],
);
},
);
}
}
Everything is working but the buttons are aligned in right as shown on picture below:
I want to style some how the buttons, for example one on start other on end.
I searched in docs but only found how to make them "Stacked full-width buttons".
Any ideas how to style the buttons?
Update 2022/10/22
Flutter 2.5 introduced the actionsAlignment property:
AlertDialog(
title: ..
actions: ..
actionsAlignment: MainAxisAlignment.end
),
Customize widget
Edit the the widget itself: Under the AlertDialog there is a ButtonBar widget where you can use alignment: MainAxisAlignment.spaceBetween to align the buttons correctly. See this answer for an example of a custom AlertDialog widget.
Own button row
You could also remove the buttons under actions and add an own custom Row with RaisedButtons in it, somehow like this:
Row (
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
RaisedButton(), // button 1
RaisedButton(), // button 2
]
)
In your case you could add a Column around the Row in content and in there add your existing Row and the modified one you created from the above example.
Move buttons to content is a good solution.
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
title: Center(child: Text('Alert')),
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: Text(
"message",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
child: Text('Yes'),
onPressed: () {
Navigator.of(context).pop();
}),
FlatButton(
child: Text('No'),
onPressed: () {
Navigator.of(context).pop();
})
])
],
),
);
});
Changing the theme is a good option.
MaterialApp(
theme: ThemeData(
buttonBarTheme: ButtonBarThemeData(
alignment: MainAxisAlignment.center,
)),
...
Don't add button in actions of AlertDialog. As you can see.
_onSubmit(message) {
if (message.isNotEmpty) {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
title: Center(child: Text('Alert')),
content: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children : <Widget>[
Expanded(
child: Text(
message,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
),
),
),
FlatButton(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
}),
FlatButton(
child: Text('Ok'),
onPressed: () {
_inputTextController.clear();
Navigator.of(context).pop();
})
],
),
);
},
);
}
}
I use this method to align buttons in actions of AlertDialog.
How this works::
The SizedBox takes the full width of the alertdialog using its context(In the statement MediaQuery.of(context).size.width. After that, a row is used which places space between its children in the main axis(mainAxisAlignment => the x-axis for a row).
AlertDialog style:
AlertDialog(
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Title'),
CloseButton(
color: Color(0xFFD5D3D3),
onPressed: () {
Navigator.of(context).pop();
})
]),
content: SingleChildScrollView(child: Text("Boby")),
actions: [
SizedBox(
width: MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ButtonTheme(
minWidth: 25.0,
height: 25.0,
child: OutlineButton(
borderSide: BorderSide(color: Colors.blueAccent),
child: new Text("Save"),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
onPressed: () {})),
SizedBox(width: 8.0),
ButtonTheme(
minWidth: 25.0,
height: 25.0,
child: OutlineButton(
borderSide: BorderSide(color: Colors.black26),
textColor: Colors.blue,
child: new Text("Close"),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
onPressed: () {}))
]))
]);
Here is the straightforward answer for your problem:
Just use actionsAlignment property of AlertDialog class in flutter. Like so
AlertDialog(
actions: ...,
actionsAlignment: MainAxisAlignment.spaceBetween
)
Or you can use RFlutter Alert library for that. It is easily customizable and easy-to-use. Its default style includes rounded corners and you can add buttons as much as you want.
Alert Style:
var alertStyle = AlertStyle(
animationType: AnimationType.fromTop,
isCloseButton: false,
isOverlayTapDismiss: false,
descStyle: TextStyle(fontWeight: FontWeight.bold),
animationDuration: Duration(milliseconds: 400),
alertBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
side: BorderSide(
color: Colors.grey,
),
),
titleStyle: TextStyle(
color: Colors.red,
),
);
And assing your AlertStyle object to Alert's style field.
Alert(
context: context,
style: alertStyle,
type: AlertType.info,
title: "RFLUTTER ALERT",
desc: "Flutter is more awesome with RFlutter Alert.",
buttons: [
DialogButton(
child: Text(
"COOL",
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () => Navigator.pop(context),
color: Color.fromRGBO(0, 179, 134, 1.0),
radius: BorderRadius.circular(0.0),
),
],
).show();
*I'm one of developer of RFlutter Alert.
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),
),
),
),
],
),
I am developing an app in Flutter with Dart and am generally finding layout quite straightforward. However, I am running into a problem which I think is related to default padding between widgets.
I have two flutter ButtonRows in a Column which render with a quite large gap between them which I would like to eliminate. I guess it is caused by padding and have tried various approaches with no success so far. An extract from the code is as follows:
#override
Widget build(BuildContext context) {
return new Scaffold(
...
body: new Column(
...
children: <Widget>[
...
new Container(
margin: new EdgeInsets.all(0.0),
child: new Padding(
padding: new EdgeInsets.all(0.0),
child: new ButtonBar(
...
children: <Widget>[
new MaterialButton(
...
),
new MaterialButton(
...
),
),
),
),
),
new Container(
margin: new EdgeInsets.all(0.0),
child: new Padding(
padding: new EdgeInsets.all(0.0),
child: new ButtonBar(
...
children: <Widget>[
new MaterialButton(
...
),
new MaterialButton(
...
),
],
),
),
),
],
),
);
}
You have different ways to customize buttons:
customize ButtonTheme for ButtonBar
use Row instead of ButtonBar
implement your own button via InkWell
etc
What to use depends on your cases/requirements. Here quick example of different ways:
class ButtonRowWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Buttons"),
),
body: new Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
new Container(
child: new Text("widget ButtonBar:"),
margin: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
),
new ButtonBar(children: <Widget>[
new FlatButton(
child: new Text("Button 1"),
onPressed: () => debugPrint("Button 1"),
),
new FlatButton(
child: new Text("Button 2"),
onPressed: () => debugPrint("Button 2"),
)
]),
new Container(
child: new Text("widget ButtonBar with custom ButtomTheme:"),
margin: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
),
new ButtonTheme(
minWidth: 44.0,
padding: new EdgeInsets.all(0.0),
child: new ButtonBar(children: <Widget>[
new FlatButton(
child: new Text("Button 1"),
onPressed: () => debugPrint("Button 1"),
),
new FlatButton(
child: new Text("Button 2"),
onPressed: () => debugPrint("Button 2"),
),
]),
),
new Container(
child: new Text("widget Row with FlatButton:"),
margin: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
),
new Row(
children: <Widget>[
new FlatButton(
child: new Text("Button 1"),
onPressed: () => debugPrint("Button 1"),
),
new FlatButton(
child: new Text("Button 2"),
onPressed: () => debugPrint("Button 2"),
),
],
),
new Container(
child: new Text("widget Row with InkWell"),
margin: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
),
new Row(
children: <Widget>[
new InkWell(
child: new Text("Button 1"),
onTap: () => debugPrint("Button 1"),
),
new InkWell(
child: new Text("Button 2"),
onTap: () => debugPrint("Button 2"),
),
],
)
]),
);
}
}
Debug paint can be helpful in this case.
Also, the ButtonBar itself has a buttonPadding attribute that you can customize.
Overrides the surrounding ButtonThemeData.padding to define the
padding for a button's child (typically the button's label).
If null then it will use the surrounding ButtonBarTheme.buttonPadding.
If that is null, it will default to 8.0 logical pixels on the left and
right.
ButtonBar(
buttonPadding: EdgeInsets.all(0),
children: <Widget>[
FlatButton(
child: Text('Hello'),
onPressed: () => print(),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
],
),