Flutter page view not showing two slides

Question

I am building a flutter app with page view. I want to show two slides in a screen. But when using Pageview I am giving viewportFraction is 0.5 . Before the first slide and after the last slide it showing blank spaces. The two slides not coming completely because of blank space, I want to remove blank space. My code is shown below

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(
        margin: EdgeInsets.symmetric(
        vertical: 50.0,
        ),
        child: PageView(
        controller: PageController(
            initialPage: 0,
            viewportFraction: 0.5,
        ),
        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.greenAccent)
        ],
        ),
    ),
    );
}
}

Screenshot is given below

Answer 1

as an option

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(
        margin: EdgeInsets.symmetric(vertical: 50.0),
        child: LayoutBuilder(builder: (context, snapshot) {
          final width = snapshot.maxWidth / 2; // magic is here
          return ListView(
            itemExtent: width,
            physics: const PageScrollPhysics(), // and here
            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)
            ],
          );
        }),
      ),
    );
  }
}