How to show one item per page(while showing the tip of the next item) for listview builder on flutter?

Question

I would like to create a horizontal listview builder that shows one item per page (while showing the tip of the next and previous item) as shown in the photos below:

My current code is:

Container(
            height: 240,
            alignment: Alignment.center,
            child: ListView.builder(
                scrollDirection: Axis.horizontal,
                shrinkWrap: true,
                physics: PageScrollPhysics(),
                itemCount: homeState.questionList.length,
                itemBuilder: (context, index) =>
                    Container(
                   width: width,
                   child: Center(
                      child: Container(
                      width: width*0.9,
                          decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(17.7)),
                          color: Color(0xff181818),
            ),
                     child: Text(questionList[index].text)

        ),
      ),
    );
            ),
          )

My current code is able to show one item per page but it doesn't show the tip of the next item as seen pointed out by the arrows in the photos. Any suggestions are welcome. Thanks.

Solution

You are close with your code some tweaks will get your result:

SizedBox(
            height: 200,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 15,
              itemBuilder: (context, index) => Padding(
                padding: EdgeInsets.all(6),
                child: Container(
                  width: MediaQuery.of(context).size.width * .90,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: Colors.red,
                  ),
                  child: Center(child: Text(index.toString())),
                ),
              ),
            ),
          )

The above code has this result

EDIT

You can also use a PageView with such controller var controller = PageController(viewportFraction: 0.9);

SizedBox(
            height: 200,
            child: PageView.builder(
              controller: controller,
              scrollDirection: Axis.horizontal,
              itemCount: 15,
              itemBuilder: (context, index) => Padding(
                padding: EdgeInsets.all(6),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: Colors.red,
                  ),
                  child: Center(child: Text(index.toString())),
                ),
              ),
            ),
          )

Comments

[Naveen Avidi]

Why don't you use PageView ?

[scott lee]

Hey @NaveenAvidi, thanks for the suggestion. My code will involve pagination and I would like to show the edge of the next item on the page as shown in the photos. Do you think pageview will work?

[scott lee]

Hi @esentis, thanks for the suggestion. Do you think we can still make this work when we put "physics: PageScrollPhysics()" into the listviewbuilder? Because I would like to see one item per page instead of half of one item and half of the next item.