Flutter SingleChildScrollView内でListViewを使い、全画面でスクロールしたい

Question

#実現したいこと
動画のように、SingleChildScrollView内でListViewを使い、全画面でスクロールしたいです。
（ListViewはスクロールされず固定で、画面全体をスクロースしたい）
動画を見るとできてるかのように見えますが、なぜか一番最後のCardの下途切れております。。。
これを解消したいです！

動画はこちらを参考に

#該当のソース
MyPageScreen＞MyPageMovies＞MyPageMovieCardというようにネストされています。

・MyPageScreen→画面全体
・MyPageMovies→映画一覧を表示させるWidget
・MyPageMovieCard→映画のCard１つ１つ

こんな感じです。

※APIから値を取得したりしている部分は省きます

##MyPageScreen

class MyPageScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          // ここでheightを指定しないとエラーになる
          height: MediaQuery.of(context).size.height,
          padding: const EdgeInsets.all(30),
          child: Column(
            children: <Widget>[
              // MyPageView(), 関係ないため除外
              Padding(
                padding: EdgeInsets.only(
                  top: 3 * SizeConfig.blockSizeVertical,
                  bottom: 3 * SizeConfig.blockSizeVertical,
                ),
                child: Text(
                  'My Movies',
                  style: Theme.of(context).textTheme.headline6,
                ),
              ),
              MyPageMovies(),
            ],
          ),
        ),
      ),
    );
  }
}

SingleChildScrollView直下にあるContainerで高さを指定しないと壮大なエラーに遭遇します。。

RenderFlex children have non-zero flex but incoming height constraints are unbounded.
// 省略
Updated layout information required for _RenderScrollSemantics#fe738 NEEDS-LAYOUT NEEDS-PAINT to calculate semantics.
'package:flutter/src/rendering/object.dart':
Failed assertion: line 2658 pos 12: '!_needsLayout'

##MyPageMovies

class MyPageMovies extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final userId = _firebaseAuth.currentUser.uid;
    return StreamBuilder<QuerySnapshot>(
        stream: _firestore.collection('users/${userId}/movies').snapshots(),
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasError) {
            return Center(
              child: Text(snapshot.error),
            );
          }
          if (snapshot.hasData) {
            return Expanded(
              child: ListView.builder(
                itemCount: snapshot.data.docs.length,
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemBuilder: (BuildContext context, int index) {
                  return Column(
                    children: <Widget>[
                      MyPageMovieCard(
                        snapshot.data.docs[index].data()['id'],
                        snapshot.data.docs[index].data()['title'],
                      ),
                    ],
                  );
                },
              ),
            );
          }
          return Center(child: CircularProgressIndicator());
        });
  }
}

ListView.builderでスクロールさせないために、下記２つを追加。

shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),

##MyPageMovieCard

class MyPageMovieCard extends StatelessWidget {
  final int id;
  final String title;

  MyPageMovieCard(this.id, this.title);

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: getMyMovie(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.hasError) {
            return Center(
              child: Text(snapshot.error),
            );
          }
          if (snapshot.hasData) {
            final posterPath = snapshot.data['poster_path'];
            return InkWell(
              borderRadius: BorderRadius.circular(10),
              child: Card(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20)),
                clipBehavior: Clip.antiAliasWithSaveLayer,
                child: Row(
                  children: <Widget>[
                   Image.network(
                            'https://image.tmdb.org/t/p/w154/${posterPath}',
                          ),
                    Expanded(
                      child: Container(
                        padding: const EdgeInsets.all(10),
                        child: Container(
                          width: double.infinity,
                          child: Text(
                            title,
                            style: Theme.of(context).textTheme.headline6,
                            textAlign: TextAlign.left,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
          }
          return Center(child: CircularProgressIndicator());
        });
  }
}

自分で試したこと

##ListViewをスクロール可能にする

return Expanded(
              child: ListView.builder(
                itemCount: snapshot.data.docs.length,
                // shrinkWrap: true,
                // physics: NeverScrollableScrollPhysics(),
                itemBuilder: (BuildContext context, int index) {
                  return Column(

こうすると最後までCardが途切れることなく表示されます。
でもこれだとSingleChildScrollViewでもスクロールできて、ListViewでもスクロールできてしまうので、、、。

##LayoutBuilderを使用

https://stackoverflow.com/questions/56326005/how-to-use-expanded-in-singlechildscrollview

????を参考に下記のコードを試しましたが、全く同じエラーでダメでした。。。

class MyPageScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => SingleChildScrollView(
          child: ConstrainedBox(
            constraints: BoxConstraints(minHeight: constraints.maxHeight),
            child: IntrinsicHeight(
              child: Column(
                children: <Widget>[
                  // MyPageView(),
                  Padding(
                    padding: EdgeInsets.only(
                      top: 3 * SizeConfig.blockSizeVertical,
                      bottom: 3 * SizeConfig.blockSizeVertical,
                    ),
                    child: Text(
                      'My Movies',
                      style: Theme.of(context).textTheme.headline6,
                    ),
                  ),
                  MyPageMovies(),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

ListView.builder は画面に表示されている周辺を徐々に描画するので　physics: NeverScrollableScrollPhysics()　の設定によって描画が初期状態で止まっています。

一方 SingleChildScrollView のスクロールはこの場合　ListView.builder　以外の部分のスクロールを担当しています。

そのため最後の映画だけ中途半端な描画となり、スクロールしても表示されない状況になっていると思われます。

SingleChildScrollView と　ListView.builder > physics: NeverScrollableScrollPhysics()　を消してはどうでしょうか。

スクロールバーの位置が内側になるのを避けたいのでしたら、Scaffold > Container の Paddingを消して ListView.builder > Column を Padding で囲むのはどうでしょうか。

return Container(
            // SingleChildScrollView を削除
            height: MediaQuery.of(context).size.height,
            // padding: const EdgeInsets.all(30),
            child: Column(
              children: [
                Padding(
                  padding: EdgeInsets.only(
                    top: 3,
                    bottom: 3,
                  ),
                  child: Text(
                    'My Movies',
                    style: Theme.of(context).textTheme.headline6,
                  ),
                ),
                Expanded(
                  child: ListView.builder(
                    itemCount: movies.length,
                    // shrinkWrap: true,
                    // physics: NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      return Padding(
                        // 追加
                        padding: const EdgeInsets.all(30),
                        child: Column(
                          children: <Widget>[
                            for (var movie in movies)
                              Card(
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(20),
                                ),
                                clipBehavior: Clip.antiAliasWithSaveLayer,
                                child: Row(
                                  children: [
                                    Image.network(
                                      movie.fullImageUrl,
                                      fit: BoxFit.cover,
                                      width: 200,
                                      height: 300,
                                    ),
                                    Expanded(
                                      child: Container(
                                        padding: const EdgeInsets.all(10),
                                        child: Container(
                                          width: double.infinity,
                                          child: Text(
                                            movie.title,
                                            style: Theme.of(context)
                                                .textTheme
                                                .headline6,
                                            textAlign: TextAlign.left,
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                          ],
                        ),
                      );
                    },
                  ),
                ),
              ],
            ),
          );

Comments

[Gento]

・SingleChildScrollView
・ListView.builder > physics: NeverScrollableScrollPhysics()

上記２つを削除すると確かにCardが途切れると言う現象は無くなりましたが、これだとListView.builderの部分だけがスクロール可能になります。。。

実現したい事としては「画面全体でスクロール可能で、かつListView.builderの部分はスクロールさせない」と言う動作です。。。

[退会済みユーザー]

SingleChildScrollViewによる「画面全体スクロール」でCardの内容を全て描画させたいということであれば、NeverScrollableScrollPhysics()である限りできないと思います。Cardをlazy描画しているのはListView.builderですので。

実現されたい内容だと、Card は lazy描画でない通常の方法で描画しておくしかないと思います。

[Gento]

なるほど、そういうことでしたか！
＞Card は lazy描画でない通常の方法で描画しておくしかないと思います。
ListView.builderを使わない方法を模索するのが良さそうですね。
ありがとうございます！