Flutter page dragging functionalities - flutter

Question

Hello flutter developers,
I am trying to develop a project which has dragging functionalities.
Here is the demo
Here i have three page. On page A when i swipe from left to right page B will appear from left of the screen but the page transition will be like i'm actually dragging the page. And when i swipe right to left page C will appear.
If someone could provide me any idea like how can i achieve that or any documentation be appreciated.

Answer 1

You should try PageView.builder widget. Here is some example code that has three centered text widgets passed as a list to the PageView. You would provide the list of your A, B & C pages.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Hello World',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyStatelessWidget(),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final PageController controller = PageController();
return Scaffold(
body: PageView(
/// [PageView.scrollDirection] defaults to [Axis.horizontal].
/// Use [Axis.vertical] to scroll vertically.
// scrollDirection: Axis.vertical,
controller: controller,
children: const <Widget>[
Center(
child: Text('First Page'),
),
Center(
child: Text('Second Page'),
),
Center(
child: Text('Third Page'),
)
],
),
);
}
}
For further reference and to read more about its several properties, you may refer to the official documentation here: Official Flutter PageView Doc or a Medium article here: A bit advanced usage of PageView

Answer 2

You can use page view to achieve this layout
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatelessWidget(),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final PageController controller = PageController();
return PageView(
controller: controller,
children: [
Center(
child: Text('First Page'),
),
Center(
child: Text('Second Page'),
),
Center(
child: Text('Third Page'),
)
],
);
}
}