Dismissble Widget in flutter

Flutter widget is built using a modern framework. It is like a react. In this, we start with the widget to create any application. Each component in the screen is a widget. The widget describes this. of what his outlook should be given his present configuration and condition. Widget shows were similar to its idea and current setup and state.

In this article, we will Explore Dismissble Widget In Flutter. We will also implement a demo of the Dismissble, and describes his properties. and how to use them in your flutter applications. So let’s get started.

Table Of Contents:

Disimissble Widget

Code Implementation

Code File

Conclusion

Disimissble Widget:

A widget that we can drag and dismiss in the indicative direction. So you can wrap the widget as a child of unacceptable. The separable is usually used to wrap a list item so that it can be ruled out horizontally or vertically.

The Disimissble class provides some properties which we have described below.

1. Background — At the time of dismissal in the background, you can set the background color of its item.
2. Direction —The direction allows us to specify direction.
3. onDismissed — OnDisimissed (onDismissed) is based on the important property.it is the callback function. It accepts one parameter of the design direction.

Demo Module:

In this demo module, we have a list item which contains some data. when we swipe the item. So the item gets deleted from the list.

Code Implementation:

In this screen, we have a list of items that we have done with the ItemBuilder method. And in this, we have used the Flutter Dismissible widget. It receives a method under onDismissed along with the DismissDirection.

Let us understand this with the help of a reference.

ListView.builder(
    itemCount: data.length,
    itemBuilder: (BuildContext context, int index) {
      return Dismissible(
        onDismissed: (DismissDirection direction) {
          setState(() {
            data.removeAt(index);
          });
        },
        secondaryBackground: Container(
          child: Center(
            child: Text(
              'Delete',
              style: TextStyle(color: Colors.white),
            ),
          ),
          color: Colors.red,
        ),
        background: Container(),
        child: DissmbleLayoutCard(movie: data[index]),
        key: UniqueKey(),
        direction: DismissDirection.endToStart,
      );
    },
  )

We have set the color for the background color. The Item which is red color visible in delete time.

Dismissible(
  key: ValueKey(item),
  background: Container(
    color: Colors.red,
  ),
  secondaryBackground: Container(
          child: Center(
            child: Text(
              'Delete',
              style: TextStyle(color: Colors.white),
            ),
          ),
          color: Colors.red,
        ),
  ...
)

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_dissmble_demo/data.dart';
import 'package:flutter_dissmble_demo/dissimble_layout_card.dart';
import 'package:flutter_dissmble_demo/model/shopping_item.dart';

class DissmbleDemo extends StatefulWidget {
  @override
  _DissmbleDemoState createState() => _DissmbleDemoState();
}

class _DissmbleDemoState extends State<DissmbleDemo> {
  final List<Dissimble_Item_Model> data = Data.getShoppingItem();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          'Dismissible',
          style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w500,
              letterSpacing: 0.4,
              color: Colors.black),
        ),
        centerTitle: true,
      ),
      body: Container(
        child: data.length > 0
            ? ListView.builder(
                itemCount: data.length,
                itemBuilder: (BuildContext context, int index) {
                  return Dismissible(
                    onDismissed: (DismissDirection direction) {
                      setState(() {
                        data.removeAt(index);
                      });
                    },
                    secondaryBackground: Container(
                      child: Center(
                        child: Text(
                          'Delete',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                      color: Colors.red,
                    ),
                    background: Container(),
                    child: DissmbleLayoutCard(movie: data[index]),
                    key: UniqueKey(),
                    direction: DismissDirection.endToStart,
                  );
                },
              )
            : Center(child: Text('No Items')),
      ),
    );
  }
}

Conclusion:

In this article, I have explained a Dismissible widget demo, which you can modify and experiment with according to your own, this little introduction was from the Dismissible widget from our side.

I hope this blog will provide you with sufficient information in Trying up the Dismissble widget in your flutter project. We will show you the Dismissble widget is?, and working on it in your flutter applications, So please try it.

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.

Feel free to connect with us
And read more articles from FlutterDevs.com

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.