Flfter TextField Ошибка: RenderFlex переполнен на 99472 пикселей в нижней части - PullRequest
Новая
       13

Flfter TextField Ошибка: RenderFlex переполнен на 99472 пикселей в нижней части

0 голосов
/ 07 октября 2019

Я писал экран типа автозаполнения с 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, но мое внутреннее чувство заключается в том, что это связано с остальной частью кода. Любая помощь очень ценится!

1 Ответ

1 голос
/ 07 октября 2019

Вы должны добавить каркас виджета материала или материал для текстовой информации

Попробуйте это 

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