首页 > 解决方案 > Center row child and right-align

问题描述

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 :)

标签: fluttercenteringflutter-layout

解决方案


这是一个堆栈的工作!

您可以将 Text 小部件作为单独的子元素放入 Stack 中,并使用Positioned小部件右对齐“清除”小部件。

这就是 Material AppBar 小部件为这个确切的场景所做的


推荐阅读