listView项目滑动右打开新屏幕

Question

如何通过在listView项目的右侧打开新屏幕，类似于snapchat app。这是我想实现的视频链接。 link

我试图使用ListView Slidable检查，但是没有选择到新屏幕上的选项。 以下是两个屏幕的示例飞镖代码。通过刷listView项目，我想打开testpage.dart屏幕。如何在颤抖中实现这一目标？

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

Answer 1

您可以通过这样使用可忽视的小部件来做到这一点：

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

)
)
);