Dismissble Widget in flutter
By: Naveen Srivastava
Tags: Mobile Apps, Dart, Flutter App Development, Flutter, Flutter Widget

The 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 blog, we will explore the Dismissble Widget in a flutter. We will be using some core functions available in a flutter. We will implement a demo of the Dismissble Widget in your flutter applications. So let’s get started.

Table of Contents :

Flutter Disimissble Widget Demo Module Code Implementation Code File Conclusion

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ”.

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.

Background — At the time of dismissal in the background, you can set the background color of its item. Direction —The direction allows us to specify direction. 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 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,

),

...

)

The Dissmisble Widget results can be seen in the image.

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 helps will provide you with sufficient information in Trying up the Dismissible widget in your flutter project. In this demo explain the Dismissible widget in flutter. So please try it.

❤ ❤ Thanks for reading this article ❤❤