CODEWITHSUNDEEP
flutterdart
Shelbert Miller
Shelbert Miller

Reputation: 57

Remove excess padding from text widget in Flutter

The text widget is wrapped in a row with Expanded and a sized box with a height set to provide space from lower widget.

  Row(children: <Widget>[
    Expanded(
        child: Icon(
          Icons.favorite,
          color: Colors.grey,
          size: 24.0,
        )),
    Expanded(
      child: Text(
        "Dashboard",
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
    Expanded(
      child: SizedBox(height: 10),
    )
  ]),

Upvotes: 0

Views: 3224

Answers (2)

ישו אוהב אותך
ישו אוהב אותך

Reputation: 29783

Like @Daniel says, Expanded will add extra space to your widget. Here the documentation excerpt of Expanded:

A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.

Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor.

So, you need to remove the Expanded part for your Icon.

Here the sample with removed Expanded from Icon add added padding (ignore the color):

enter image description here

Here the updated code:

  Padding(
    padding: const EdgeInsets.all(8.0),
    child: Row(children: [
      Icon(
        Icons.favorite,
        color: Colors.grey,
        size: 24.0,
      ),
      SizedBox(width: 5), // Give some space to icon.
      Expanded(
        child: Text(
          "Dashboard",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
      Expanded(
        child: SizedBox(height: 10),
      )
    ]),
  ),

You can use SizedBox(width: 5) to add extra space from your Icon.

Upvotes: 1

Floyd Watson
Floyd Watson

Reputation: 408

class Foo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(right: 4.0),
            child: Icon(Icons.favorite, color: Colors.grey, size: 24.0),
          ),
          Text(
              "Dashboard",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          
        ],
      ),
    );
  }
}

That should give you the desired outcome

Use Padding on the bottom of Row to give you that space you desire from widget below. As stated in the comments Expanded will take all available space.

Upvotes: 0

Related Questions