1
0

More than 1 year has passed since last update.

 Flutter :   TextFormFieldでUIを描画できない

Posted at

はじめに

現在flutterでアプリを作成中(カレンダーアプリ的なやつ)超初心者で勉強中
アカウント機能 ログイン機能を作成中に本事象に遭遇してなるほどーと思ったのでメモ程度に

開発環境

・使用言語:dart(flutter)
・AndroidStudio 4.1.2
・iOS シミュレーター(iOS14.5)

事象

TextFormFieldを使用して入力フォームを作成しようと思ったが、以下のエラーが表示され対象画面へ遷移した際にUIが描画されない

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

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.

以下の記載がつかまってそう。。。

children: <Widget>[
  const Padding(
  padding: EdgeInsets.fromLTRB(25.0, 0, 25.0, 30.0),
  child: Text(
  "新規アカウント作成",
  style: TextStyle(
    color: Colors.blueGrey,
    fontSize: 20,
    fontWeight: FontWeight.bold,
  )
),),
 Padding(
   padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
   child: Form(
   key: key,
   child: TextFormField(
     decoration: const InputDecoration(hintText: "メールアドレス"),
     onChanged: (String value){
       _newEmail = value;
     },
   ),
 ),
),

解決方法

TextFormFieldの制約がないためにエラーになっているそう!
Expandedで括って最大の大きさにしたり、Containerでサイズを指定すると解決しました!

Expanded(
  child: Container(
    padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
      child: Form(
        key: key,
        child: TextFormField(
          decoration: const InputDecoration(hintText: "メールアドレス"),
          onChanged: (String value){
            _newEmail = value;
          },
        ),
      ),
    ),
  ),

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0