Related
I don't want the button to be in the centre instead of that I want to change the location of the button to the right and I don't know how to do that. I need some help
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
child: Column(
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
onPressed: (() {}),
child: Text(
'Projects',
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(
height: 50.0,
),
],
),
),
),
I tried to use Padding, but I'm new to Flutter
Try using Align widget like
Align(
alignment: Alignment.centerRight,
child: ElevatedButton(
Wrap the ElevatedButton in Row and add Expanded(child: SizedBox.expand()) as first child to this row and ElevatedButton as 2nd child.
You can give crossAxisAlignment to your column:
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
onPressed: (() {}),
child: Text(
'Projects',
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(
height: 50.0,
),
],
If this doesn't work, you can also do this:
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(child: Container()),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
onPressed: (() {}),
child: Text(
'Projects',
style: TextStyle(
fontSize: 20.0,
),
),
),
],
),
SizedBox(
height: 50.0,
),
],
It depends on the widget tree, how its aligned. Your Padding widget may be wrapped inside some widget which is center aligned. So assuming that your Padding widget alignment is not affected by any parent widget. Here is solution to this.
There are multiple approaches for that. For example,
You can add crossAxisAlignment: CrossAxisAlignment.end, in Column attributes.
You can wrap your ElevatedButton inside a Row and add the mainAxisAlignment: MainAxisAlignment.end, attributes.
You can use Align class to make it work.
Just like this, here i have used both Column and Row alignments for the sake of demonstration. But you can use whatever suits best to your situation.
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
onPressed: (() {}),
child: Text(
'Projects',
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(
height: 50.0,
),
],
),
],
),
),
),
I made some container, there is 2 container in one row. i try to make rounded border in each container using boxdecoration but seems like it cant place on here so i removed it. so anyone can help me to solve this.
and another question, how to make width margin in a column?i want to add a bit space on left inside column, look into 'image what i want'.
image from this code ||
image what i want
Container(
margin: EdgeInsets.only(top: 22),
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: 140,
child: Material(
color: kMainColor, // button color
child: InkWell(
splashColor: Colors.lightBlue[100], // splash color
onTap: () {}, // button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SvgPicture.asset(
'assets/icons/leaf.svg',
height: 30,
width: 30,
color: Colors.white,
),
SizedBox(height: 10),
// icon
Text("Penanaman",
style: GoogleFonts.roboto(
fontSize: 17,
color: Colors.white,
)), // text
],
),
),
),
),
Container(
width: 140,
child: Material(
color: kMainColor, // button color
child: InkWell(
splashColor: Colors.lightBlue[100], // splash color
onTap: () {}, // button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SvgPicture.asset(
'assets/icons/bug.svg',
height: 30,
width: 30,
color: Colors.white,
),
SizedBox(height: 10),
Text("Penyakit & Hama",
style: GoogleFonts.roboto(
fontSize: 17,
color: Colors.white,
)), // text
],
),
),
),
),
],
),
)
Have you looked into Card? Try wrapping each container with Card:
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
child: Container(...)
)
i want to achieve to set text width and height its parent size. this is what i tried but its not working:
Container(
height: double.infinity,
child: Padding(
padding: const EdgeInsets.only(left: 30, right: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap: () {
_onPagerTabItemClicked(0);
},
child: Container(
width: double.infinity,
height: double.infinity,
child: Text("Günlük",
style: TextStyle(color: getTextColor(0))),
)),
GestureDetector(
onTap: () {
_onPagerTabItemClicked(0);
},
child: Container(
width: double.infinity,
height: double.infinity,
child: Text("Günlük",
style: TextStyle(color: getTextColor(0))),
)),
GestureDetector(
onTap: () {
_onPagerTabItemClicked(0);
},
child: Container(
width: double.infinity,
height: double.infinity,
child: Text("Günlük",
style: TextStyle(color: getTextColor(0))),
)),
],
),
),
),
after i used this above code then text width and height is still wrap_content.(i investigated it by giving backgroundcolor to text). How to achieve it?
ps :in the code block that i share the container width and height is
infinite so if i try to surround it with SizedBox.expand its not working.
You can achieve this by Wrapping the Text widget inside a FittedBox with fit: BoxFit.fill so that it occupies all the available space.
Container(
height: double.infinity,
child: Padding(
padding: const EdgeInsets.only(left: 30, right: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
buildItem(Colors.red),
buildItem(Colors.green),
buildItem(Colors.blue),
],
),
),
);
Widget buildItem(Color color) {
return Expanded(
child: Container(
height: double.infinity,
color: color,
child: FittedBox(
fit: BoxFit.fill,
alignment: Alignment.center,
child: GestureDetector(
onTap: (){},
child: Text(
"Günlük",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
),
),
),
),
),
);
You can use SizedBox.expand() to achieve this
Container(
height: 200,
width: 200,
child: SizedBox.expand(
child: Text("Lorem ipsum"),
),
)
PS:
Hi, Ali, I understand what you are looking for but I think it is not possible because the text has no the width or height attributes, it is not something like container, column, etc., It can not expand like them. Even if you look at the view with debug paint open, you won't see the lines that envelop the Text. It looks it is not like TextView for native android.
If you want to achieve this you need to wrap it with a container like I did for the first item of the row. So instead of trying to make the “Text” match_parent, you need to deal with the wrapper of the Text.
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Colors.white,
height: double.infinity,
child: Padding(
padding: const EdgeInsets.only(left: 30, right: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: GestureDetector(
onTap: () {
// _onPagerTabItemClicked(0);
},
child: Container(
color: Colors.red,
width: double.infinity,
height: double.infinity,
child: Container(
color: Colors.purple, //here is the wrapper container
child: Text("Günlük",
style: TextStyle(
color: Colors.black,
backgroundColor: Colors.white)),
),
)),
),
Expanded(
child: GestureDetector(
onTap: () {
// _onPagerTabItemClicked(0);
},
child: Container(
color: Colors.green,
width: double.infinity,
height: double.infinity,
child: Text("Günlük",
style: TextStyle(
color: Colors.black,
backgroundColor: Colors.white)),
)),
),
Expanded(
child: GestureDetector(
onTap: () {
// _onPagerTabItemClicked(0);
},
child: Container(
color: Colors.blue,
width: double.infinity,
height: double.infinity,
child: Text("Günlük",
style: TextStyle(
color: Colors.black,
backgroundColor: Colors.white)),
)),
),
],
),
),
),
),
);
}
You should wrap every child with Expanded. Here is an example
Container(
height: double.infinity,
color: Colors.blue,
child: Padding(
padding: const EdgeInsets.only(left: 30, right: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: GestureDetector(
onTap: () {
print("red");
},
child: Container(
color: Colors.red,
width: double.infinity,
height: double.infinity,
child:
Text("Günlük", style: TextStyle(color: Colors.black)),
)),
),
Expanded(
child: GestureDetector(
onTap: () {
print("abmer");},
child: Container(
color: Colors.amber,
width: double.infinity,
height: double.infinity,
child:
Text("Günlük", style: TextStyle(color: Colors.black)),
)),
),
Expanded(
child: GestureDetector(
onTap: () {
print("green");},
child: Container(
color: Colors.green,
width: double.infinity,
height: double.infinity,
child:
Text("Günlük", style: TextStyle(color: Colors.black)),
)),
),
],
),
),
)
I'm trying to align my more options button to the top right corner in in my column, according to the this SO answer.
How to align single widgets in Flutter?
Here's my code.
return Card(
color: Colors.blueAccent,
child: Container(
height: 100,
width: 350,
child: Column(
children: <Widget>[
Text(
'Day ${widget._dayNumber}',
style: TextStyle(
color: Colors.white,
),
),
Align(alignment: Alignment.topRight,
child: IconButton(onPressed: () {}, icon: Icon(Icons.more_vert),)),
],
),
),
);
And if I change the order of align and text, this happens.
I want to display my button on the top right corner while keeping Text widget on the center top, but align widget seems to take whole line(row).
Is there a way to do correctly achieve that, or do I need to wrap them both in a row?
I've used Stack and Positioned widget to achieve that effect.
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Card(
color: Colors.blueAccent,
child: Container(
height: 100,
width: 350,
child: Column(
children: <Widget>[
Text(
'Day ${widget._dayNumber}',
style: TextStyle(
color: Colors.white,
),
),
],
),
),
),
Positioned(
top: 0,
right: 0,
child: IconButton(
onPressed: () {},
icon: Icon(Icons.more_vert),
),
),
],
);
}
You need to wrap with Row if you want to make them in the same Column
return Card(
color: Colors.blueAccent,
child: Container(
height: 100,
width: 350,
child: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(),
Text(
'Day 1',
style: TextStyle(
color: Colors.white,
),
),
IconButton(
onPressed: () {},
icon: Icon(Icons.more_vert),
),
],
),
],
),
),
);
I've been trying to make my button to fill my container.
But as you can see from the picture above, the button (red) on the left clearly did not fill the entire container(green). I can solve this by adding height to MaterialButton, but IMHO this is not the best solution, because device's height might differ. Can you help me to solve this problem? Thanks.
Here is my code:
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: MaterialButton(
color: Colors.red,
child: Text("Button A"),
onPressed: () {},
),
),
),
Expanded(
child: MaterialButton(
color: Colors.blue,
child: Text("Button B"),
onPressed: () {},
),
),
],
),
Simply Add - materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, in MaterialButton
Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: MaterialButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // Add this
color: Colors.red,
child: Text("Button A"),
onPressed: () {},
),
),
),
Expanded(
child: MaterialButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // Add this
color: Colors.blue,
child: Text("Button B"),
onPressed: () {},
),
),
],
),
You may can try
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
color: Colors.green,
child: SizedBox(
height: 48,
child: MaterialButton(
height: double.infinity,
color: Colors.red,
child: Text("Button A"),
onPressed: () {},
padding: EdgeInsets.all(0),
),
),
),
),
Expanded(
child: SizedBox(
height: 48,
child: MaterialButton(
height: double.infinity,
color: Colors.blue,
child: Text("Button B"),
onPressed: () {},
),
),
),
],
),