How to make whole screen scrollable in flutter

Question

This is my Code for Body of Scaffold of the Screen

Container(
      child: Column(
        children: <Widget>[
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  VideoPlay(widget: widget),

                  TitleVideo(widget: widget),
                  Padding(
                    padding: const EdgeInsets.only(top: 1.0, left: 10),
                    child: Opacity(
                      opacity: 0.5,
                      child: Row(
                        children: <Widget>[
                          Text(widget.video.viewCount + " views "),
                          SizedBox(
                            width: 5,
                            child: Text("|"),
                          ),
                          Text(" ${timeago.format(widget.video.timestamp)}"),
                        ],
                      ),
                    ),
                  ),
                  SizedBox(
                    height: 15,
                  ),
                  IconRow(
                    video: widget.video,
                  ),
                  //User Panel
                  subscribe_panel(),
                  SizedBox(
                    height: 310,
                    child: suggestedVideo(),
                  ),

                  // Suggestions list
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

The "suggestion list" Contains This Code

    class suggestedVideo extends StatelessWidget {
    const suggestedVideo({Key? key,}) : super(key: key);
    @override
    Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: suggestedVideos.length,
      itemBuilder: (context, index) => VideoCard(
        video: suggestedVideos[index],
        press: () {
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) =>
                      VideoScreen(video: suggestedVideos[index])));
        },
      ),
    );
  }
 }

but The Screen is only scrolling the ListView Builder part rather than the whole screen, I am trying to recreate youtube UI and for the VideoScrolling screen , I want to scroll the screen , by keeping the video at top and Every other widget being scrollable.

Answer 1

You can wrap your top-most Container with SingleChildScrollView, this will make all of your Widget scrollable, also you can replace SingleChildScrollView(child: Column(... with ListView(...), it will give you same result

Answer 2

This happens because when you try to scroll, it scrolls the ListView and not the SingleChildScrollView. In order to solve that, add

physics: const NeverScrollableScrollPhysics()

to your ListView.

You can also remove the SizedBox that wraps suggestedVideo() and add

shrinkWrap: true,
scrollDirection: Axis.vertical,

to your ListView.