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.

Answer 1

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())),
                ),
              ),
            ),
          )