Flutter : Horizontal Listview with viewportFraction

Question

I want to implement this horizontal ListView effect.

Planning to create a horizontal ListView like this. Example the horizontal listView will show 2 items and 1 item only show up 20%.

When scrolling it will become like this. Example front and end show up 20% and center show 2 items.

Edited : Code I'm using right now :

viewportFraction = 1 / 2.3;

LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
  final double itemWidth =
      (constraints.maxWidth - padding.horizontal) * this.viewportFraction;
  final double itemHeight = (itemWidth * this.aspectRatio);

  return new Container(
    height: itemHeight,
    child: new ListView.custom(
      scrollDirection: Axis.horizontal,
      controller: new PageController(
        initialPage: this.initialPage,
        viewportFraction: this.viewportFraction,
      ),
      physics: const PageScrollPhysics(),
      padding: this.padding,
      itemExtent: itemWidth,
      childrenDelegate: this.childrenDelegate,
    ),
  );
});

user_13776091 · Answer

The easiest way of doing this is probably with an horizontal ListView builder

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      scrollDirection:Axis.horizontal,
      itemCount:10,
      itemBuilder:(context,index){
        return Padding(
          padding:EdgeInsets.symmetric(horizontal:MediaQuery.of(context).size.width*0.05),
          child:Container(
            color: Colors.blue,
        child:Text(index.toString()),
        height:20,
        width:MediaQuery.of(context).size.width*0.25,
        )
        );
      }
    );
  }

The MediaQuery.of(context).size allows you to get information about your sreen geometry

I'll let you do some math to find the right fraction of the screen to use to get the final result that you want

Flutter : Horizontal Listview with viewportFraction

1 Answers