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

Question

I was writing a autocomplete-like screen with Flutter, but got an error when running 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

The widget test that threw this error was:

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();
  });
}

The top-level widget ShopNow looks like this:

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),
          ],
        ));
  }
}

The suggestions is a 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));
  }
}

The text field component that threw the error looks like:

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)))));
  }
}

I am thinking that although the error came from ShopCategoryFilterInput, but my gut feeling is that it has to do with the rest of the code. Any help is extremely appreciated!

Answer 1

Wrap the Container with 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)))))
     );
  }
}

Answer 2

You must add a material widget scaffold or material for textstyle information

Try this

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)))));
  }
}`