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!

CodePudding user response：

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"),
            ),
          ],
        ),
      ),
    );
  }
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe> Link

CodePudding user response：

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'),
    )
  ],
);

} }