【Flutter】Rowウィジェットの中の一部だけ横スクロールさせたい

Flutterで、Row Widgetに２つの要素を並べ、右側のパーツだけ横スクロールするようWidgerを組みたいと思っています。

単純にRowのChildrenの２つ目にSingleChildScrollViewを設置したものの、Right overflowed by XX pixelsになってしまいます。

何か実現できる手立てがあれば、教えていただけないでしょうか。

ご参考までに、コードを掲載します。
何卒よろしくお願いいたします。

※以下はNGだったコードです。Right overflowedになります。

Dart
1return Column(
2  children: [
3    const Text('title'),
4    SizedBox(
5      width: 1030,
6      child: Row(
7        children: [
8          const SizedBox(
9            width: 30,
10            height: 400,
11            child: Text('固定表示させたいパーツ'),
12          ),
13          SingleChildScrollView(
14            scrollDirection: Axis.horizontal,
15            child: SizedBox(
16              width: 1000,
17              height: 400,
18           　　  child: const Text('横にスクロールしたいパーツ')
19            ),
20          )
21        ],
22      )
23    )
24  ],
25);

行動規範の内容に同意します

回答1件

ベストアンサー

Expandedが必要です。
以下のように、ExpandedのchildにSingleChildScrollViewしてあげてください。

dart
1return Column(
2      children: [
3        Text('title'),
4        Container(
5            width: 1030,
6            child: Row(children: <Widget>[
7              const SizedBox(
8                width: 30,
9                height: 400,
10                child: Text('固定表示させたいパーツ'),
11              ),
12              Expanded(    // ココ追加！！！！！！
13                  child: SingleChildScrollView(
14                      scrollDirection: Axis.horizontal,
15                      child: Row(children: <Widget>[
16                        SizedBox(
17                            width: 100,
18                            height: 400,
19                            child: const Text('横にスクロールしたいパーツ')),
20                        SizedBox(
21                            width: 100,
22                            height: 400,
23                            child: const Text('横にスクロールしたいパーツ')),
24                        SizedBox(
25                            width: 100,
26                            height: 400,
27                            child: const Text('横にスクロールしたいパーツ')),
28                        SizedBox(
29                            width: 100,
30                            height: 400,
31                            child: const Text('横にスクロールしたいパーツ')),
32                        SizedBox(
33                            width: 100,
34                            height: 400,
35                            child: const Text('横にスクロールしたいパーツ')),
36                      ])))
37            ]))
38      ],
39    );