How to make the Container take the minimal width in Flutter?

AshrafulAlamShakil
December 20, 2022
68 views
4 votes
4 Answers

I am trying to make a custom BottomNavigationBar in Flutter, and here is the code.

bottomNavigationBar: Container(
  margin: const EdgeInsets.fromLTRB(25, 0, 25, 25),
  padding: const EdgeInsets.all(8),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(50),
    color: const Color.fromARGB(255, 25, 30, 32),
  ),
  child: Row(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Expanded(
        child: Container(
          padding: const EdgeInsets.fromLTRB(10, 5, 10, 5),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(50),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Icon(Icons.home_filled),
              Text("Home"),
            ],
          ),
        ),
      ),
      const Padding(
        padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
        child: Icon(Icons.document_scanner, color: Colors.white),
      ),
      const Padding(
        padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
        child: Icon(Icons.person, color: Colors.white),
      ),
    ],
  ),
);

This code outcomes the following result, where the Container‘s width matches its parent’s width, maintaining the margin and padding. The inner Row is supposed to take all available space.

Expectation

I expect the Container to be the smallest. It should not take all available width, but it should fit-wrap all its contents. There should not be spaces between the items.

The Expanded widget is not a problem here. I have also tried setting the inner Row‘s mainAxisSize to MainAxisSize.min but no luck. Tell me if my any portion of my question couldn’t be understood.

After Removing the Expanded Widget:

Expected:

Answers

Try to remove Expanded and wrap your bottomNavigationBar with align like this:

bottomNavigationBar: Align( // <-- add this
    alignment: Alignment.bottomCenter, // <-- add this
    heightFactor: 1, // <-- add this
    child: Container(
      margin: const EdgeInsets.fromLTRB(25, 0, 25, 25),
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(50),
        color: const Color.fromARGB(255, 25, 30, 32),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container( // <-- change this
            padding: const EdgeInsets.fromLTRB(10, 5, 10, 5),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(50),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Icon(Icons.home_filled),
                Text("Home"),
              ],
            ),
          ),
          const Padding(
            padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
            child: Icon(Icons.document_scanner, color: Colors.white),
          ),
          const Padding(
            padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
            child: Icon(Icons.person, color: Colors.white),
          ),
        ],
      ),
    ),
  ),

Note: if you need more padding between items you can change middle item’s padding.

The documentation says:

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

Expanded will fill up the available space, so you need to remove it or try the following code:

bottomNavigationBar: Container(
  margin: const EdgeInsets.fromLTRB(25, 0, 25, 25),
  padding: const EdgeInsets.all(8),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(50),
    color: const Color.fromARGB(255, 25, 30, 32),
  ),
  child: Row(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Expanded(
        flex: 1,
        child: Container(
          padding: const EdgeInsets.fromLTRB(10, 5, 10, 5),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(50),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Icon(Icons.home_filled),
              Text("Home"),
            ],
          ),
        ),
      ),
      Expanded(
        flex: 1,
        child: const Padding(
          padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
          child: Icon(Icons.document_scanner, color: Colors.white),
        ),
      ),
      Expanded(
        flex: 1,
        child: const Padding(
          padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
          child: Icon(Icons.person, color: Colors.white),
        ),
      ),
    ],
  ),
);

Try below code wrap your other widget with Expanded or Remove Container of the 1st Home widget

bottomNavigationBar: Container(
      margin: const EdgeInsets.fromLTRB(25, 0, 25, 25),
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(50),
        color: const Color.fromARGB(255, 25, 30, 32),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: Container(
              padding: const EdgeInsets.fromLTRB(10, 5, 10, 5),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(50),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Icon(Icons.home_filled),
                  Text("Home"),
                ],
              ),
            ),
          ),
          Expanded(
            child: Padding(
              padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
              child: Icon(Icons.document_scanner, color: Colors.white),
            ),
          ),
          Expanded(
            child: Padding(
              padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
              child: Icon(Icons.person, color: Colors.white),
            ),
          ),
        ],
      ),
    ),

Result->

You just need to add Spacer() widget in between your Row children and it works like you want to:

bottomNavigationBar: Container(
        margin: const EdgeInsets.fromLTRB(25, 0, 25, 25),
        padding: const EdgeInsets.all(8),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(50),
          color: const Color.fromARGB(255, 25, 30, 32),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: Container(
                padding: const EdgeInsets.fromLTRB(10, 5, 10, 5),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(50),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    Icon(Icons.home_filled),
                    Text("Home"),
                  ],
                ),
              ),
            ),
            Spacer(), //just add these
            const Padding(
              padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
              child: Icon(Icons.document_scanner, color: Colors.white),
            ),
            Spacer(), //in your existing code
            const Padding(
              padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
              child: Icon(Icons.person, color: Colors.white),
            ),
          ],
        ),
      ),

Please signup or login to give your own answer.

Click here to cancel reply.