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(...)
)
Related
Consider this UI:
Code:
Widget shopHeader(var shopName, var shopAddress){
return Container(
height: 200,
margin: const EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
padding: const EdgeInsets.all(1.0),
child: const Icon(Icons.home, color: Colors.black),
decoration: const BoxDecoration(
color: Colors.grey, // border color
shape: BoxShape.circle,
),
),
const SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
shopName,
style: TextStyle(fontSize: 17),
),
Text(
shopAddress,
style: TextStyle(fontSize: 14, color:Colors.black38),
),
Padding(
padding: EdgeInsets.only(left:0.0, right:0.0, top:20.0, bottom:0.0),
child: SizedBox(
width: 150,
child: ElevatedButton(
child: Text('Chat'),
onPressed: () {},
))
)
],
),
],
),
);
}
The icon on the left is too low. How to set it so it's align with "Awesome Shop" text?
On the topmost Row widget use the crossAxisAllignment property to CrossAxisAllignment.start.
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 design my custom view and there's one thing that's not clear to me, when I try to pass my button with a white background, I get a black color and I don't understand why, everyone can explain it to me?
my code :
Expanded(
flex: 3,
child: Container(
color: this.backgroundColorBox,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Center(
child: SvgPicture.asset(
this.iconPath,
color: Colors.white,
height: 150,
width: 150,
),
),
flex: 2,
),
Expanded(
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Text(
this.textBox,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
color: Color.fromRGBO(0, 35, 63, 0.5)
),
),
),
ButtonTheme(
minWidth: 180,
height: 50,
child: RaisedButton(
color: this.backgroundColorButton,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Text(
this.textButton,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
color: this.textColorButton
),
),
onPressed: null,
),
)
]
),
),
flex: 2,
),
]
),
)
);
What is the real problem?
whenever you leave the onPressed property as null the button will be in disabled state so you should provide a function to your button onPressed property to see it in it's active state.
You have to define the color inside ButtonTheme also with parameter "buttonColor" as Colors.white.
I am new to the flutter and recently wide coding I came to a scenario where I have to indecently align the elements in the row. I have 3 child elements lets call it A, B and C. My requirement is to to the A and B to the extreme left of the row and the element C to the extreme right.
Expectation:
My code:
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(''),
radius: 30,
),
SizedBox(
width: 10,
),
Flexible(
child: Text('name', overflow: TextOverflow.ellipsis,),
),
SizedBox(
width: 10,
),
Container(
child: ButtonTheme(
height: 25.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
child: RaisedButton(
child: Text(
'Challenge',
style: TextStyle(color: Colors.white, fontSize: 12),
),
onPressed: () {},
),
),
),
],
),
But the output is coming like this:
When I tried using Spacer() the output comes like this:
Anyone can please help me with this. Thanks in advance.
wrap your text with Expanded widget and set your textAlign of your text widget to TextAlign.start like below code:
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(''),
radius: 30,
),
SizedBox(
width: 10,
),
Expanded(
child: Text(
'name',
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.start,
),
),
SizedBox(
width: 10,
),
Container(
child: ButtonTheme(
height: 25.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
child: RaisedButton(
child: Text(
'Challenge',
style: TextStyle(color: Colors.white, fontSize: 12),
),
onPressed: () {},
),
),
),
],
),
Try this, it should work for you.
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(''),
radius: 30,
),
SizedBox(width: 10),
Expanded(
child: Text('name', align: TextAlign.start, overflow: TextOverflow.ellipsis),
),
SizedBox(width: 10),
Container(
child: ButtonTheme(
height: 25.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
child: RaisedButton(
child: Text('Challenge', style: TextStyle(color: Colors.white, fontSize: 12)),
onPressed: () {},
)
)
)
]
)
You have to wrap your Text widget in an Expanded widget like the example below.
Try this, it works perfectly,
Check code below:
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(''),
radius: 30,
),
SizedBox(
width: 10,
),
Expanded(
// wrap your text widget with an Expanded widget
child: Text(
'name',
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.start,
),
),
SizedBox(
width: 10,
),
Container(
child: ButtonTheme(
height: 25.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(100.0)),
child: RaisedButton(
child: Text(
'Challenge',
style: TextStyle(color: Colors.white, fontSize: 12),
),
onPressed: () {},
),
),
),
],
),
I hope this helps you.
I have spent a couple hours just to create a reusable widget in flutter. My expected result is gonna be like this:
but I'm stuck to fill the opacity width depending on it's parent like this:
here's the code I've tried:
Stack(
children: <Widget>[
Container(
padding: const EdgeInsets.all(12),
child: Image.network(
"https://raw.githubusercontent.com/flutter/website/master/examples/layout/lakes/step5/images/lake.jpg",
fit: BoxFit.cover
)
),
Positioned(
left: 15,
bottom: 15,
child: Container(
decoration: BoxDecoration(
color: Color.fromRGBO(0, 0, 0, 0.5)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text("TITLE", style: new TextStyle(fontSize: 28, color: Colors.white)),
new Text("Sub Title", style: new TextStyle(fontSize: 20, color: Colors.white))
],
),
FlatButton(
color: Colors.red[400],
highlightColor: Colors.red[900],
onPressed: (){},
child: new Text("Book Now", style: new TextStyle(fontSize: 28, color: Colors.white)),
)
],
),
)
)
],
)
any suggestion?
Short answer:
You need to add right property in your Positioned widget. Like this
Positioned(
left: 15,
bottom: 15,
right: 0,
...)
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Title")),
body: Container(
width: 300,
height: 300,
child: Stack(
alignment: Alignment.bottomLeft,
children: <Widget>[
Image.asset(
"assets/images/chocolate_pic.png",
width: 300,
height: 300,
fit: BoxFit.cover,
),
Container(
color: Colors.black.withOpacity(0.5),
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text("Awesome", style: TextStyle(fontSize: 28)),
Text("Chocolate", style: TextStyle(fontSize: 22)),
],
),
)
],
),
),
);
}
Instead of this
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text("TITLE", style: new TextStyle(fontSize: 28, color: Colors.white)),
new Text("Sub Title", style: new TextStyle(fontSize: 20, color: Colors.white))
],
),
FlatButton(
color: Colors.red[400],
highlightColor: Colors.red[900],
onPressed: (){},
child: new Text("Book Now", style: new TextStyle(fontSize: 28, color: Colors.white)),
)
],
),
You can use ListTile widget inside the positioned and container which has title, subtitle and trailing(book now button can be placed here). And make the background color of container to black/white with opacity.