I want to render cards with a horizontal paged scroll and be able to see the borders of the previous and next card every time one is visible. The flutter PageView widget produces almost the result I want, but it doesn't show the pages aligned the way I want, this is my code
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),
),
);
}
}
this is the result the above code produces
I want the PageView to be aligned to the left of the screen, or at least that first page, i.e to remove that blank space at the left of Page 0
. I s there any PageView parameter I'm missing? Or does some other component exists that produces the result I'm looking for?
Setting the PageView's padEnds
property to false
should do the trick 👌🏽.
...the property probably didn't exist in the past.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With