Center row child and right-align

user_3603502 0
Viewed 8497

enter image description here

I'm trying to achieve the following layout. This is the top cell if a list.

Right now I managed to do get the following result, with the following code

enter image description here

          Row(
        children: <Widget>[
          Expanded(
            child:
          Center(
            heightFactor: 3.5,
            child:
            Text("PLAY QUEUE",
            ),
          ),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(0,0,15.0,0),
            child:
            Align(
              child:
              Text("CLEAR"),
              alignment: Alignment.centerRight,
            ),
          ),

        ],
      ),

As you may have noticed, the "PLAY QUEUE" is off-center, which is normal because its being centered with what space is left, and "CLEAR" is taking that space.

So centering it is just a matter of removing the CLEAR label from that layout, but if I do, how do I display it?

Looking at the documentation, I should be pretty close to the solution. But they're not centering the Title row (step 1, look at the red squares on the Title Section), so it's not exactly the same, obviously.

I'm not sure what layout I should aim for right now. Is it possible to overlap widgets ? So I can just plain center and full expand the PLAY QUEUE, and just overlap on the right side with the clear button.

Note : I do not want to write an arbitrary left padding on the play queue label.

EDIT : Thanks to the help I've got from the answers, I now have the correct result using the following code :

      Stack(
        fit: StackFit.passthrough,
        children: <Widget>[
          Center(
            heightFactor: 3.5,
            child:
            Text(title,
              style: Theme.of(context).textTheme.title.copyWith(color: textColor),
            ),
          ),
          Positioned.directional(
            textDirection: TextDirection.rtl,
            start: 30,
            top: 22,
            child:
              Text("CLEAR"),
            ),
        ],
      ),

What troubles me is the fact I couldn't align vertically, I manually wrote the arbitrary offsets, which I think is not the correct way.

And for some reason I can't just put a Center() or something like that. Is this how it should be done or is this improvable?

EDIT 2 :

I'm now using alignment: FractionalOffset.center, on the Stack() class, which aligns vertically, exactly like I wanted.

So now all is well and I'm happy ! Thanks everyone :)

flutter-layout flutter centering
3 Answers

This is a job for a Stack!

You can put the Text widgets into the Stack as individual children and use a Positioned widget to right-align the "clear" one.

This is what the Material AppBar widget does for this exact scenario.

user_5110060

You can create this with Stack

       Card(child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Stack(
                children: <Widget>[
                  Center(child: Text('PLAY QUEUE'),),
                  Container(
                    alignment: Alignment.centerRight,
                    child: Text('CLEAR'),
                  )
                ],
              ),
            ),
          ),
user_105486650

To place the Container at right side inside the Row, I have used Expanded!

Once I have to place a child Container inside Row, and here Row have already some other children widgets before that Container starting from default direction left to right side and the Container were exactly trailing after earlier childrens.

and here my Container width was 40.0 and remaining width inside the Row were around 100.0 after leading childrens.

thus, I used below said to push the Container right side to the Row.

child: Row(
    children: <Widget>[
      Container(
        padding: EdgeInsets.only(left: 8.0, right: 8.0),
        child: CircleAvatar(
          child: ClipOval(
            child: _musicIcon,
            clipBehavior: Clip.antiAlias,
          ),
        ),
      ),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(top: 8.0, bottom: 3.0),
            constraints: BoxConstraints(maxWidth: 280.0),
            child: Text("some0"),
          ),
          Row(
            children: <Widget>[
              Container(
                constraints: BoxConstraints(maxWidth: 200.0),
                child: Text("some1"),
              ),
              Container(
                padding: EdgeInsets.only(left: 10.0, right: 10.0),
                child: Text("some2"),
              ),
              Container(
                constraints: BoxConstraints(minWidth: 20.0),
                child: Text("some3"),
              ),
            ],
          ),
        ],
      ),
      Expanded(
        child: Container(
            width: 40.0,
            margin: EdgeInsets.only(right: 8.0),
            alignment: Alignment.centerRight,
            child: GestureDetector(
              onTap: () {
                // doing something
              },
              child: Padding(
                padding: EdgeInsets.only(left: 18.0, right: 0.0),
                child: CircleAvatar(
                  child: _getActionFlareActor(
                      _musicURL, _musicTitle, true),
                ),
              ),
            )),
      )
    ],
)),

Hope this scenario may help someone.

user_39023390
Related