Flutter listview limit scroll

Question

I am developing a flutter app. I am using ListView for scrolling. I need a horizontal scrolling. The scrolling slides width is 75% 0f screen width. I have six slides, first three slides colors are red, purple, amber. When I scroll first slide red. It will show the second slide half. That means the scrolling width is 100%. I want to show each slide complete when scroll. If I scroll red I want to show purple complete.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return MaterialApp(
    title: 'MyApp',
    home: MainPage(),
    );
}
}

class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return Scaffold(
    body: Container(
        height: MediaQuery.of(context).size.width/1.5,
        margin: EdgeInsets.symmetric(vertical: 50.0),
        child: LayoutBuilder(builder: (context, snapshot) {
        final width = MediaQuery.of(context).size.width / 1.5; 
        return ListView(
            itemExtent: width,
            physics: const PageScrollPhysics(), 
            scrollDirection: Axis.horizontal,
            children: [
            Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.redAccent,),
            Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.purpleAccent,),
            Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.amberAccent,),
            Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.blueAccent,),
            Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.pinkAccent,),
            Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.greenAccent,)
            ],
        );
        }),
    ),
    );
}
}

Current scrolling screenshot

Answer 1

You need to add a padding to your ListView in order to offset the scroll boundary into the screen. Below I added it to your code with a side boundary of 16.

...

ListView(
  itemExtent: width,
  physics: const PageScrollPhysics(), 
  padding: EdgeInsets.symmetric(horizontal: 16.0), //This is where you put your side padding
  scrollDirection: Axis.horizontal,
  children: [
    Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.redAccent,),
    Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.purpleAccent,),
    Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.amberAccent,),
    Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.blueAccent,),
    Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.pinkAccent,),
    Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.greenAccent,)
  ],
);

...

Hope it helps!

Answer 2

I have used PageView instead of ListView

PageView(children: <Widget>[ 
ListView(itemExtent: width, 
// physics: const PageScrollPhysics(),     
scrollDirection: Axis.horizontal, 
children: [ Container(
margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.redAccent,), 
  Container(margin: EdgeInsets.symmetric(horizontal: 10.0),color: Colors.purpleAccent,), 
  Container(margin: EdgeInsets.symmetric(horizontal: 10.0), color: Colors.amberAccent,),
 ], 
), ], );