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

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

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

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

Dart

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

Q&A

0回答

244閲覧

【Flutter】showModalBottomSheetにTextButtonとSingleChildScrollViewを同じContanaierに入れることができません

bbiiq

総合スコア51

Flutter

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

Dart

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

0グッド

0クリップ

投稿2022/12/31 04:11

編集2022/12/31 04:38

前提

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

実現したいこと

下記のソースで実行したところ、TextButtonの部分とSingleChildScrollViewが独立してしまい、同じshowModalBottomSheetの中に入っているように見えません。
(showModalBottomSheetのヘッダ部分が消えてTextButtonになってしまう)
これはどうすれば添付した画像のようにTextButtonとSingleChildScrollViewを同じshowModalBottomSheetの中に入っているように見えるのでしょうか。
もしよければ教えていただけるとありがたいです。よろしくお願いいたします。

該当のソースコード

Dart

1import 'package:flutter/material.dart'; 2import 'package:line_icons/line_icon.dart'; 3 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 TextButton( 86 style: ElevatedButton.styleFrom( 87 foregroundColor: const Color.fromARGB(179, 81, 80, 80), 88 splashFactory: NoSplash.splashFactory, 89 backgroundColor: Colors.white, 90 minimumSize: 91 Size(deviceWdth * 0.55, deviceHeight * 0.07), 92 maximumSize: 93 Size(deviceWdth * 0.55, deviceHeight * 0.07), 94 padding: EdgeInsets.zero, 95 tapTargetSize: MaterialTapTargetSize.shrinkWrap, 96 elevation: 0, 97 shape: const RoundedRectangleBorder( 98 borderRadius: BorderRadius.only( 99 topLeft: Radius.circular(15), 100 topRight: Radius.circular(15), 101 bottomLeft: Radius.circular(15), 102 bottomRight: Radius.circular(15), 103 ), 104 ), 105 ), 106 onPressed: () { 107 Navigator.push( 108 context, 109 MaterialPageRoute( 110 builder: (context) => WriteDiary())); 111 }, 112 child: Row( 113 mainAxisAlignment: MainAxisAlignment.center, 114 children: [ 115 Icon( 116 LineIcons.pen, 117 size: deviceWdth * 0.055, 118 color: Colors.black, 119 ), 120 SizedBox( 121 width: deviceWdth * 0.01, 122 ), 123 Text( 124 '書く', 125 textAlign: TextAlign.center, 126 style: TextStyle( 127 fontSize: 17, 128 color: Colors.black, 129 ), 130 ), 131 ], 132 ), 133 ), 134 SizedBox( 135 height: deviceHeight * 0.01, 136 ), 137 Expanded( 138 child: SingleChildScrollView( 139 physics: BouncingScrollPhysics(), 140 child: Column( 141 children: [ 142 SizedBox( 143 height: deviceHeight * 0.02, 144 ), 145 for (int index = 0; 146 index < diaryList[0].length; 147 index++) ...{new Diary(index)}, 148 ], 149 ), 150 ), 151 ), 152 ], 153 )); 154 }), 155 child: Row( 156 mainAxisAlignment: MainAxisAlignment.spaceBetween, 157 children: [ 158 SizedBox( 159 width: deviceWdth * 0.7, 160 child: Row( 161 children: [ 162 SizedBox( 163 width: deviceWdth * 0.04, 164 ), 165 CircleAvatar( 166 radius: deviceWdth * 0.045, 167 ), 168 SizedBox( 169 width: deviceWdth * 0.04, 170 ), 171 Text( 172 '名前', 173 style: TextStyle(fontSize: deviceWdth * 0.04), 174 ) 175 ], 176 ), 177 ), 178 ], 179 ), 180 ), 181 ], 182 ), 183 ), 184 )); 185 } 186} 187 188class Note extends StatelessWidget { 189 int index = 0; 190 Note(this.index); 191 192 Widget build(BuildContext context) { 193 final double deviceHeight = MediaQuery.of(context).size.height; 194 final double deviceWdth = MediaQuery.of(context).size.width; 195 return TextButton( 196 style: ElevatedButton.styleFrom( 197 foregroundColor: const Color.fromARGB(179, 81, 80, 80), 198 splashFactory: NoSplash.splashFactory, 199 backgroundColor: Colors.white, 200 minimumSize: Size(deviceWdth, deviceHeight * 0.06), 201 maximumSize: Size(deviceWdth, deviceHeight * 0.06), 202 padding: EdgeInsets.zero, 203 tapTargetSize: MaterialTapTargetSize.shrinkWrap, 204 elevation: 0, 205 ), 206 onPressed: () {}, 207 child: Row( 208 children: [ 209 SizedBox( 210 width: deviceWdth * 0.7, 211 child: Row( 212 children: [ 213 SizedBox( 214 width: deviceWdth * 0.04, 215 ), 216 Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ 217 Flexible( 218 child: Container( 219 width: deviceWdth * 0.5, 220 child: Text( 221 list[0].elementAt(index), 222 style: TextStyle( 223 color: Colors.black, 224 fontSize: deviceWdth * 0.038, 225 fontWeight: FontWeight.w500), 226 ), 227 ), 228 ), 229 Text( 230 list[1].elementAt(index), 231 textAlign: TextAlign.left, 232 style: TextStyle( 233 fontSize: deviceWdth * 0.03, 234 color: Color.fromARGB(255, 135, 135, 135)), 235 ), 236 ]) 237 ], 238 ), 239 ), 240 SizedBox( 241 width: deviceWdth * 0.2, 242 ), 243 Icon(Icons.arrow_forward_ios, 244 size: deviceWdth * 0.04, color: Colors.black), 245 SizedBox( 246 width: deviceWdth * 0.01, 247 ), 248 ], 249 ), 250 ); 251 } 252}

試したこと

・TextButtonの部分をExpanded()でラップする。

補足情報(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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問