Question 275026 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – I can't scroll the entire screen

When I slide the Expanded(child: MusicListCardWidget()) part of the screen from the widgets in the column, the widgets at the top do not slide, but the entire screen needs to slide at once. How can I do this?

  Scaffold(
      body: Column(
    
      children: [
         SizedBox(height: 2.h,),
       Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("En son", style: TextStyles.plyListTextStyle(context)),
          SizedBox(width: 2.w,),
          Icon(Icons.auto_awesome_motion_rounded)
        ],
      ),
      SizedBox(height: 2.h,),
      Container(
        //width: 60.h,
        height: 30.h,
       // color: Colors.black,
        child: PageView(
          controller: controller,
          scrollDirection: Axis.horizontal
          ,children: [
            MusicCardWidget(),
            MusicCardWidget()  
          ],
        )
        ),
        Expanded(child: MusicListCardWidget()),
    ],
  ),
);
Tags:

2

Answers


  1. 0

    Use a SingleChildScrollView:

            Scaffold(
              body: SingleChildScrollView(
                child: Column(
                  children: [
                    SizedBox(
                      height: 2.h,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text("En son", style: TextStyles.plyListTextStyle(context)),
                        SizedBox(
                          width: 2.w,
                        ),
                        Icon(Icons.auto_awesome_motion_rounded)
                      ],
                    ),
                    SizedBox(
                      height: 2.h,
                    ),
                    Container(
                        //width: 60.h,
                        height: 30.h,
                        // color: Colors.black,
                        child: PageView(
                          controller: controller,
                          scrollDirection: Axis.horizontal,
                          children: [MusicCardWidget(), MusicCardWidget()],
                        )),
    /// in case the error persists, either change the code of MusicListCardWidget 
/// to a widget without vertical scroll like a Column instead of Listview, 
/// or put a Container with a delimited Height around it
                    MusicListCardWidget(),
                  ],
                ),
              ),
            );
    Login or Signup to reply.
  2. 0

    If you want it to scroll up-down, you’ll need a Scrollable view, but it will conflict with the expanded, because it would try to expand to the infinity,
    Adding a SingleChildScrollView and removing the expanded, should look like this:

        Scaffold(
        SingleChildScrollView(
          child: 
          body: Column(    
          children: [
             SizedBox(height: 2.h,),
           Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("En son", style: TextStyles.plyListTextStyle(context)),
              SizedBox(width: 2.w,),
              Icon(Icons.auto_awesome_motion_rounded)
            ],
          ),
          SizedBox(height: 2.h,),
          Container(       
            height: 30.h,       
            child: PageView(
              controller: controller,
              scrollDirection: Axis.horizontal
              ,children: [
                MusicCardWidget(),
                MusicCardWidget()  
              ],
            )
            ),                 
      MusicListCardWidget(),
    ],
    ),
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search