Dismissible Widget - Flutter

Items that can be swiped off the screen can be created with Flutter's Dismissible widget. It's frequently used in grids or lists if you want to provide users the ability to swipe away things. We will implement the Dismissible widget and examine some of its properties in this tutorial. To provide you an idea of what we will be doing in this article, a sample video is provided below.

In this article, you will learn how to create your Dismissible widget in Flutter. So let’s take Dismissible widget​ example of the Dismissible widget  in Flutter of Mobile application.

Video example of Dismissible widget mentioned below


Syntax
  Dismissible(
   key: UniqueKey(), 
   child: YourContentWidget(),
   background: YourBackgroundWidget(),
   secondaryBackground: YourSecondaryBackgroundWidget(),
   confirmDismiss: (DismissDirection direction) async {
    return true;
   },
   onDismissed: (DismissDirection direction) {
   },
   onResize: () {
  },
  direction: DismissDirection.endToStart, 
  dragStartBehavior: DragStartBehavior.start, 
 )

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project). 


Step 2: Adding material package 

Import method the runApp method in the main function call first while run the application.

 import 'package:flutter/material.dart';

 void main() {

     runApp(RunMyApp());

 }

Step 3: Creating a stateless widget 

 We can create a stateless widget that contains MaterialApp widget,AppBar,etc.

 class RunMyApp extends StatelessWidget {

     const RunMyApp({super.key});  

    @override

    Widget build(BuildContext context) {

    return MaterialApp(home);

     }

 }

Step 4: Final code of Dismissble widget .
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';

 void main() {
   runApp(MyApp());
 }

 class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       debugShowCheckedModeBanner: false,
       theme: ThemeData(
         primarySwatch: Colors.green, // Set the app's primary theme color
       ),
       title: 'Dismissible Example',
       home: DismissibleExample(),
     );
   }
 }

 class DismissibleExample extends StatefulWidget {
   @override
   _DismissibleExampleState createState() => _DismissibleExampleState();
 }

 class _DismissibleExampleState extends State<DismissibleExample> {
   // Sample list of items
   List<String> items = List.generate(5, (index) => 'Item ${index + 1}');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dismissible Example'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];
          return Dismissible(
            key: Key(item), // Unique key for each item
            onDismissed: (direction) {
            
               setState(() {
                 items.removeAt(index);
               });

            
               ScaffoldMessenger.of(context).showSnackBar(
                 SnackBar(
                   content: Text('$item dismissed'),
                 ),
               );
             },
             background: Container(
               color: Colors.red, // Background color when swiping
                child: Icon(
                 Icons.delete,
                 color: Colors.white,
                 size: 36,
               ),
               alignment: Alignment.centerRight,
               padding: EdgeInsets.only(right: 20),
             ),
             child: ListTile(
               title: Text(item),
            ),
           );
         },
       ),
     );
   }
 }
Output of above example

                                                     

Happy coding!

365Bloggy July 3, 2024
Share this post
Tags
SUBSCRIBE THIS FORM

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 1758
Zoom In and Out to TextView in Android
0 543
How to underline text in textview
0 440
Shine Effect in Android
0 411
How to Create Marquee Text in Android?
0 359
Our blogs
Archive