Related
We need to move the icons to the end of the Card and with a distance of 17px between them. I tried in different ways and align, but for some reason I can not move the icons to the end. I would be grateful if you tell me how to do it right.
Scrollbar(
isAlwaysShown: true,
thickness: 2,
scrollbarOrientation: ScrollbarOrientation.left,
child: ListView.builder(
itemCount: close.length,
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.only(left: 9),
child: SizedBox(
height: 47,
child: Card(
color: constants.Colors.greyMiddle,
margin: const EdgeInsets.only(
bottom: 4,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 9, vertical: 5),
child: Row(
// mainAxisAlignment: MainAxisAlignment.start,
children: [
const CircleAvatar(
backgroundColor: constants.Colors.white,
),
const SizedBox(
width: 11,
),
Text(
close[index],
style: constants.Styles.smallerLtStdTextStyleWhite,
),
IconButton(
onPressed: () {},
icon: SvgPicture.asset(constants.Assets.barPoynts)),
IconButton(
onPressed: () {},
icon: SvgPicture.asset(constants.Assets.crypto)),
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
constants.Assets.barFavourites)),
],
),
),
),
),
),
),
),
You should wrap your Text widget with the Expanded widget, Which allocates the max-width to your Text so if your text gets bigger in length it will wrap it in a new line.
Expanded(
child: Text(
close[index],
style: constants.Styles.smallerLtStdTextStyleWhite,
),
),
Output:
If you use only the Spacer widget as per the other answer (which will do the work) but if your text length got bigger it will result in an overflow error.
Like below:
Also Do not use Spacer and Expanded together, as Expanded's default flex and Spacer's default flex are set to 1, flutter will allocate 'em equal amount of space and which will again cause an issue for you.
for example:
You can try putting a Spacer() before the IconButtons. So like
children: [
const CircleAvatar(
backgroundColor: constants.Colors.white,
),
const SizedBox(
width: 11,
),
Text(
close[index],
style: constants.Styles.smallerLtStdTextStyleWhite,
),
const Spacer(),
IconButton(
onPressed: () {},
icon: SvgPicture.asset(constants.Assets.barPoynts)),
IconButton(
onPressed: () {},
icon: SvgPicture.asset(constants.Assets.crypto)),
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
constants.Assets.barFavourites)),
],
Spacers always take as much space as they can
{Text(close[index],
style: constants.Styles.smallerLtStdTextStyleWhite,
),}
After this, Write
Expanded(child:Container()),
And then icons. It will make space of container with empty area in Row.
How can I create a row w/2 buttons that, together, take up the space of their parent (the row)? I want to place this row immediately above the bottom navigation bar at times and then at other times I want it to take the place of the bottom navigation bar. Can I do it just using Row? I've tried persistentFooterButtons with a child of Row and children of FractionallySizedBox but it results in an overflow error and the buttons don't take up the height of of the persistentFooterButtons. There's got to be a better, more straight-forward, approach. Just learning Flutter.
This is a rough example of what I want placed at the bottom of the screen (buttons should be of equal height), where the bottom nav bar would be... and/or immediately above.
[![horizontallyAlignedButtonsWithWidthOfRow][1]][1]
Some of the many (unsuccessful attempts) below:
Wrap Buttons in Expand Attempt:
return Row(
children: <Widget>[
Expanded(
child: ElevatedButton(
onPressed: () {},
style: TextButton.styleFrom(backgroundColor: Colors.blue),
child: Text(
"Some Text #1",
style: TextStyle(color: Colors.white),
))),
Expanded(
child: ElevatedButton(
onPressed: () {},
style: TextButton.styleFrom(backgroundColor: Colors.green),
child: Text("Some Text #2"),
),
),
],
Wrap Buttons in Expand Attempt Result:
[![Result][2]][2]
As you can see, there is white space that shouldn't be there and the buttons are evenly spaced. I have also tried using ColoredBoxes instead of buttons as I read that buttons have margins that cannot be changed?
UPDATE
Finally figured it out, with the help of #lava solutions. Just made a few tweaks to it to remove white space, etc.
return Container(
padding: EdgeInsets.all(0.0),
height: 50,
child: Row(
children: [
Container(
height: 50,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue, // background
onPrimary: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
),
onPressed: () {},
child: Text("Button1"),
),
),
Expanded(
child: Container(
height: 100,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.green, // background
onPrimary: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.zero)),
onPressed: () {},
child: Text("Button2"),
),
),
)
],
),
);
}
}```
[1]: https://i.stack.imgur.com/CydR4.png
[2]: https://i.stack.imgur.com/1JifM.png
Container(
padding: EdgeInsets.all(8.0),
height: 100,
child: Row(
children: [
Expanded(
child: Container(
height: 100,
child: ElevatedButton(
onPressed: () {},
child: Text("Button1"),
),
)),
Container(
padding: EdgeInsets.only(left: 8.0),
height: 100,
child:
ElevatedButton(onPressed: () {}, child: Text("Button2")))
],
),
)
Container(
padding: EdgeInsets.all(8.0),
height: 100,
child: Row(
children: [
Expanded(
child: Container(
height: 100,
child: ElevatedButton(
onPressed: () {},
child: Text("Button1"),
),
),
),
Expanded(
child: Container(
padding: EdgeInsets.only(left: 8.0),
height: 100,
child: ElevatedButton(
onPressed: () {},
child: Text("Button2"),
),
),
)
],
),
)
FullCode
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(MaterialApp(home: Mainwidget()));
}
class Mainwidget extends StatefulWidget {
const Mainwidget({Key? key}) : super(key: key);
#override
_MainwidgetState createState() => _MainwidgetState();
}
class _MainwidgetState extends State<Mainwidget> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: EdgeInsets.all(8.0),
height: 100,
child: Row(
children: [
Expanded(
child: Container(
height: 100,
child: ElevatedButton(
onPressed: () {},
child: Text("Button1"),
),
),
),
Expanded(
child: Container(
padding: EdgeInsets.only(left: 8.0),
height: 100,
child: ElevatedButton(
onPressed: () {},
child: Text("Button2"),
),
),
)
],
),
),
),
);
}
List<Widget> children() {
return [
Expanded(
child: Container(
height: 100,
child: ElevatedButton(
onPressed: () {},
child: Text("Button1"),
),
)),
Container(
padding: EdgeInsets.only(left: 8.0),
height: 100,
child:
ElevatedButton(onPressed: () {}, child: Text("Button2")))
];
}
}
You can either add persistentFooterButtons to the Scaffold like
Scaffold(
persistentFooterButtons: [
TextButton(),
TextButton()
]
)
Or in the view:
Column(
children: [
Expanded(child: yourContent), // To use max height space
Row(
children: [
Expanded(child: TextButton()),
Expanded(child: TextButton()),,
]
),
]
),
To give a different width you can add flex to the Expanded or use Flexible and add flex
Wrap both your buttons with Expanded so that they take same amount of width and fill the row.
thanks for opening the question, I am learning the flutter and I am learning about the button, I want to make the following design in the flutter
but am not able to find any widget which can be used, there is something the icon in the elevated button which I have used but I am not able to achieve the design.
using the elevatedButton.icon
return SizedBox(
width: double.infinity,
height: 48,
child: ElevatedButton.icon(
icon:Icon(
prefixIcon, // passing from the main widget
),
onPressed: () => {},
label: Text(text),
style: ElevatedButton.styleFrom(
primary: backgroundColor
),
),
);
}
}
Try to below answer hope its helpful to you
Container(
width: 250,
height: 50,
margin: const EdgeInsets.all(5),
child: ElevatedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.login), //use your google image here
Text('Sign in with Google '),
Opacity(
opacity: 0,
child: Icon(Icons.login),
)
],
),
style: ElevatedButton.styleFrom(
primary: Colors.red,
),
),
),
Your Button look like this->
you can use this to achieve your desired widget:
Container(
width: 256,
height: 48,
margin: const EdgeInsets.all(8),
child: ElevatedButton(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const <Widget>[
Icon(Icons.login), // your google image
Expanded(child: Center(child: Text('Sign in with Google'))),
],
),
style: ElevatedButton.styleFrom(primary: Colors.red),
onPressed: () {},
),
);
I'm trying to make this drawing but I'm struggling.
I don't understand how to make the white block of information dynamic. That is to say that it automatically adapts to the size in height of the elements it contains.
I am for the moment obliged to give a defined height (here 200), I would like the size to be automatic. Moreover if I do not give a defined size my gray line on the left side disappears.
The design :
ListTile(
title : Column(
children: [
Container(
width: double.infinity,
child: Row(
children: [
Container(
width: 50,
alignment: Alignment.center,
child: Container(
width: 20,
height: 20,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
border: Border.all(
width: 5,
color: Colors.blue,
style: BorderStyle.solid
)
),
),
),
Text('9:00 am - 9:15 am')
],
)
),
Container(
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
width : 50,
alignment: Alignment.center,
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.grey,
width: 3,
height : 200 // if I remove the size it desappear
),
],
),
),
),
Expanded(
child: Container(
margin: EdgeInsets.symmetric(vertical :10),
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
color: Colors.white,
child: Column(
children: [
Text('Titre'),
Text('Info 1'),
Text('Info 2')
],
),
),
)
],
),
),
)
],
),
),
You can try this package for timelines https://pub.dev/packages/timeline_tile.
This package also automatically Sizes your widget height and width.
And for Automatically Sizing your widgets next time, You could use Expanded widget at most places in your code.
Note: An Expanded widget must be a descendant of a Row, Column, or Flex, So Use it carefully.
I think it's much easier with this package, timelines.
TimelineTileBuilder.connected(
connectionDirection: ConnectionDirection.before,
itemCount: processes.length,
contentsBuilder: (_, index) {
//your Container/Card Content
},
indicatorBuilder: (_, index) {
if (processes[index].isCompleted) {
return DotIndicator(
color: Color(0xff66c97f),
child: Icon(
Icons.check,
color: Colors.white,
size: 12.0,
),
);
} else {
return OutlinedDotIndicator(
borderWidth: 2.5,
);
}
},
connectorBuilder: (_, index, ___) => SolidLineConnector(
color: processes[index].isCompleted ? Color(0xff66c97f) : null,
),
),
),
I want to know that how can I set a width to match parent layout width
new Container(
width: 200.0,
padding: const EdgeInsets.only(top: 16.0),
child: new RaisedButton(
child: new Text(
"Submit",
style: new TextStyle(
color: Colors.white,
)
),
colorBrightness: Brightness.dark,
onPressed: () {
_loginAttempt(context);
},
color: Colors.blue,
),
),
I know about little bit on Expanded widget but Expanded expands view to both direction, i dont know how to do it.
Update:
With Flutter 2.0 RaisedButton is deprecated and replaced by ElevatedButton. you can use minimumSize like this:
ElevatedButton(
style: ElevatedButton.styleFrom(
minimumSize: Size.fromHeight(40), // fromHeight use double.infinity as width and 40 is the height
),
onPressed: () {},
child: Text('Text Of Button'),
)
Old answer for Flutter less than 2.0:
The correct solution would be to use the SizedBox.expand widget, which enforces its child to match its parent's size.
SizedBox.expand(
child: RaisedButton(...),
)
There are many alternatives, which allows for more or less customization:
SizedBox(
width: double.infinity,
// height: double.infinity,
child: RaisedButton(...),
)
or using a ConstrainedBox
ConstrainedBox(
constraints: const BoxConstraints(minWidth: double.infinity),
child: RaisedButton(...),
)
Container(
width: double.infinity,
child: RaisedButton(...),
),
After some research, I found out some solution, and thanks to #Günter Zöchbauer,
I used column instead of Container and
set the property to column CrossAxisAlignment.stretch to Fill match parent of Button
new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new RaisedButton(
child: new Text(
"Submit",
style: new TextStyle(
color: Colors.white,
)
),
colorBrightness: Brightness.dark,
onPressed: () {
_loginAttempt(context);
},
color: Colors.blue,
),
],
),
The size attribute can be provided using ButtonTheme with minWidth: double.infinity
ButtonTheme(
minWidth: double.infinity,
child: MaterialButton(
onPressed: () {},
child: Text('Raised Button'),
),
),
or after https://github.com/flutter/flutter/pull/19416 landed
MaterialButton(
onPressed: () {},
child: SizedBox.expand(
width: double.infinity,
child: Text('Raised Button'),
),
),
The simplest way is to use a FlatButton wrapped inside a Container, The button by default takes the size of its parent and so assign a desired width to the Container.
Container(
color: Colors.transparent,
width: MediaQuery.of(context).size.width,
height: 60,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
onPressed: () {},
color: Colors.red[300],
child: Text(
"Button",
style: TextStyle(
color: Colors.black,
fontFamily: 'Raleway',
fontSize: 22.0,
),
),
),
)
Output:
You can set match parent of the widget by
1) set width to double.infinity :
new Container(
width: double.infinity,
padding: const EdgeInsets.only(top: 16.0),
child: new RaisedButton(
child: new Text(
"Submit",
style: new TextStyle(
color: Colors.white,
)
),
colorBrightness: Brightness.dark,
onPressed: () {
_loginAttempt(context);
},
color: Colors.blue,
),
),
2) Use MediaQuery:
new Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.only(top: 16.0),
child: new RaisedButton(
child: new Text(
"Submit",
style: new TextStyle(
color: Colors.white,
)
),
colorBrightness: Brightness.dark,
onPressed: () {
_loginAttempt(context);
},
color: Colors.blue,
),
),
#Mohit Suthar,
Found one of the best solution for match parent to width as well as height as below
new Expanded(
child: new Container(
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.all(16.0),
decoration: new BoxDecoration(
color: Colors.white,
borderRadius:
const BorderRadius.all(const Radius.circular(8.0)),
border: new Border.all(color: Colors.black, width: 1.0)),
child: new Text("TejaDroid")),
),
Here you can check that the Expanded Controller acquire whole remain width and height.
For match_parent you can use
SizedBox(
width: double.infinity, // match_parent
child: RaisedButton(...)
)
For any particular value you can use
SizedBox(
width: 100, // specific value
child: RaisedButton(...)
)
The simplest way to give match-parent width or height in the given code above.
...
width: double.infinity,
height: double.infinity,
...
There are many ways to make full width button. But I think you should understand the concept of making full width widgets in different scenarios:
When you are using nested widgets then it is hard to identify width of parent widget. Simply you can't specify width in nested widgets. So you should use either Expanded or Column with CrossAxisAlignment as Strech.
In other cases, you can use media query width or double.infinity.
Here are some examples for Nested widgets and single widget:
First:
Expanded( // This will work for nested widgets and will take width of first parent widget.
child: MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
)
Second:
Column( // This will not work if parent widget Row.
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
]
)
Third:
ButtonTheme( // if use media query, then will not work for nested widgets.
minWidth: double.infinity, //Or use 'width: MediaQuery.of(context).size.width'
child: MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
)
Forth:
SizedBox( // if use media query, then will not work for nested widgets.
width: double.infinity, //Or use 'width: MediaQuery.of(context).size.width'
child: MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
)
Fifth:
Container( // if use media query, then will not work for nested widgets.
width: double.infinity, //Or use 'width: MediaQuery.of(context).size.width'
child: MaterialButton(
onPressed: () {},
child: const Text("Button Text"),
color: Colors.indigo,
textColor: Colors.white,
)
)
From my point of view, recommended will be the First one. Also you can change MaterialButton to ElevatedButton or TextButton or RaisedButton (Depreciated) or any other widget.
Cheers!
you can do that with MaterialButton
MaterialButton(
padding: EdgeInsets.all(12.0),
minWidth: double.infinity,
onPressed: () {},
child: Text("Btn"),
)
You can set the fixedSize.width of the ButtonStyle to a very large number, like double.maxFinite. You can also use Size.fromWidth() constructor if you don't want to specify the height:
ElevatedButton(
child: const Text('Button'),
style: ElevatedButton.styleFrom(
fixedSize: const Size.fromWidth(double.maxFinite),
),
),
Live Demo
The most basic approach is using Container by define its width to infinite. See below example of code
Container(
width: double.infinity,
child:FlatButton(
onPressed: () {
//your action here
},
child: Text("Button"),
)
)
OutlineButton(
onPressed: () {
logInButtonPressed(context);
},
child: Container(
width: MediaQuery.of(context).size.width / 2,
child: Text(
“Log in”,
textAlign: TextAlign.center,
),
),
)
Something like this works for me.
The Following code work for me
ButtonTheme(
minWidth: double.infinity,
child: RaisedButton(child: Text("Click!!", style: TextStyle(color: Colors.white),), color: Colors.pink, onPressed: () {}))
This is working for me in a self contained widget.
Widget signinButton() {
return ButtonTheme(
minWidth: double.infinity,
child: new FlatButton(
onPressed: () {},
color: Colors.green[400],
textColor: Colors.white,
child: Text('Flat Button'),
),
);
}
// It can then be used in a class that contains a widget tree.
This is working for me.
SizedBox(
width: double.maxFinite,
child: RaisedButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: new Text("Button 2"),
color: Colors.lightBlueAccent,
onPressed: () => debugPrint("Button 2"),
),
),
RaisedButton(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text('Submit')],
)
)
It works for me.
With Flutter 2.0 RaisedButton is deprecated and replaced by ElevatedButton.
minimumSize property of ElevatedButton widget exactly does that.
Example code:
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.green,
onPrimary: Colors.white,
shadowColor: Colors.greenAccent,
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
minimumSize: Size(100, 40), //////// HERE
),
onPressed: () {},
child: Text('MyButton'),
)
new SizedBox(
width: 100.0,
child: new RaisedButton(...),
)
Using a ListTile also works as well, since a list fills the entire width:
ListTile(
title: new RaisedButton(...),
),
This one worked for me
width: MediaQuery.of(context).size.width-100,
Wrap your (child widget having a fixed width) with a center widget. This will center your widget:
Center(child:Container(width:250,child:TextButton(child:Text("Button Name),),)
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue),
fixedSize: MaterialStateProperty.all(
Size(double.maxFinite, 50.0),
),
),
onPressed: () {},
child: Text('Upgrade to Premium'),
),
TRY
Flexible(
child: Row(
children: [
ElevatedButton(
onPressed: () {},
child: Text("love you}"),
),
],
),
),