I am new to flutter and I was wondering if someone can help me with my row of buttons. They both work outside of the row but not within it. I have attached the code below please let me know if you can help or need more information.
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.edit),
)
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () async {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => StudyPage(
title: 'Add a study',
selected: 0,
),
),
);
},
),
],
)
],
),
I little modified your (Row) code as follows and now it works.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: const Icon(Icons.edit),
onPressed: () {},
),
FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () async {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => StudyPage(
title: 'Add a study',
selected: 0,
),
),
);
},
),
]),
As far as I know, you can try this
Row(children:[
Expanded(
child:
IconButton(
icon: Icon(Icons.edit),
)),
Expanded(
child:
IconButton(
icon: Icon(Icons.edit),
)),
]);
if it solve your problem, kindly accept it as an answer so that others will get help
First. Expanded only work when place inside Colum/Row children.
Expanded will take all space of parent Colum/Row and expand Colum/Row size it possible.
If you want Colum/Row to max size, try add mainAxisSize: MainAxisSize.max to Colum/Row instead.
Second. Your code look like has error when floatingActionButton not is a Widget when you place in Colum/Row children, it is a props of Scaffold. Try to replace it by a valid button like IconButton/ElevatedButton/etc.... Your IconButton missing onPressed too.
Example:
Row(
mainAxisSize: MainAxisSize.max,
children: [
Expanded( // Place `Expanded` inside `Row`
child: ElevatedButton(
child: Text('First button'),
onPressed: () {}, // Every button need a callback
),
),
Expanded( // Place 2 `Expanded` mean: they try to get maximum size and they will have same size
child: ElevatedButton(
child: Text('Second button'),
onPressed: () {},
),
),
],
)
Related
Is there any way to change the text labels of the Continue and Cancel Buttons of the stepper in flutter? Stepper seems to be the perfect choice for what I want to do (long form with several "stages") and before I go try to build one from scratch just to get other labels for the buttons I thought I may ask..
Anybody knows if/how thats possible?
Yes, you can by providing a controlsBuilder callback. Which has to be a function that takes two other functions (onStepContinue and onStepCancel) which are the actions that you will have to pass to the new buttons you'll create in order for them to act as they should.
Then you can declare anything you want (in this case a row with two buttons) as long you pass the two functions (onStepContinue and onStepCancel) for them to work as its expected:
Stepper(
controlsBuilder: (BuildContext context,
{VoidCallback? onStepContinue, VoidCallback? onStepCancel}) {
return Row(
children: <Widget>[
TextButton(
onPressed: onStepContinue,
child: const Text('NEXT'),
),
TextButton(
onPressed: onStepCancel,
child: const Text('EXIT'),
),
],
);
},
steps: const <Step>[
Step(
title: Text('A'),
content: SizedBox(
width: 100.0,
height: 100.0,
),
),
Step(
title: Text('B'),
content: SizedBox(
width: 100.0,
height: 100.0,
),
),
],
);
flutter version 2.8.1
inside the Stepper you can use controlsBuilder
you can change buttons
controlsBuilder: (context,_) {
return Row(
children: <Widget>[
TextButton(
onPressed: (){},
child: const Text('NEXT'),
),
TextButton(
onPressed: (){},
child: const Text('EXIT'),
),
],
);
},
controlsBuilder: (BuildContext context, ControlsDetails details) {
final _isLastStep = _currentStep == _getSteps.length - 1;
return Container(
margin: const EdgeInsets.only(top: 50),
child: Row(children: [
Expanded(
child: ElevatedButton(
child: Text(_isLastStep ? 'Send' : 'Next'),
onPressed: details.onStepContinue)),
const SizedBox(
width: 12,
),
if (_currentStep != 0)
Expanded(
child: ElevatedButton(
child: Text('Back'),
onPressed: details.onStepCancel))
]));
},
I m late for the discussion.
But i have just done it and think it is good to share.
The code is able to control the Text for each step as the code below.
Each step will have difference text, manage to do for 3 steps. If more than that, the code will be quite messy.
Hope it helps someone who is looking for it.
controlsBuilder: (BuildContext context,
{VoidCallback onStepContinue, VoidCallback onStepCancel}) {
return Row(
children: <Widget>[
_activeCurrentStep == 0
? TextButton(
onPressed: onStepContinue,
child: const Text('NEXT'),
)
: _activeCurrentStep == 1
? Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton(
onPressed: onStepContinue,
child: const Text('NEXT'),
),
TextButton(
onPressed: onStepCancel,
child: const Text('BACK'),
),
],
),
)
: _activeCurrentStep >= 2
? Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
TextButton(
onPressed: onStepContinue,
child: const Text('SAVE'),
),
TextButton(
onPressed: onStepCancel,
child: const Text('BACK'),
),
],
),
)
: TextButton(
onPressed: onStepCancel,
child: const Text('BACK'),
),
],
);
},
Solution for flutter version > 2.8.1
In flutter version > 2.8.1 you can not use this for change the labels or buttons:
controlsBuilder: (context, {onStepContinue, onStepCancel}) {...}
Use this:
controlsBuilder: (context, _) {...}
Or this:
controlsBuilder: (context, onStepContinue) {...}
controlsBuilder: (context, onStepCancel) {...}
This is a complete example changing the labels text and colors:
Stepper(
controlsBuilder: (context, _) {
return Row(
children: <Widget>[
TextButton(
onPressed: () {},
child: const Text(
'NEXT',
style:
TextStyle(color: Colors.blue),
),
),
TextButton(
onPressed: () {},
child: const Text(
'EXIT',
style:
TextStyle(color: Colors.blue),
),
),
],
);
},
//Rest of the Stepper code (currentStep, onStepCancel, onStepContinue, steps...)
//...
)
I am trying to look for an example in flutter in which there could be buttons on the bottom part of the ListTile. I have the below code, but somehow I am not able to add buttons in the bottom of the cell , I want to add 3 buttons , similar to the image shared
ListTile(title: Text("ListTile"),
subtitle: Text("Sample Subtitle. \nSubtitle line 3"),
trailing: Icon(Icons.home),
leading: Icon(Icons.add_box),
isThreeLine: true,
onTap: (){
print("On Tap is fired");
},
)
you can use a column inside your subtitle like this:
ListTile(
title: Text('title'),
subtitle: Column(
children: <Widget>[
Text('inside column'),
FlatButton(child: Text('button'), onPressed: () {})
],
),
),
preview on code pen
Try A Column with 2 Rows in your subtitle.
subtitle: Column(
children: <Widget>[
Container(height: 50, color: Colors.red, child: Row()),
Container(
child: Row(
children: <Widget>[
FlatButton(
child: Text("btn1"),
onPressed: () {},
),
FlatButton(
child: Text("btn2"),
onPressed: () {},
),
FlatButton(
child: Text("btn3"),
onPressed: () {},
),
],
))
],
),
You can use, ButtonBar
ButtonBar(children: [
FlatButton(
child: Text("Initialised Love"),
onPressed: () {},
),
]),
I am trying to have multiple floatingActionButtons on a page in a flutter app, but I haven't been able to solve myself as the instructions on the internet aren't clear. I want the floating action buttons to be on the bottom right of the app. The current code correctly has two floatingactionbuttons, but they appear at the top right. Can someone please let me know how to do this. Thanks! Here is my curret code that puts two floatingactionbuttons in the top right but I want them in the bottomright.
#override
Widget build(BuildContext context) {
return new Scaffold(
floatingActionButton: Column(
children: <Widget>[
FloatingActionButton(
heroTag: "btn1",
child: Icon(Icons.add),
onPressed: () {
setState(() {
list.add(list.length);
});
}),
FloatingActionButton(
heroTag: "btn2",
child: Icon(Icons.add),
onPressed: () {
setState(() {
list.add(list.length);
});
}),
]), //column end
You can use something like this:
floatingActionButton: Stack(
children: <Widget>[
Padding(padding: EdgeInsets.only(bottom:80),
child: Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
heroTag: "btn1",
onPressed: (){},
child: Icon(Icons.camera_alt),),
),),
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
heroTag: "btn2",
onPressed: (){},
child: Icon(Icons.add_photo_alternate),),
),
],
)
How can I make a clickable widget with a ripple and a button inside?
Here is the code I have:
Material(
child: InkWell(
onTap: () {},
child: Column(
children: <Widget>[
Text("this column is clickable"),
IconButton(
icon: Icon(Icons.airplanemode_active),
onPressed: () {},
),
]
)
)
),
When clicking on the Column, everything works fine, the ripple effect go behind the IconButton as expected. But when clicking on the IconButton, the onPressed trigger is called but it also activates the InkWell. Is there a way to prevent in from activation the InkWell?
Put Column widget inside GestureDetector and set excludeFromSemantics: true like the following:
Material(
child: Padding(
padding: const EdgeInsets.all(40.0),
child: InkWell(
onTap: () {},
child: GestureDetector(
excludeFromSemantics: true,
child: Column(
children: <Widget>[
Text("this column is clickable"),
IconButton(
icon: Icon(Icons.airplanemode_active),
onPressed: () {},
),
]
),
)
),
)
),
Its from this github post.
I want to create a persistentFooterButtons with 3 FlatButton.icon
to equally take the whole width of the Screen, and customize itself with different screen sizes, i tried many approaches like Wrap,Expanded, i couldn't make it work, i even tried
final screenSize = MediaQuery.of(context).size;
Container(
width: screenSize.width /3 ,
child: FlatButton.icon(
onPressed: null,
icon: Icon(Icons.search),
label: Text("search")),
),
but the text always overflows on the right side of the screen.
So, Any ideas how this might go?
**Edit**
i found this approach which is very helpful
persistentFooterButtons: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
FlatButton(
onPressed: () {},
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Icon(Icons.lightbulb_outline),
new Text('Idea'),
],
),
),
FlatButton(
onPressed: () {},
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Icon(Icons.lightbulb_outline),
new Text('Idea'),
],
),
),
FlatButton(
onPressed: () {},
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Icon(Icons.lightbulb_outline),
new Text('Idea'),
],
),
),
],
),
],
The only problem is that mainAxisAlignment property doesn't make any changes, so the three buttons are sided together
See here
Any help?
For create a persistentFooterButtons you need to use bottomNavigationBar.
And For create 3 flatButton with equal size, you need to use flex attribute inside Expanded Widget.
Scaffold(
body: Container(
color: Colors.white,
child: Center(child: Text("Flutter"),),
),
bottomNavigationBar: new Container(
padding: EdgeInsets.all(0.0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 1,
child: FlatButton.icon(
onPressed: () {
},
icon: Icon(Icons.search),
label: Text("Search"),
),
),
Expanded(
flex: 1,
child: FlatButton.icon(
onPressed: () {
},
icon: Icon(Icons.search),
label: Text("Search"),
),
),
Expanded(
flex: 1,
child: FlatButton.icon(
onPressed: () {
},
icon: Icon(Icons.search),
label: Text("Search"),
),
),
],
),
),
);