Flutter PageView - Show preview of page only on right-CodePudding

I am building a carousel where I want the preview page only on the right. This is the kind of result that I want.

I saw this question but it has previews on both sides. Can anyone suggest what I should do?

CodePudding user response：

To achieve this you have to use viewportFraction in PageController. Please refer to the following code:

import 'package:flutter/material.dart';

class NewPage extends StatelessWidget {
  const NewPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<String> countries = [
      'Canada',
      'Germany',
      'India',
      'Taiwan, Province of China',
      'United States',
      'United Kingdom',
      'Kingdom of Saudi Arabia',
      'Bangladesh',
      'Vietnam',
      'Peru',
      'Italy'
    ];

    return Scaffold(
      backgroundColor: Colors.purple,
      body: SizedBox(
          height: 200,
          width: double.infinity,
          child: PageView.builder(
              controller: PageController(
                  initialPage: 0,
                  viewportFraction: countries.length == 1 ? 1 : 0.80),
              itemCount: countries.length,
              padEnds: false,
              itemBuilder: (context, index) {
                return Card(
                  margin: EdgeInsets.fromLTRB(10, 8, 10, 0),
                  color: Colors.lightBlue,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                    child: Center(child: Text(countries[index])),
                  ),
                );
              })),
    );
  }
}

CodePudding user response：

Use padEnds: false property of PageView like this:

PageView(
  children: items,
  padEnds: false,
  controller: PageController(
      viewportFraction: 0.8,
      initialPage: 0,
  )
)