CODEWITHSUNDEEP
flutterflutter-layout
Abdelrahmen Ayman
Abdelrahmen Ayman

Reputation: 334

Wrapping Expanded Widget in Padding Widget

While learning flutter, I was trying to add some padding to an Image widget which was wrapped inside an Expanded widget, my approach was to wrap the Expanded widget with a Padding widget, but as a result the image actually overflowed. When I changed the code to wrapping the Image widget inside a Padding instead, it worked fine. So my question here is, why did the image overflow when I used the Padding on the Expanded widget instead of the image ? Is it not possible to do that in Flutter ?

Upvotes: 0

Views: 3595

Answers (1)

Limbou
Limbou

Reputation: 369

I am pretty sure your issue was not overflowing of the Expanded widget when you wrapped it with Padding, but rather Flutter threw an Incorrect use of ParentDataWidget exception. That is because widgets like Expanded and Flexible has to be direct children of Column, Row or Flex widgets. That is why the only solution is to use the Padding over the child of Expanded.

Summarising, this code will not work:

Row(
      children: const [
        Padding(
          padding: EdgeInsets.all(8.0),
          child: Expanded(
            child: Icon(Icons.icecream_outlined),
          ),
        ),
        Text("SomeTextyTextHere"),
      ],
    ),

it will not work because Expanded has to be a direct child of Row.

This code however will work fine:

Row(
      children: const [
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(8.0),
            child: Icon(Icons.icecream_outlined),
          ),
        ),
        Text("SomeTextyTextHere"),
      ],
    ),

Upvotes: 3

Related Questions