Listview item swipe right open new screen in Flutter

Question

How to open new screen by swiping to the right of listview item similar to as snapchat app. This is the video link that i want to achieve this. link

I tried to check with listview slidable but there is no option for navigating to new screen. Below is the sample dart code of two screens. By swiping right of listview item i want to open TestPage.dart screen. How to achieve this in Flutter?

FirstPage.dart

ListView.builder(
          itemCount: 10,
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  Row(
                    children: [
                      ClipOval(
                        child: Image.network(
                          'https://googleflutter.com/sample_image.jpg',
                          width: 50,
                          height: 50,
                          fit: BoxFit.cover,
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(
                            right: 10.0),
                        child: Column(
                          children: [
                            Row(
                              mainAxisAlignment:
                              MainAxisAlignment
                                  .spaceBetween,
                              children: [
                                Text(
                                  'Person 1',
                                  style: TextStyle(
                                    color: Colors.red
                                  ),
                                ),
                                const FittedBox(
                                  fit: BoxFit.fitWidth,
                                  child: Text(
                                    'last seen at 8:22 PM'
                                )
                              ],
                            ),
                            Padding(
                              padding: const EdgeInsets.only(
                                  top: 5.0),
                              child: SizedBox(
                                width: MediaQuery.of(context)
                                    .size
                                    .width *
                                    0.50,
                                child:Text('test'),
                              ),
                            )
                          ],
                        ),
                      ),],),],),);}),

TestPage.dart

    class TestPage extends StatefulWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.redAccent,
      body: Container(),
    );
  }
}

I don't know if snap chat is built with flutter but that new page looks like a drawer. As for the sliding list item, take a look at this package: https://pub.dev/packages/flutter_slidable — Eric Su, May 31 '22 at 09:21
Snapchat uses bottomNavigation view. In flutter, if you implement bottom navigation view with page views in it, you can too swipe right n left too out of the box — Md. Kamrul Amin, May 31 '22 at 11:05
@Md.KamrulAmin Inside GestureDetector there is onPanUpdate i can able to swipe but now new problem is when i swipe to right a little bit then it navigates to second page. — Mohammed Nabil, May 31 '22 at 11:30

Wodota ML · Answer 1 · 2022-06-11T10:36:21.230

0

You can do it by using Dismissible widget like this:

ListView.builder(itemBuilder: ((context, index) => Dismissible(
  key: UniqueKey(),
  child: ListTile(),
  direction: DismissDirection.startToEnd,
  onDismissed: (DismissDirection dismissDirection){
    Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: DetailScreen()));
  },

)
)
);

edited Jun 11 '22 at 10:36

answered May 31 '22 at 13:27

Wodota ML

76
5

1

As mentioned in youtube video, if i slide the tile then i can able to see some portion of new page. But here if i dismiss completely then only i can able to view the new page. – Mohammed Nabil May 31 '22 at 13:39
Then should you be able to slide the navigated page to get back? – Wodota ML May 31 '22 at 13:59
If no there is a cool package named PageTransition: https://pub.dev/packages/page_transition – Wodota ML May 31 '22 at 13:59
You can use it instead of material page route or you can make a manual page transition. Here are examples: https://docs.flutter.dev/cookbook/animation/page-route-animation – Wodota ML Jun 11 '22 at 10:39

Listview item swipe right open new screen in Flutter

1 Answers1