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

Flutter: CarouselSlider/ExpandablePageView scrollable items with width larger than then phone screen width?

I want to use a widget like Carousel Slider or Expandable Page View (or any PageView builder working implementation) that has items/pages with width larger than the screen width. I want to be able to scroll left and right freely and switch page only when I reach the end of the item/page (left/right so previous/next). Also I want them to be vertically scrollable too.

The problem doesn’t seem so much the vertical scroll but the horizontal one, since I tried and whenever I create an item with width > than the screen size, all the other pages disappear and I can only scroll inside that one.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This is what I am trying, only the first item appears.

               SingleChildScrollView(
                      scrollDirection: Axis.vertical,
                      child: SizedBox(
                        width: MediaQuery.of(context).size.width + 400,
                        child: CarouselSlider.builder(
                          itemCount: 6,
                          itemBuilder: (context, index, realIndex) {
                            return SingleChildScrollView(
                              scrollDirection: Axis.horizontal,
                              child: Container(
                                color:
                                    index % 2 == 0 ? Colors.red : Colors.blue,
                                width: MediaQuery.of(context).size.width + 400,
                                child: Text(
                                  index.toString(),
                                ),
                              ),
                            );
                          },
                          options: CarouselOptions(viewportFraction: 1.0),
                        ),
                      ),
                    ),

  2. 0

    This code may help to resolve the issues.

      SingleChildScrollView( 
                      scrollDirection: Axis.vertical,
                      child: Expanded(
                        
                        child: CarouselSlider.builder(
                          scrollDirection: Axis.vertical,
                          itemCount: 6,
                          itemBuilder: (context, index, realIndex) {
                            return SingleChildScrollView(
                              scrollDirection: Axis.horizontal,
                              child: Container(
                                color:
                                    index % 2 == 0 ? Colors.red : Colors.blue,
                                width: MediaQuery.of(context).size.width + 400,
                                child: Text(
                                  index.toString(),
                                ),
                              ),
                            );
                          },
                          options: CarouselOptions(viewportFraction: 1.0),
                        ),
                      ),
                    ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search