Search code examples
flutterdartflutter-listview

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

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:

enter image description here enter image description here

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

    enter image description here

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

    ss2