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

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

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

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

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

1回答

1072閲覧

【Flutter】showModalBottomSheetにSingleChildScrollViewを入れ込みたいのですができません。。。

bbiiq

総合スコア51

Flutter

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

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2022/12/30 11:42

編集2022/12/31 04:10

前提

いつもお世話になっております。
今「Note」というサービスのアプリのshowModalBottomSheetを勉強がてら作成しています(添付画像の下書きの部分です)。
イメージ説明

実現したいこと

showModalBottomSheetにSingleChildScrollViewを入れ込みたいのですができません。普通のViewといいますか、スクロールできないwidgetとなってしまいます。どうすればshowModalBottomSheetにSingleChildScrollViewを入れ込めるのか、よければ教えていただけないでしょうか。よろしくお願いいたします。

該当のソースコード

Dart

1import 'package:flutter/material.dart'; 2import 'package:line_icons/line_icon.dart'; 3import 'package:ex_diary/icon/icon.dart'; 4 5final list = [ 6 [ 7 'タイトル', 8 'タイトル', 9 'タイトル', 10 'タイトル', 11 'タイトル', 12 'タイトル', 13 'タイトル', 14 'タイトル', 15 'タイトル', 16 'タイトル' 17 ], 18 [ 19 '2022/12/30 00:00', 20 '2022/12/30 00:00', 21 '2022/12/30 00:00', 22 '2022/12/30 00:00', 23 '2022/12/30 00:00', 24 '2022/12/30 00:00', 25 '2022/12/30 00:00', 26 '2022/12/30 00:00', 27 '2022/12/30 00:00', 28 '2022/12/30 00:00' 29 ], 30]; 31 32class Send extends StatefulWidget { 33 const Send({Key? key}); 34 35 State<Send> createState() => _Send(); 36} 37 38class _Send extends State<Send> { 39 40 Widget build(BuildContext context) { 41 final double deviceHeight = MediaQuery.of(context).size.height; 42 final double deviceWdth = MediaQuery.of(context).size.width; 43 return Scaffold( 44 body: SingleChildScrollView( 45 physics: const BouncingScrollPhysics(), 46 child: Center( 47 child: Column( 48 children: [ 49 TextButton( 50 style: ElevatedButton.styleFrom( 51 foregroundColor: const Color.fromARGB(179, 81, 80, 80), 52 splashFactory: NoSplash.splashFactory, 53 backgroundColor: Colors.white, 54 minimumSize: Size(deviceWdth, deviceHeight * 0.075), 55 maximumSize: Size(deviceWdth, deviceHeight * 0.075), 56 padding: EdgeInsets.zero, 57 tapTargetSize: MaterialTapTargetSize.shrinkWrap, 58 elevation: 0, 59 side: BorderSide( 60 color: const Color.fromARGB(255, 190, 190, 190), //色 61 width: deviceWdth * 0.0005, //太さ 62 ), 63 ), 64 onPressed: () => showModalBottomSheet( 65 backgroundColor: Colors.transparent, 66 isScrollControlled: true, 67 shape: RoundedRectangleBorder( 68 borderRadius: 69 BorderRadius.vertical(top: Radius.circular(15)), 70 ), 71 context: context, 72 enableDrag: true, 73 builder: (BuildContext context) { 74 return Container( 75 height: deviceHeight * 0.5, 76 decoration: BoxDecoration( 77 borderRadius: BorderRadius.only( 78 topLeft: Radius.circular(30), 79 topRight: Radius.circular(30), 80 bottomLeft: Radius.circular(0), 81 bottomRight: Radius.circular(0)), 82 ), 83 child: Column( 84 children: [ 85 SingleChildScrollView( 86 physics: const BouncingScrollPhysics(), 87 child: Column( 88 children: [ 89 for (int index = 0; 90 index < list[0].length; 91 index++) ...{new Note(index)}, 92 ], 93 ), 94 ) 95 ], 96 ), 97 ); 98 }), 99 child: Row( 100 mainAxisAlignment: MainAxisAlignment.spaceBetween, 101 children: [ 102 SizedBox( 103 width: deviceWdth * 0.7, 104 child: Row( 105 children: [ 106 SizedBox( 107 width: deviceWdth * 0.04, 108 ), 109 CircleAvatar( 110 radius: deviceWdth * 0.045, 111 ), 112 SizedBox( 113 width: deviceWdth * 0.04, 114 ), 115 Text( 116 '名前', 117 style: TextStyle(fontSize: deviceWdth * 0.04), 118 ) 119 ], 120 ), 121 ), 122 ], 123 ), 124 ), 125 ], 126 ), 127 ), 128 )); 129 } 130} 131 132class Note extends StatelessWidget { 133 int index = 0; 134 Note(this.index); 135 136 Widget build(BuildContext context) { 137 final double deviceHeight = MediaQuery.of(context).size.height; 138 final double deviceWdth = MediaQuery.of(context).size.width; 139 return TextButton( 140 style: ElevatedButton.styleFrom( 141 foregroundColor: const Color.fromARGB(179, 81, 80, 80), 142 splashFactory: NoSplash.splashFactory, 143 backgroundColor: Colors.white, 144 minimumSize: Size(deviceWdth, deviceHeight * 0.06), 145 maximumSize: Size(deviceWdth, deviceHeight * 0.06), 146 padding: EdgeInsets.zero, 147 tapTargetSize: MaterialTapTargetSize.shrinkWrap, 148 elevation: 0, 149 ), 150 onPressed: () {}, 151 child: Row( 152 children: [ 153 SizedBox( 154 width: deviceWdth * 0.7, 155 child: Row( 156 children: [ 157 SizedBox( 158 width: deviceWdth * 0.04, 159 ), 160 Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ 161 Flexible( 162 child: Container( 163 width: deviceWdth * 0.5, 164 child: Text( 165 list[0].elementAt(index), 166 style: TextStyle( 167 color: Colors.black, 168 fontSize: deviceWdth * 0.038, 169 fontWeight: FontWeight.w500), 170 ), 171 ), 172 ), 173 Text( 174 list[1].elementAt(index), 175 textAlign: TextAlign.left, 176 style: TextStyle( 177 fontSize: deviceWdth * 0.03, 178 color: Color.fromARGB(255, 135, 135, 135)), 179 ), 180 ]) 181 ], 182 ), 183 ), 184 SizedBox( 185 width: deviceWdth * 0.2, 186 ), 187 Icon(Icons.arrow_forward_ios, 188 size: deviceWdth * 0.04, color: Colors.black), 189 SizedBox( 190 width: deviceWdth * 0.01, 191 ), 192 ], 193 ), 194 ); 195 } 196} 197 198

補足情報(FW/ツールのバージョンなど)

[✓] Flutter (Channel stable, 3.3.10, on macOS 13.1 22C65 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.73.0)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

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

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

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

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

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

guest

回答1

0

ベストアンサー

下記のようにExpandedでラップするとエラーは消えると思います。
あるいはSizedBoxで具体的な高さを指定するか。
https://okutaro.com/2021/08/09/2021-8-9-flutter-common-flutter-errorsの訳/#Vertical_viewport_was_given_unbounded_height
上記ページの‘Vertical viewport was given unbounded height’の箇所がわかりやすいかと思います。
よければ参考にされてください。

onPressed: () => showModalBottomSheet( backgroundColor: Colors.transparent, isScrollControlled: true, shape: RoundedRectangleBorder( borderRadius: BorderRadius.vertical(top: Radius.circular(15)), ), context: context, enableDrag: true, builder: (BuildContext context) { return Container( height: deviceHeight * 0.5, decoration: BoxDecoration( borderRadius: BorderRadius.only( topLeft: Radius.circular(30), topRight: Radius.circular(30), bottomLeft: Radius.circular(0), bottomRight: Radius.circular(0), ), ), child: Column( children: [ Container( decoration: BoxDecoration( color:Colors.white, borderRadius: BorderRadius.only( topLeft: Radius.circular(30), topRight: Radius.circular(30), ), ), height:100.0, ), Expanded( //←これが必要。 child: SingleChildScrollView( //physics: const BouncingScrollPhysics(), child: Column( children: [ for (int index = 0; index < list[0].length; index++) ...{new Note(index)}, ], ), ), ) ], ), ); }),

投稿2022/12/31 00:09

moriman

総合スコア615

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

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

bbiiq

2022/12/31 03:54

回答ありがとうございます。 無事スクロールできるようになりました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問