Flutter TextField Error: A RenderFlex overflowed by 99472 pixels on the bottom

Question

我正在用 Flutter 编写一个类似自动完成的屏幕，但是当运行 flutter test:

时出现错误

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

Widget creation tracking is currently disabled. Enabling it enables improved error messages. It can
be enabled by passing `--track-widget-creation` to `flutter run` or `flutter test`.

The overflowing RenderFlex has an orientation of Axis.vertical.
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.
The specific RenderFlex in question is: RenderFlex#d56d6 OVERFLOWING:
  needs compositing
  creator: Column ← Padding ← Container ← ShopNow ← Semantics ← Builder ←
    RepaintBoundary-[GlobalKey#5065e] ← IgnorePointer ← AnimatedBuilder ← FadeTransition ←
    FractionalTranslation ← SlideTransition ← ⋯
  parentData: offset=Offset(36.0, 36.0) (can use size)
  constraints: BoxConstraints(w=728.0, h=528.0)
  size: Size(728.0, 528.0)
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down

引发此错误的小部件测试是：

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

import 'package:iwfpapp/screens/shop/main.dart';

import 'screen_validator.dart';

void main() {
  testWidgets('test shop widget render no crash', (WidgetTester tester) async {
    await tester.pumpWidget(MaterialApp(
      title: 'stand-alone shop widget',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ShopNow(),
    ));
    validateShopScreenContent();
  });
}

顶级小部件 ShopNow 如下所示：

import 'package:flutter/material.dart';
import 'package:iwfpapp/widgets/inputs/shop_category_filter_input.dart';
import 'suggestions.dart';

class ShopNow extends StatefulWidget {
  const ShopNow({Key key}) : super(key: key);

  @override
  _ShopNow createState() {
    return _ShopNow();
  }
}

class _ShopNow extends State<ShopNow> {
  List<ShopCategory> suggestions = [
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
    ShopCategory('test'),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: const EdgeInsets.all(36.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            ShopCategoryFilterInput(),
            Suggestions(suggestions),
          ],
        ));
  }
}

建议是一个ListView：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ShopCategory {
  final String name;
  const ShopCategory(this.name);
}

class Suggestions extends StatelessWidget {
  final List<ShopCategory> suggestions;
  const Suggestions(this.suggestions);
  @override
  Widget build(BuildContext context) {
    List<Widget> suggestionWidgets = suggestions.map((ShopCategory suggestion) {
      return Column(
        children: <Widget>[
          SizedBox(height: 25.0),
          Material(
              elevation: 5.0,
              color: Colors.teal[100],
              borderRadius: BorderRadius.circular(30.0),
              child: MaterialButton(
                  minWidth: MediaQuery.of(context).size.width,
                  padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                  onPressed: () {},
                  child: Text(suggestion.name,
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.black45))))
        ],
      );
    }).toList();
    return Expanded(
        child: ListView(
            padding: const EdgeInsets.all(8.0), children: suggestionWidgets));
  }
}

引发错误的文本字段组件如下所示：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ShopCategoryFilterInput extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container (
      child: TextField(
        key: Key('shop_category_filter_input_text_field'),
        decoration: InputDecoration(
            contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
            hintText: 'Filter By Shop Category',
            border:
                OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)))));
  }
}

我在想，虽然错误来自 ShopCategoryFilterInput，但我的直觉是它与代码的其余部分有关。非常感谢任何帮助！

Answer 1

您必须添加 material 小部件脚手架或 material 以获得文本样式信息

试试这个

class ShopCategoryFilterInput extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(child: Container (
      child: TextField(
        key: Key('shop_category_filter_input_text_field'),
        decoration: InputDecoration(
            contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
            hintText: 'Filter By Shop Category',
            border:
                OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)))));
  }
}`

Answer 2

用 SingleChildScrollView() 包装容器

@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container (
      
      )
    );
  }

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ShopCategoryFilterInput extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container (
       child: TextField(
        key: Key('shop_category_filter_input_text_field'),
        decoration: InputDecoration(
            contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
            hintText: 'Filter By Shop Category',
            border:
                OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)))))
     );
  }
}

Flutter TextField Error: A RenderFlex overflowed by 99472 pixels on the bottom

Flutter TextField Error: A RenderFlex overflowed by 99472 pixels on the bottom

flutter

flutter-test

flutter-layout

用 SingleChildScrollView() 包装容器