flutter text width and height match parent - flutter

Question

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.

Answer 1

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,
),
),
),
),
),
);

Answer 2

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)),
)),
),
],
),
),
),
),
);
}

Answer 3

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)),
)),
),
],
),
),
)