На странице флаттера не отображаются два слайда

Question

Я создаю флаттер приложение с просмотром страницы.Я хочу показать два слайда на экране.Но при использовании Pageview я даю viewportFraction это 0.5.Перед первым слайдом и после последнего слайда отображаются пустые места.Два слайда не приходят полностью из-за пустого пространства, я хочу удалить пустое пространство.Мой код показан ниже

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)
        ],
        ),
    ),
    );
}
}

Скриншот приведен ниже

Answer 1

как опция

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)
            ],
          );
        }),
      ),
    );
  }
}