前提・実現したいこと
現在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
###エラー時のスクリーンショット
あなたの回答
tips
プレビュー