How do I create a spacing between two elevated buttons in bottomBar Navigation?-CodePudding

I am confused on how can I make the padding look more user Friendly. Also I want to keep a symmetric distance between all 3 items on the bottom Navigation Bar. How can I do So?

CodePudding user response：

use spacer class to give space. The spacer widget will take up any available space

Row(
children: const <Widget>[
Text('Begin'),
Spacer(), // Defaults to a flex of one.
Text('Middle'),
// Gives twice the space between Middle and End than Begin and Middle.
Spacer(flex: 2),
Text('End'),
  ],
)

CodePudding user response：

use SizedBox between 2 Widgets

const SizedBox(width: 16.0),

or one Widget wrap with Padding and give one side padding like left or Right

const Padding(padding: EdgeInsets.only(right: 16.0)),

or use Spacer between 2 Widgets

const Spacer(),

or you can use in Row Widgets

Row(
// you can use anyone of them, this properties space given equally according properties
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      Text("Text 1"),
      Text("Text 2"),
      Text("Text 3"),
    ]
)