Flutter - Slidable on whole page?

Question

I'm trying to implement a sliding option that will basically, depending on if I go left or right, direct me to the previous/next message in my app (aka. trigger an action). It should work on the entire page, similar to how tinder slide left/right works. Is there any way to do this in flutter?

I've looked into the flutter_slidable but I'm not sure if I can make the sliding work on the whole page.

Would appreciate some help, thanks in advance!

Answer 1

You can use TabBarView for this:

 import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Learning', theme: ThemeData( primarySwatch: Colors.green, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() { return _MyHomePageState(); } } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( bottom: TabBar( tabs: [ Tab(text: "Flights", icon: Icon(Icons.flight),), Tab(text: "Trains", icon: Icon(Icons.train)), Tab(text: "Hotels",icon: Icon(Icons.restaurant)), ], ), title: Text('Flutter TabBar'), ), body: TabBarView( children: const <Widget>[ Center( child: Text("Flights"), ), Center( child: Text("Trains"), ), Center( child: Text("Hotels"), ), ], ), ), ); } }

Link

Answer 2

Flutter PageView is used to slide pages either vertically or horizontally.

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

  @override
 Widget build(BuildContext context) {
 return MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: const Text('PageView ')),
    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(
  /// [PageView.scrollDirection] defaults to [Axis.horizontal].
  /// Use [Axis.vertical] to scroll vertically.
  scrollDirection: Axis.horizontal,
  controller: controller,
  children: const <Widget>[
    Center(
      child: Text('First Page'),
    ),
    Center(
      child: Text('Second Page'),
    ),
    Center(
      child: Text('Third Page'),
    )
  ],
);

} }