Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
482 views
in Technique[技术] by (71.8m points)

flutter - Wrap class not wrapping widgets

I am dynamically generating Chip widgets but the Wrap class is not wrapping overflowing widgets to next line.

Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        physics: ClampingScrollPhysics(),
        padding: const EdgeInsets.symmetric(
          horizontal: 12,
        ),
        children: [
          Row(
            children: [
              Wrap(
                spacing: 5,
                children: _getChips(), // gets a list of chips
              ),
            ],
          ),
        ],
      ),
    );

But I get this error in console

The following assertion was thrown during layout:
A RenderFlex overflowed by 94 pixels on the right.

The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

Am I doing something wrong?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Try removing Row widget. Wrap with default direction is an alternative to Row that moves child widgets to the next line if there is no enough space.

Also, I'd recommend using SingleChildScrollView as a container instead of ListView to get scrolling behavior.

return Scaffold(
  body: SingleChildScrollView(
    physics: ClampingScrollPhysics(),
    child: Padding(
      padding: const EdgeInsets.symmetric(
        horizontal: 12,
      ),
      child: Wrap(
        spacing: 5,
        children: _getChips(), // gets a list of chips
      ),
    ),
  ),
);

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...