CODEWITHSUNDEEP
flutterdartheightwidthflutter-widget
kokoko
kokoko

Reputation: 3964

flutter text width and height match parent

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.

Upvotes: 2

Views: 4895

Answers (3)

Jawad Hassan
Jawad Hassan

Reputation: 521

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

Screenshot

Upvotes: 7

haliltprkk
haliltprkk

Reputation: 1508

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

enter image description here

Upvotes: 2

Tipu Sultan
Tipu Sultan

Reputation: 1865

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

enter image description here

Upvotes: 1

Related Questions