一般的な flutterエラー

コンテンツ

序章

このページでは、頻繁に発生するいくつかの Flutter フレームワークエラーとそれらを解決する方法についての提案を提供します。これは、さらに多くの内容を含む生きたドキュメントです将来の改訂でエラーが追加される予定ですので、皆様の貢献を歓迎します。このページをさらに充実させるために、お気軽にイシューをオープンするか、プルリクエストを送信してください。あなたと Flutter コミュニティにとって役立ちます。

「RenderFlex がオーバーフローしました…」

RenderFlex オーバーフローは、最も頻繁に発生する Flutter フレームワークの 1 つです。というエラーが発生する可能性があり、すでに遭遇している可能性があります。

エラーはどのようなものですか?

これが発生すると、その領域を示す黄色と黒の縞模様が表示されます。デバッグコンソールのエラーメッセージに加えて、アプリ UI のオーバーフローも表示されます。

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

The relevant error-causing widget was
    Row 	    lib/errors/renderflex_overflow_column.dart:23
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.
(Additional lines of this message omitted)

どのような場合にこのエラーが発生する可能性がありますか?

このエラーは、次の場合によく発生します。ColumnまたRowそうでない子ウィジェットがありますサイズに制限があります。たとえば、以下のコードスニペットは、一般的なシナリオ:

Widget build(BuildContext context) {
  return Row(
    children: [
      const Icon(Icons.message),
      Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('Title', style: Theme.of(context).textTheme.headlineMedium),
          const Text(
              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed'
              ' do eiusmod tempor incididunt ut labore et dolore magna '
              'aliqua. Ut enim ad minim veniam, quis nostrud '
              'exercitation ullamco laboris nisi ut aliquip ex ea '
              'commodo consequat.'),
        ],
      ),
    ],
  );
}

上の例では、Column空間よりも広くしようとするRow(その親) がそれに割り当てられる可能性があり、オーバーフローエラーが発生します。なぜ、Columnそれをやってみますか？このレイアウトの動作を理解するには、次のことを理解する必要があります。 Flutter フレームワークがレイアウトを実行する方法:

「レイアウトを実行するために、Flutter は深さ優先のトラバーサルでレンダーツリーを歩きます。とサイズ制約を継承します親から子へ…子どもたちは次のように答えます。サイズを逃す親のコンストレイント内の親オブジェクトに設立。” –Flutter アーキテクチャの概要

この場合、Rowウィジェットは子のサイズを制限しません。するColumnウィジェット。親ウィジェットからの制約が欠如しているため、2 番目のウィジェットはテキストウィジェットは、表示する必要があるすべての文字と同じ幅にしようとします。のテキストウィジェットの自己決定された幅は、Columnどれの親の最大量の水平スペースと衝突します。Rowウィジェット提供することができます。

それを修正するにはどうすればよいですか?

さて、あなたはそれを確認する必要がありますColumnできる限り広くしようとしないなれ。これを実現するには、幅を制限する必要があります。それを行うための 1 つの方法は、包むColumnでExpandedウィジェット:

return const Row(
  children: [
    Icon(Icons.message),
    Expanded(
      child: Column(
          // code omitted
          ),
    ),
  ],
);

別の方法は、ColumnでFlexibleウィジェットを選択し、flex要素。実際、Expandedウィジェットは以下と同等ですFlexibleウィジェットとともにflex1.0 の係数そのソースコードを示します。の使用方法をさらに理解するには、FlexFlutter レイアウトのウィジェット、チェックしてください今週のウィジェットのビデオフレキシブルウィジェット上で。

さらに詳しい情報：

以下のリンク先のリソースで、このエラーに関する詳細情報が提供されます。

フレキシブル (今週の Flutter ウィジェット)
Flutter Inspector を使用してレイアウトの問題をデバッグする方法
制約を理解する

「RenderBoxがレイアウトされていませんでした」

このエラーは非常に一般的ですが、多くの場合、主なエラーの副作用です。レンダリングパイプラインの早い段階で発生します。

エラーはどのようなものですか?

エラーによって表示されるメッセージは次のようになります。

RenderBox was not laid out: 
RenderViewport#5a477 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

どのような場合にこのエラーが発生する可能性がありますか?

通常、問題はボックス制約の違反に関連しており、次のことを行う必要があります。どのようにしたいかについての詳細情報を Flutter に提供することで解決できます。問題のウィジェットを制限します。制約がどのように機能するかについて詳しく学ぶことができますページ上の Flutter で制約を理解する。

のRenderBox was not laid outエラーは、多くの場合、他の 2 つのエラーのいずれかによって発生します。

「垂直ビューポートには無制限の高さが与えられました」
「InputDecorator…無制限の幅を持つことはできません」

「垂直ビューポートには無制限の高さが与えられました」

これもよくあるレイアウトエラーです。 Flutter アプリで UI を作成するとき。

エラーはどのようなものですか?

エラーによって表示されるメッセージは次のようになります。

The following assertion was thrown during performResize():
Vertical viewport was given unbounded height.

Viewports expand in the scrolling direction to fill their container. 
In this case, a vertical viewport was given an unlimited amount of 
vertical space in which to expand. This situation typically happens when a 
scrollable widget is nested inside another scrollable widget.
(Additional lines of this message omitted)

どのような場合にこのエラーが発生する可能性がありますか?

このエラーは多くの場合、次のような場合に発生します。ListView(または他の種類のスクロール可能ななどのウィジェットGridView) の中に置かれますColumn。あListView全部かかる親によって制限されていない限り、利用可能な垂直方向のスペースウィジェット。ただし、Column子にいかなる制約も課さないデフォルトの高さ。 2 つの動作が組み合わさると、次のような失敗が発生します。サイズの決定ListView。

Widget build(BuildContext context) {
  return Center(
    child: Column(
      children: <Widget>[
        const Text('Header'),
        ListView(
          children: const <Widget>[
            ListTile(
              leading: Icon(Icons.map),
              title: Text('Map'),
            ),
            ListTile(
              leading: Icon(Icons.subway),
              title: Text('Subway'),
            ),
          ],
        ),
      ],
    ),
  );
}

それを修正するにはどうすればよいですか?

このエラーを修正するには、高さを指定します。ListViewそうあるべきだ。同じ高さにするにはの残りのスペースとしてColumnを使用してラップします。Expandedウィジェット (参照以下の例）。それ以外の場合は、SizedBoxウィジェットまたは相対的な高さを使用してFlexibleウィジェット。

Widget build(BuildContext context) {
  return Center(
    child: Column(
      children: <Widget>[
        const Text('Header'),
        Expanded(
          child: ListView(
            children: const <Widget>[
              ListTile(
                leading: Icon(Icons.map),
                title: Text('Map'),
              ),
              ListTile(
                leading: Icon(Icons.subway),
                title: Text('Subway'),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

さらに詳しい情報：

以下のリンク先のリソースで、このエラーに関する詳細情報が提供されます。

Flutter Inspector を使用してレイアウトの問題をデバッグする方法
制約を理解する

「InputDecorator…無制限の幅を持つことはできません」

エラーメッセージは、ボックスの制約にも関連していることを示唆しています。最も一般的な問題の多くを回避するには、これらを理解することが重要です Flutter フレームワークのエラー。

エラーはどのようなものですか?

エラーによって表示されるメッセージは次のようになります。

The following assertion was thrown during performLayout():
An InputDecorator, which is typically created by a TextField, cannot have an 
unbounded width.
This happens when the parent widget does not provide a finite width constraint. 
For example, if the InputDecorator is contained by a `Row`, then its width must 
be constrained. An `Expanded` widget or a SizedBox can be used to constrain the 
width of the InputDecorator or the TextField that contains it.
(Additional lines of this message omitted)

どのような場合にエラーが発生する可能性がありますか?

このエラーは、たとえば、Rowが含まれていますTextFormFieldまたはTextFieldただし、後者には幅の制約がありません。

Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Unbounded Width of the TextField'),
      ),
      body: const Row(
        children: [
          TextField(),
        ],
      ),
    ),
  );
}

それを修正するにはどうすればよいですか?

エラーメッセージが示唆するように、テキストフィールドを制限してこのエラーを修正してください。いずれかを使用してExpandedまたSizedBoxウィジェット。次の例を使用してデモンストレーションしますExpandedウィジェット:

Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Unbounded Width of the TextField'),
      ),
      body: Row(
        children: [
          Expanded(child: TextFormField()),
        ],
      ),
    ),
  );
}

このエラーは、予期された親ウィジェットが見つからないことに関するものです。

エラーはどのようなものですか?

エラーによって表示されるメッセージは次のようになります。

The following assertion was thrown while looking for parent data:
Incorrect use of ParentDataWidget.
(Some lines of this message omitted)
Usually, this indicates that at least one of the offending ParentDataWidgets 
listed above is not placed directly inside a compatible ancestor widget.

どのような場合にエラーが発生する可能性がありますか?

Flutter のウィジェットは一般的に柔軟に構成できますが、 UI 内で一緒に使用すると、これらのウィジェットの小さなサブセットが特定の親を期待しますウィジェット。ウィジェットツリーでこの期待が満たされない場合、このエラーが表示される可能性があります。

ここにあります不完全な特定の親ウィジェットを必要とするウィジェットのリスト Flutter フレームワーク内で。ご自由に PR を送信してください (ドキュメントアイコンを使用してください) ページの右上隅) をクリックして、このリストを展開します。

ウィジェット	予想される親ウィジェット
`Flexible`	`Row`、`Column`、また`Flex`
`Expanded`(専門的な`Flexible`)	`Row`、`Column`、また`Flex`
`Positioned`	`Stack`
`TableCell`	`Table`

それを修正するにはどうすればよいですか?

どの親ウィジェットが欠落しているかがわかれば、修正方法は明らかです。

「ビルド中に呼び出されるsetState」

のbuildFlutter コード内のメソッドは呼び出すのに適した場所ではありませんsetState直接的または間接的に。

エラーはどのようなものですか?

エラーが発生すると、次のメッセージがコンソールに表示されます。

The following assertion was thrown building DialogPage(dirty, dependencies: 
[_InheritedTheme, _LocalizationsScope-[GlobalKey#59a8e]], 
state: _DialogPageState#f121e):
setState() or markNeedsBuild() called during build.

This Overlay widget cannot be marked as needing to build because the framework 
is already in the process of building widgets.
(Additional lines of this message omitted)

どのような場合にエラーが発生する可能性がありますか?

一般に、このエラーは次の場合に発生します。setStateメソッドが内部で呼び出されますbuild方法。

このエラーが発生する一般的なシナリオは、ダイアログをトリガーしようとしたときです。の中からbuild方法。これは多くの場合、次の必要性によって動機付けられます。ユーザーに情報をすぐに表示しますが、setState を呼び出すべきではありませんからbuild方法。

以下は、このエラーの一般的な原因と思われるスニペットです。

Widget build(BuildContext context) {
  // Don't do this.
  showDialog(
      context: context,
      builder: (context) {
        return const AlertDialog(
          title: Text('Alert Dialog'),
        );
      });

  return const Center(
    child: Column(
      children: <Widget>[
        Text('Show Material Dialog'),
      ],
    ),
  );
}

への明示的な呼び出しは表示されませんsetState、しかしそれはによって呼び出されますshowDialog。のbuildメソッドを呼び出すのに適切な場所ではありませんshowDialogなぜならbuildたとえば、フレームワークごとにフレームワークによって呼び出すことができます。アニメーション。

それを修正するにはどうすればよいですか?

このエラーを回避する 1 つの方法は、Navigatorダイアログをトリガーする API ルートとしては。以下の例では、2 つのページがあります。 2 ページ目には、入力時に表示されるダイアログ。ユーザーが 2 ページ目をリクエストしたとき最初のページのボタンをクリックすると、Navigator2 つのルートを 1 つにプッシュします行 – 1 つは 2 ページ目用、もう 1 つはダイアログ用です。

class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Launch screen'),
          onPressed: () {
            // Navigate to the second screen using a named route.
            Navigator.pushNamed(context, '/second');
            // Immediately show a dialog upon loading the second screen.
            Navigator.push(
              context,
              PageRouteBuilder(
                barrierDismissible: true,
                opaque: false,
                pageBuilder: (_, anim1, anim2) => const MyDialog(),
              ),
            );
          },
        ),
      ),
    );
  }
}

参考文献

エラー、特に Flutter のレイアウトエラーをデバッグする方法について詳しく知るには、次のリソースを確認してください。

Flutter Inspector を使用してレイアウトの問題をデバッグする方法
制約を理解する
ボックス制約の処理
Flutter アーキテクチャの概要

序章

「RenderFlex がオーバーフローしました…」

「RenderBoxがレイアウトされていませんでした」

「垂直ビューポートには無制限の高さが与えられました」

「InputDecorator…無制限の幅を持つことはできません」

「ParentData ウィジェットの誤った使用」

「ビルド中に呼び出されるsetState」

参考文献