質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Q&A

0回答

1778閲覧

【Flutter】指定したWidgetの高さが端末のサイズを縦に超えても表示したい

Kinako0626

総合スコア14

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

0グッド

0クリップ

投稿2021/01/02 01:54

前提・実現したいこと

現在Flutterでアプリを作っていて、RadioListTileの選択したvalue値によってWidgetを出したいのですがWidgetを出した際端末のサイズを超えて表示しているためエラーになります。

実現したいことは出したWidgetを超えてもスクロールできるようにしたいです。

発生している問題・エラーメッセージ

端末のサイズ超えて表示している

エラーメッセージ 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#d9080 OVERFLOWING ... needs compositing ... parentData: <none> (can use size) ... constraints: BoxConstraints(w=374.0, h=844.0) ... size: Size(374.0, 844.0) ... direction: vertical ... mainAxisAlignment: start ... mainAxisSize: max ... crossAxisAlignment: start ... textDirection: ltr ... verticalDirection: down

該当のソースコード

class RecordAddPage extends StatelessWidget { @override Widget build(BuildContext context) { return ChangeNotifierProvider<TopModel>.value( value: model, child: Scaffold( appBar: AppBar( centerTitle: true, title: Consumer<TopModel>( builder: (context, model, child) { return Text('${rabbit.name}の記録'); }, ), actions: [ FlatButton( onPressed: () {}, child: Text( '記録', style: TextStyle( fontWeight: FontWeight.bold, color: Colors.white, ), ), ), ], ), body: Consumer<TopModel>( builder: (context, model, child) { Size size = MediaQuery.of(context).size; return SingleChildScrollView( child: Container( child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.all(8.0), child: SizedBox( height: size.height, width: size.width, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ //文字数制限の都合で省略 RadioListTile( value: 1, autofocus: true, groupValue: model.selectedRadioListTile, onChanged: (value) { model.setSelectedRadio(value); print(value); }, activeColor: Color.fromRGBO( rgboButtonColorR, rgboButtonColorG, rgboButtonColorG, 1, ), selected: true, title: Text('良さそうにみえる'), ), RadioListTile( value: 2, groupValue: model.selectedRadioListTile, onChanged: (value) { model.setSelectedRadio(value); print(value); }, activeColor: Colors.red, selected: true, title: Text('悪そう'), subtitle: Text( '詳細な情報を入力してください。', style: TextStyle(fontSize: 12), ), ), model.selectedRadioListTile != 2 ? SizedBox() : SingleChildScrollView( child: Padding( padding: const EdgeInsets.all(8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ ///その他メモ Container( child: Padding( padding: const EdgeInsets.only( top: 8.0, bottom: 8.0, ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( padding: const EdgeInsets.only( bottom: 8.0, ), //TODO:ボーダーライン入れる child: Text( 'その他メモ', style: TextStyle( color: Colors.black, fontWeight: FontWeight.bold, fontSize: 21, ), ), ), TextFormField( textInputAction: TextInputAction.done, minLines: 10, maxLines: 15, onChanged: (text) {}, decoration: InputDecoration( labelText: 'メモ', hintText: '気が立っていて怒っている', alignLabelWithHint: true, border: OutlineInputBorder(), ), ), //このように試しにWidgetを入れるとSingleChildScrollViewで囲んでも上記のエラーになる TextFormField( textInputAction: TextInputAction.done, minLines: 10, maxLines: 15, onChanged: (text) {}, decoration: InputDecoration( labelText: 'メモ', hintText: '気が立っていて怒っている', alignLabelWithHint: true, border: OutlineInputBorder(), ), ), ], ), ), ), ], ), ), ), ], ), ), ), ], ), ), ); }, ), ), ); } }

試したこと

SingleChildScrollViewでスクロール可能なWidgetを使用した

参考にした記事、動画

【Flutter】端末縦サイズを超えたら自動でスクロールするようにする方法【SingleChildScrollView】

Exception: RenderViewport exceeded its maximum number of layout cycles #23527

DraggableScrollableSheet (Flutter 今週のウィジェット)Youtube
###エラー時のスクリーンショット
画像

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問