Flutter view with two big buttons - flutter

I wanted to make a view with two big buttons. I saw an example with Row and Expanded inside, however, Column did not work the same way. I tried with Container of height MediaQuery.of(context).size.height * 0.5, but the paddings I had made the buttons to overflow.
Something like this
EDIT: Complete code
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Title'),
),
body: Padding(
padding: EdgeInsets.all(12),
child: Column(children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.all(12),
child: OutlineButton(
onPressed: () => null,
child: Text('Button A'),
))),
Expanded(
child: Padding(
padding: EdgeInsets.all(12),
child: OutlineButton(
onPressed: () => null,
child: Text('Button B'),
),
),
)
])));
}
}

You need to add the property crossAxisAlignment: CrossAxisAlignment.stretch in the Column widget to make all the children be stretched in the cross direction (axis X).
You can see a live example of this working here: https://dartpad.dev/825104f44446432166803c0473ea4437

Wrap your Column in Flexible and add in your Column crossAxisAlignment: CrossAxisAlignment.stretch
Flexible(
child: Padding(
padding: EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.all(12),
child: OutlineButton(
onPressed: () => null,
child: Text('Button A'),
))),
Expanded(
child: Padding(
padding: EdgeInsets.all(12),
child: OutlineButton(
onPressed: () => null,
child: Text('Button B'),
),
),
)
])),
)

return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
child: Text("1"),
onPressed: (){},
color: Colors.orange,
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
child: Text("2"),
onPressed: (){},
color: Colors.blue,
),
),
)
],
),
)
);

Related

Flutter remove bottom padding container

I created a custom dialogBox but when I add 2 buttons at the bottom I still have a padding, how can I remove it?
This is my code
contentBox(context) {
return ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
color: Colors.white,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.all(20),
child: Column(
children: [
Text(
widget.title,
style: TextStyle(fontSize: 23, fontWeight: FontWeight.w600),
textAlign: TextAlign.center,
),
SizedBox(height: 15),
Text(
widget.descriptions,
style: TextStyle(fontSize: 16),
textAlign: TextAlign.center,
),
],
),
),
Row(
children: <Widget>[
Expanded(
child: RaisedButton(
child: Text('Reject'),
onPressed: () => null,
),
),
Expanded(
child: RaisedButton(
color: Colors.amber,
child: Text('Approve'),
onPressed: () => null,
),
),
],
),
],
),
),
);
}
Result :
PS: if there are optimizations, please tell me as I'm beginning in flutter
This is because RaisedButton have a fixed height. Wrap the RaisedButton inside a Container widget and give it a height value. Like this and it should be fine
Expanded(
child: Container(
height: 48,
child: RaisedButton(
child: Text('Reject'),
onPressed: () => null,
),
),
),
Do this for both of your buttons
This is the output:
Also if you want to create an alert box it is better to use flutter build in widgets like AlertDialog if you want iOS styled alert box then you can use CupertinoAlertDialog
AlertDialog's are very well explained in this video
RaisedButton have some default padding, so you need to create a custom button like this :
class CustomButton extends StatelessWidget {
const CustomButton({
Key key,
this.backgroundColor,
this.child,
}) : super(key: key);
final child;
final Color backgroundColor;
#override
Widget build(BuildContext context) {
return Container(
height: 40,
child: Material(
color: backgroundColor,
child: InkWell(
onTap: () {},
child: Container(
alignment: Alignment.center,
child: child,
),
),
),
);
}
}
Now use it in your code, replace your row with this
Row(
children: <Widget>[
Expanded(
child: CustomButton(
backgroundColor: Colors.grey[100],
child: Text('Reject'),
),
),
Expanded(
child: CustomButton(
backgroundColor: Colors.amber,
child: Text('Approve'),
),
),
],
),
Result :

'package:flutter/src/widgets/navigator.dart': Failed assertion: line 4366 pos 12: '<optimized out>': is not true

I am new to flutter
I am getting this exception while navigating to another screen on button click.
Here is the code..
trailing: IconButton(
icon: Icon(
Icons.cancel,
size: 30.0,
color: Colors.red,
) ,
onPressed:() => Navigator.push(
context,
MaterialPageRoute(builder: (BuildContext context)=>
CancelPage()
),
Following is the code for CancelPage
class CancelPage extends StatelessWidget{
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text(
"Reason",
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.amber[600],
),
body: new Container(
child: new Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Form(
child: new Column(
children: <Widget>[
new Padding(
padding: const EdgeInsets.all(10.0),
child: new TextFormField(),
)
],
),
),
Center(
child: Row(
children: [
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
onPressed:()=> Navigator.pop(context),
child: new Text("Submit"),
color: Colors.red[900],
),
),
),
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
onPressed:null,
child: new Text("Cancel"),
color: Colors.red[900],
),
),
),
],
),
)
],
)),
),
);
}
I am getting exception when I click on cancel iconbutton
package:flutter/src/widgets/navigator.dart: Failed assertion: line 4366 pos 12: 'optimized out': is not true.
Can anyone help??

How to space between rows?

I have an expanded widget for my ClipRRect, which I think I need, but I also need to spacebetween my row, but I can't manage it. If I wrap it in an expanded widget it changes the size of my image in ClipRRect, which I don't want to do. This is my code:
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(6),
child: GestureDetector(
onTap: function,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
flex: 1,
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Stack(
children: <Widget>[
assetImage,
],
),
),
),
Row(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text('$myText -', style: myTextStyle),
SizedBox(width: 5.0,),
Text('$locationText', style: myTextStyle),
],
),
Card(
elevation: 1,
color: Colors.white,
shape: cardBorder,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('$myText - $endmyText mins', style: myTextStyle,),
),
),
],
),
],
),
),
),
);
}
Assuming your question says you want to divide widgets with equal spaces, for it replaces Row with Wrap widget
Wrap(
direction: Axis.horizontal,
spacing: 30, // add space in between widget
children: <Widget>[
Wrap(
spacing: 30, // add space in between widget
direction: Axis.horizontal,

Column/Scrollview not showing after i made a fixed bottom bar

Apparently i tried to make a bottom button for checkout and it seems to be affecting how the body of the app is working. This only happened after i added the bottomnavbar padding etc
heres the link for the snip: https://imgur.com/a/sDhqasr
class _State extends State<CartOverviewScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Your Cart'),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Center(child: Text('HI!'),)
],
),
),
bottomNavigationBar: Padding(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Card(
margin: EdgeInsets.all(15),
child: Padding(
padding: EdgeInsets.all(8),
child: Row(
children: <Widget>[
Text(
'Total',
style: TextStyle(
fontSize: 20,
),
),
SizedBox(width: 10,),
Chip(label: Text('\$0.00'),)
],
),
),
),
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(
elevation: 8,
onPressed: () {},
color: colorCustom,
textColor: Colors.white,
child: Text('Checkout'),
),
),
],
),
),
);
}
}
you can also try this
class _State extends State<stat> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Your Cart'),
),
body: Column(
children: <Widget>[
Expanded(
child: Center(
child: Text("Hi"),
),
)
],
),
bottomNavigationBar: Padding(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Card(
margin: EdgeInsets.all(15),
child: Padding(
padding: EdgeInsets.all(8),
child: Row(
children: <Widget>[
Text(
'Total',
style: TextStyle(
fontSize: 20,
),
),
SizedBox(
width: 10,
),
Chip(
label: Text('\$0.00'),
)
],
),
),
),
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(
elevation: 8,
onPressed: () {},
color: Colors.red,
textColor: Colors.white,
child: Text('Checkout'),
),
),
],
),
),
);
}
}
Ahh i found my own answer actually, the problem was caused by bottomNavigationBar hogging the entire body of the app. i just needed to place the following code from below onto the bottomNavigationBar Column.
mainAxisSize: MainAxisSize.min

How to make a screen scrollable in Flutter?

In my Flutter project, in one page I have some rows including card align vertically. Now, I want this screen to make scroll-able.
I have tried replacing the column to Listview but it didn't work. I also tried to wrap it with SingleChildScrollview but didn't work. It shows like below image-
Here's the code -
HomeFragment.dart
class HomeFragment extends StatefulWidget {
#override
_HomeFragmentState createState() => new _HomeFragmentState();
}
String jwt;
class _HomeFragmentState extends State<HomeFragment> {
List<LastEngagement> _lastEngagements = List<LastEngagement>();
#override
void initState() {
super.initState();
_getLastEngagement;
_getLastEngagement2();
}
void _getLastEngagement() {
Webservice().load(LastEngagement.allLastEngagement).then((newsArticles) => {
setState(() => {
_lastEngagements = newsArticles
})
});
}
void _getLastEngagement2() {
Webservice().load(LastEngagement.allLastEngagement).then((newsArticles) => {
setState(() => {
_lastEngagements = newsArticles
})
});
}
Card showCard(int index) {
return new Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(
"https://randomuser.me/api/portraits/men/1.jpg"
),
),
SizedBox(
width: 10.0,
),
Expanded(child: Text(_lastEngagements[index].title)),
],
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('News'),
),
body:Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.blue,
child: SizedBox(
height: 100.0,
child: new ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: _lastEngagements.length,
itemBuilder: (BuildContext ctxt, int index) {
return Container(
width: 200.0,
child: showCard(index),
);
},
),
),
),
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: InkWell(
splashColor: Colors.blue.withAlpha(30),
onTap: () {
print('Card tapped.');
},
child: Container(
height: 100,
child: Text('A card that can be tapped'),
),
),
),
),
),
],
)
],
)
);
}
}
Replacing the Column by Listview causes following error-
So, I need a permanent solution to make my screen scroll-able, doesn't matter whatever widgets I use.
You can use SingleChildScrollView or change the column widget to ListView
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('News'),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
],
),
));
}
Or
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('News'),
),
body: ListView(
children: <Widget>[],
));
}
Well the previous answers do contain the solution .. at least that's what I think .. but they are buggy answers and that's why it's not working .. try this
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("News"),
),
body: Column(
children: <Widget>[
Expanded(
child: SingleChildScrollView(),
)
],
),
);
}
The expanded gives SingleChildScrollView() full height of the screen allowing it to work :)
I think it should work . Good luck
SingleChildScrollView(
scrollDirection: Axis.vertical,)
Try this instead.
Try below code:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('News'),
),
body: Column(
children: <Widget>[
Expanded
(
child: SingleChildScrollView()
),
flex: 1,
]
)
);
}