Centering a specific widget within a Row that contains multiple widgets-CodePudding

I want to center the Text("MJ") without it being moved if i added another widget

    body: SingleChildScrollView(
        child: Column(children: [
      Row(mainAxisAlignment: MainAxisAlignment.center, children: [
        Container(height: 60, width: 200, child: CircleAvatar())
      ]),
      Padding(
        padding: EdgeInsets.only(top: 10),
        child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          Text("MJ"),
          Icon(Icons.verified),
        ]),
      ),
    ]))

Current run

What i want to do:

CodePudding user response：

Wrap the other widgets in another row and leave out the 'MJ' like this

body: SingleChildScrollView(
        child: Column(children: [
      Row(mainAxisAlignment: MainAxisAlignment.center, children: [
        Container(height: 60, width: 200, child: CircleAvatar())
      ]),
      Padding(
        padding: EdgeInsets.only(top: 10),
        child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          Text("MJ"),
          Row(
              mainAxisAlignment: MainAxisAlignment.center,//end i think
              [
             children:[//other widgets should be within this
               Icon(Icons.verified)
             ]
           ),
        ]),
      ),
    ]))

CodePudding user response：

Add a SizedBox with the width you need, I set the width as 4 for example.

body: SingleChildScrollView(
    child: Column(children: [
  Row(mainAxisAlignment: MainAxisAlignment.center, children: [
    Container(height: 60, width: 200, child: CircleAvatar())
  ]),
  Padding(
    padding: EdgeInsets.only(top: 10),
    child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
      SizedBox(width: 4), // Add a SizedBox here.
      Text("MJ"),
      Icon(Icons.verified),
    ]),
  ),
]))

CodePudding user response：

Add Expanded on both side of Text("MJ")

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Expanded(
      flex: 1,
      child: Container()
    ),
    const Text('MJ'),
    const Expanded(
      flex: 1,
      child: Padding(
        padding: EdgeInsets.only(left: 40),
        child: Text('*')
      ),
    ),
  ],
)