CODEWITHSUNDEEP
flutterdartflutter-layout
cfl
cfl

Reputation: 1049

Center widget within space available in row

Please assist in how to create a layout like this, icon on left and text centered within available space left.

enter image description here

I have tried every time of Centering and Alignment I could think of. But I end up with nothing working, e.g.

enter image description here

Some of the code I've tried:

            Row(
//                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
//                mainAxisAlignment: MainAxisAlignment.spaceBetween,
//                mainAxisAlignment: MainAxisAlignment.spaceAround,
//                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  buttonIcon,
                  Text(
                    buttonTitle,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 20.0,
                      color: Colors.orange,
                    ),
                  ),
                ],
              ),

Upvotes: 1

Views: 1456

Answers (2)

CopsOnRoad
CopsOnRoad

Reputation: 267404

enter image description here

Container(
  decoration: BoxDecoration(color: Colors.white, border: Border.all(color: color, width: 2)),
  height: 56,
  width: 300,
  child: Stack(
    children: <Widget>[
      Align(
        alignment: Alignment.centerLeft,
        child: IconButton(
          onPressed: () {},
          icon: Icon(Icons.navigation),
        ),
      ),
      Align(child: Text("NAVIGATE HERE")),
    ],
  ),
)

Upvotes: 2

Rodolfo Franco
Rodolfo Franco

Reputation: 441

You could use a ListTile widget instead of a Row one and achieve a very similar result, like this:

ListTile(
  title: Text('NAVIGATE HERE', style: TextStyle(....// your text style)),
  leading: Icon(Icons.some_icon)
)

If you still wish to use Row widget, you can achieve this using an Expanded widget as part of it's children, for example:

Row(
  children: <Widget> [
    Padding(
     padding: EdgeInsets.only(left: someValue),
     child: Icon(Icons.some_icon)
    ),
    Expanded(
     Align(
      alignment:Alignment.center,
      child: Text('NAVIGATE HERE')
     )
    )
  ]
)

Upvotes: 5

Related Questions