Flutter 在堆栈和列内包装定位小部件时出错（无限像素溢出的 RenderFlex。）

Question

I have a use case where I have to use Stack and Positioned to make some overlapping widgets. But I also have to wrap that inside a Column . When I do that then I get an error

A RenderFlex overflowed by Infinity pixels on the bottom.

A minimal example showing the issue:

import "package:flutter/material.dart";

class TestScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Example"),
        ),
        body: Column(
          children: [
            Stack(children: [
              cardWidget(),
            ]),
          ],
        ),
      ),
    );
  }

  Widget cardWidget() {
    return Positioned(
      left: 10.0,
      child: Card(
        color: Colors.green,
        child: Container(
          height: 200,
          width: 100,
        ),
      ),
    );
  }
}

If I remove left: 10 then it works fine but thats not what I want.

The full error message (which I don't really understand):

The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Positioned(left: 10.0) wants to apply ParentData of type StackParentData to a
RenderObject, which has been set up to accept ParentData of incompatible type FlexParentData.
Usually, this means that the Positioned widget has the wrong ancestor RenderObjectWidget. Typically,
Positioned widgets are placed directly inside Stack widgets.
The offending Positioned is currently placed inside a Column widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
  Semantics ← Card ← Positioned ← Column ← _BodyBuilder ← MediaQuery ←
LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← ⋯

Answer 1

Turns out I need to wrap my Stack with Expanded . Not sure why.

import "package:flutter/material.dart";

class TestScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Example"),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Flexible(
              child: Stack(
                children: [0, 1, 2, 3].map((e) => cardWidget(e)).toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget cardWidget(int index) {
    return Positioned(
      left: index * 10.0,
      child: Card(
        elevation: 10,
        color: Colors.green,
        child: Container(
          height: 200,
          width: 100,
        ),
      ),
    );
  }
}

The issue with this solution is that it won't center my cards (neither horizontal or vertical). How is that achieved?

Answer 2

This is from the Flutter docs, for the Column class.

One common reason for this to happen is that the Column has been placed in another Column (without using Expanded or Flexible around the inner nested Column). When a Column lays out its non-flex children (those that have neither Expanded or Flexible around them), it gives them unbounded constraints so that they can determine their own dimensions (passing unbounded constraints usually signals to the child that it should shrink-wrap its contents). The solution in this case is typically to just wrap the inner column in an Expanded to indicate that it should take the remaining space of the outer column, rather than being allowed to take any amount of room it desires.

This is enough to understand what the problem is

The Column is giving the Stack unbounded constraints, due to which you're getting overflow error.

Putting it inside an Expanded widget however, solves it as Expanded is a flex-widget and it tries to cover entire available space. It then gives constraints to the Stack which prevents it from overflow.

Hope I helped.

Answer 3

You can add symmetric Padding to the container to center the Stack . Also, add alignment: AlignmentDirectional.center to the Stack to center the widgets inside it(they will only be vertically centered, since they are Positioned widgets with left parameter provided).

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Flexible(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 80.0),
            child: Stack(
              alignment: AlignmentDirectional.center,
              children: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((e) => cardWidget(e)).toList(),
            ),
          ),
        ),
      ],
    ),
  );
}

Widget cardWidget(int index) {
  return Positioned(
    left: index * 50.0,
    child: Card(
      elevation: 10,
      color: Colors.green,
      child: Container(
        height: 200,
        width: 100,
      ),
    ),
  );
}

Note : adjust the padding amount according to the cards' size and the screen size.

Result: