Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to make widget appear on top next siblings in Row and Column

For previous siblings, it works. But How to make widget appear on top next siblings in Row and Column ?

I know that I can just force to make it work by moving the widget on top to the next siblings and make it appear on top on the previous siblings to achieve the same effect, but it just seems odd to me that Row and Column are actually Stack but just with children displaced, not actually flat widgets with the same elevation. I hope my understanding is wrong.

enter image description here

enter image description here

  Widget _test() {
    return StackTappableOutside( // change to Stack for testing
      clipBehavior: Clip.none,
      children: [
        Container(
          child: FlutterLogo(size: 80),
          decoration: BoxDecoration(
            color: Colors.deepOrange,
            border: Border.all(color: Colors.yellow),
          ),
        ),
        Positioned(
          bottom: -22,
          // right: -22,
          child: TextButton(
            child: Text("Close me"),
            onPressed: () => print("You tapped me"),
          ),
        ),
      ],
    );
  }

  Widget _body() {
    // return Container(child: _test());
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(child: _test(),key: Key('first'),),
        Container(child: _test(),key: Key('second'),),
        Container(child: _test(),key: Key('thrid'),),
        Container(child: _test(),key: Key('forth'),),
      ],
    );
}
Tags:

2

Answers


  1. 0

    You can use Transfrom.translate, Align with heightFactor and widthFactor.

    Align(
  alignment: Alignment.center,
  heightFactor: .7, // column
  widthFactor: .7, // for row
  child: Container(
    Login or Signup to reply.
  2. 0

    A quick workaround is to set the textDirection of your widget to TextDirection.rtl. You’ll also need to adjust mainAxisAlignment to MainAxisAlignment.end and reverse the order of your children. Your code will look like this:

    Row(
  mainAxisAlignment: MainAxisAlignment.end,
  textDirection: TextDirection.rtl,
  children: [
    Container(key: const Key('first'), child: _test()),
    Container(key: const Key('second'), child: _test()),
    Container(key: const Key('third'), child: _test()),
    Container(key: const Key('forth'), child: _test()),
  ].reversed.toList(),
)

    enter image description here

    Row and Column both extend Flex, which stacks their children along the z-axis, similar to Stack. There’s an open issue on Flutter’s GitHub that discusses customizing this behavior.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search