Search code examples
flutterlistviewswipecard

Swipe action the flutter's listview card


After spending my around 4 hours to fix the issue including asking chtgpt and no luck.

I just want to build a page that, for example student list is placed in a listview's cards. And users can swipe the cards to take an action such as delete, even a simple action.

Here is my complete code of a sample page.

import 'package:flutter/material.dart';

class page3 extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    backgroundColor: const Color.fromARGB(255, 255, 106, 0),
    toolbarHeight: 51,
    title: const Text('my title here'),
  ),

  body: Container(
    alignment: Alignment.center,
    padding: const EdgeInsets.all(1),
    child: Column(
      children: [
      
    const TextField(
      textAlign: TextAlign.center,
      style:  TextStyle(color: Color.fromARGB(255, 255, 111, 0), fontWeight: FontWeight.w600),
        decoration:  InputDecoration(
        prefixIcon: Icon(Icons.search),
      ),
    ),

Expanded(child: ListView(                        
      children: <Widget>[
                  const Padding(padding: EdgeInsets.symmetric(horizontal: 9),),

      Dismissible(
              key: UniqueKey(), 
              background: Container(
                color: Colors.red, 
                alignment: Alignment.centerRight,
                child: const Icon(Icons.delete, color: Colors.white),
              ),
            secondaryBackground: Container(
              color: Colors.green, 
              alignment: Alignment.centerLeft,
              child: const Icon(Icons.archive, color: Colors.white),
            ),
            onDismissed: (direction) {
              if (direction == DismissDirection.endToStart) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('delete action!')),
                );
              } else if (direction == DismissDirection.startToEnd) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('some action')),
                );
              }
            },
        ),

      
          Card(
            margin: const EdgeInsets.all(3),
            elevation:1,
            color: Color.fromARGB(255, 250, 195, 195),
            child:  ListTile(
              onTap: () {
                ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content:  Text('Gesture Detected!')));
              },
              title: const Text("sample title text"),
              subtitle: const Text("sample subtitle text here"),
              trailing: const Icon(Icons.arrow_forward),
              leading: const CircleAvatar(
              backgroundImage: AssetImage("images/defphoto.png"),
                      ),          
              ),
          ),
          
          //there are other cards here

        ],
       )
      )
      ]
    )
  )
);
}
}

Interestingly, when I remove the block starting with Dimissable(... everything works fine. When I add the pure block, it shows

 The named parameter 'child' is required, but there's no corresponding argument.
 Try adding the required argument

message.

When I add child or changing from the body line, it keep returning the error message.

I really wonder what I am missing here. PS:I copied similar pages (entirely copied and pasted the page) but encountered the same problem.

Thank you


Solution

  • As suggested in your log, Dismissible widget must have a child.

    Dismissible(
              key: UniqueKey(), 
              background: Container(
                color: Colors.red, 
                alignment: Alignment.centerRight,
                child: const Icon(Icons.delete, color: Colors.white),
              ),
            secondaryBackground: Container(
              color: Colors.green, 
              alignment: Alignment.centerLeft,
              child: const Icon(Icons.archive, color: Colors.white),
            ),
            onDismissed: (direction) {
              if (direction == DismissDirection.endToStart) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('delete action!')),
                );
              } else if (direction == DismissDirection.startToEnd) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('some action')),
                );
              }
            },
        child: Text('This is a dimissible widget') // add this
        ),