[Flutter] TextField を Row で横並びに配置したところビルドエラーになった

コード

Row(
  children: [
    TextField(
      controller: _lastNameController,
      decoration: const InputDecoration(
        labelText: '姓',
        hintText: '姓を入力してください',
      ),
    ),
    TextField(
      controller: _firstNameController,
      decoration: const InputDecoration(
        labelText: '名',
        hintText: '名を入力してください',
      ),
    ),
  ],
),

エラー

════════ Exception caught by rendering library ═════════════════════════════════
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.
'package:flutter/src/material/input_decorator.dart':
Failed assertion: line 962 pos 7: 'constraints.maxWidth < double.infinity'

エラーの説明

TextField は固有の幅を持っていない。
しかし、TextField やその内部に存在する InputDecorator は、特定の幅の制約が必要で、無限の幅が指定されている場合、InputDecorator は正しくレイアウトできず、エラーが発生する

今回の場合、Row が TextField の親ウィジェットであるが、Row 自体は子ウィジェットに対して幅の制約を与えない

解決策

TextField に幅の制約を与えてあげる

Row(
  children: [
    Expanded( // ExpandedでTextFieldを囲う
      child: TextField(
        controller: _lastNameController,
        decoration: const InputDecoration(
          labelText: '姓',
          hintText: '姓を入力してください',
        ),
      ),
    ),
    Expanded( // ExpandedでTextFieldを囲う
      child: TextField(
        controller: _firstNameController,
        decoration: const InputDecoration(
          labelText: '名',
          hintText: '名を入力してください',
        ),
      ),
    ),
  ],
),