Выровняйте трепет PageView по левому экрану

Question

Я хочу отображать карты с горизонтальной прокручиваемой страницей и иметь возможность видеть границы предыдущей и следующей карты каждый раз, когда одна из них видна.Виджет PageView развевается почти так, как я хочу, но он не показывает страницы, выровненные так, как я хочу, это мой код

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PageView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'PageView Alignment'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: PageView.builder(
        itemCount: 5,
        itemBuilder: (context, i) => Container(
              color: Colors.blue,
              margin: const EdgeInsets.only(right: 10),
              child: Center(child: Text("Page $i")),
            ),
        controller: PageController(viewportFraction: .7),
      ),
    );
  }
}

, это результат, который приведенный выше код выдает

Я хочу, чтобы PageView был выровнен по левому краю экрана или хотя бы по первой странице, т.е. чтобы удалить это пустое пространство слева от Page 0.Есть ли какой-либо параметр PageView, который я пропускаю?Или существует какой-то другой компонент, который дает искомый результат?

Answer 1

Попробуйте добавить поля в соответствии со страницей следующим образом:

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: PageView.builder(
        itemCount: 5,
        itemBuilder: (context, i) => Container(
          color: Colors.blue,
          margin: i == 0
              ? const EdgeInsets.only(right: 10)
              : const EdgeInsets.only(left: 10, right: 10),
          child: Center(child: Text("Page $i")),
        ),
        controller: PageController(),
      ),
    );
  }
}

Результат: