how to scroll through the two views combined in flutter

Question

In the video and picture below, the horizontal and vertical widgets are arranged in order.

If you scroll through this, each widget will move separately, just like a video.

I want to make this move at once.

please enter the videoLink

https://firebasestorage.googleapis.com/v0/b/coody-f21eb.appspot.com/o/%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB%20%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8%202020-09-28%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%208.06.33.mov?alt=media&token=8a9d3fd0-1256-4d92-9a57-

please enter Imglink

https://firebasestorage.googleapis.com/v0/b/coody-f21eb.appspot.com/o/KakaoTalk_Photo_2020-09-28-08-15-13.jpeg?alt=media&token=77cd7fba-5b62-4d68-b760-8

import 'package:flutter/material.dart';
import 'element_homepage/contents_carousel.dart';
import 'element_homepage/gridView_of_homepage.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'product_detail.dart';

class HomeScreen extends StatefulWidget {
  var stopTrigger = 1;
  var unchanging ;
  List<bool>bool_list_each_GridSell =[];
  List<String> styleList = [];
  var tf_copy = [];

  final FirebaseUser user;
  HomeScreen(this.user);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  @override
  void initState() {
    super.initState();
    if(widget.stopTrigger == 1){
      setState(() {
        widget.unchanging = Firestore.instance.collection("uploaded_product").snapshots();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(title:Text("logo --- rec --- menu")),
        body: _bodyBuilder()


      ),
    );
  }

  Widget _bodyBuilder() {
    return Column(
        children: [
          ContentsCarousel(),
          _gridBuilder()
        ],
      );
  }


  Widget _gridBuilder() {
    return Expanded(
      child: StreamBuilder <QuerySnapshot>(
        stream: _commentStream(),
        builder: (BuildContext context, AsyncSnapshot snapshot){
          if(!snapshot.hasData){
            return Center(child:  CircularProgressIndicator());
          }
          var items =  snapshot.data?.documents ??[];
          var fF = items.where((doc)=> doc['style'] == "오피스룩").toList();
          var sF = items.where((doc)=> doc['style'] == "로맨틱").toList();
          var tF = items.where((doc)=> doc['style'] == "캐주얼").toList();
          fF.addAll(sF);
          fF.addAll(tF);
          widget.tf_copy.addAll(fF);
          if(widget.stopTrigger == 2 ){
            fF.shuffle();
            widget.unchanging = fF;
          }
          return GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                childAspectRatio: 0.6,
                mainAxisSpacing: 2.0,
                crossAxisSpacing: 2.0,),
              itemCount: fF.length,
              itemBuilder: (BuildContext context, int index) {
                for(var i=0; i<fF.length; i++){
                  widget.bool_list_each_GridSell.add(false);
                }
                return _buildListItem(context,widget.unchanging[index]);
              }
          );


        },
      ),
    );
  }

  Widget _buildListItem(context, document) {
    return
      InkWell(
          onTap: (){
            Navigator.push(context, MaterialPageRoute(builder: (context){
              return ProductDetail(widget.user, document);
            }));
          },
          child: Image.network(
              document['thumbnail_img'],
              fit : BoxFit.cover)
      );

  }

  Stream<QuerySnapshot> _commentStream() {
    widget.stopTrigger +=1;
    if(widget.stopTrigger == 2 ){
      return widget.unchanging;
    }
  }


}

Answer 1

I see you're attempting to achieve a behavior where a scroll on the GridView results in a scroll on the whole screen.

As the ContentsCarousel() and _gridBuilder() are in a Column , this behaviour cannot be achieved.

What I would suggest is wrapping your Column with a SingleChildScrollView widget.