How to make a two way Dismissible ListView Items in Flutter

Two way sliding facilitate to add some quick action (hidden ) action to a listview. Flutter made it possible with Dismissible widget,  a built-in Widget come with Flutter.


A dismissible widget can have two way action, up or down / left or right sliding. When the user slide it will removes from the list. This widget is ideal for a listview in action.

Although the direction property allows to set six directions

  1. up
  2. down
  3. horizontal
  4. vertical
  5. start to end
  6. end to start


Using Background you can add two icons, for second action you need to add another background as second Background. Use a row to accompany some group of widget like Icon and image/Text/Icon. Make sure the Icon/Widget align properly.

                                  color: Colors.redAccent,
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.end,
                                    children: [
                                        style: TextStyle(
                                            fontSize: 22, color: Colors.white),
                                        alignment: Alignment.centerRight,
                                        child: Icon(
                                          size: 60,


In the OnDismiss ( ) event listener you can write your quick action using beautiful dart code, which is responsible for removing the items from the list. I used HivBox instance for the list.

 onDismissed: (direction) {
                                  try {
                                    if (direction ==
                                        DismissDirection.endToStart) {
                                    } else if (direction ==
                                        DismissDirection.startToEnd) {
                                      project.projectStatus = "Finished";
                                      box.put(key, project);

                                  } on Exception catch (e) {
                                    // TODO

We are using direction property to identify the action and take necessary steps to update the list.



How to make any widget clickable in Flutter

Wanna make Container clickable ? or Icon widget, Flutter has a special widget for you, called GestureDetector.

Wrap any widget with GestureDetector and have a onTap(){ } or longPress () { } event. You can use the widget as follows

          onTap: () {
          child: Container(
            color: Colors.blueAccent,
            padding: EdgeInsets.only(top: 10),
            child: Column(
              children: []

Don’t hesitate to look at other posts like this

Make the UI interactive with InputDecoration widget in Flutter

Use InputDecoration widget has many thing to offer, from Helper text to Error catching conditional statement.

Every Flutter widget has reason to be served, InputDecoration widget allow us to dress up input form with label, helper text, Error text and many more. Here is sample TextField Decoration

TextField(          style: inStyle,
                    controller: projectDesc,
                    decoration: InputDecoration(
                      labelText: 'Description',
                      hintText: 'eg :SQL Server project',
                      helperText: 'Description',
                      errorText='I got some error for you'
                      border: OutlineInputBorder(),

The labelText placed at the top, helpertext below the TextField widget, hintText showing inside the box like placeholder in HTML/CSS, border for placing some fancy border which also showing label while in editing mode.

Treat errorText programmatically

To display some error based on validation widget should able to detect change in siblings, which means the widget should be a StatefullWidget and then use it as follows

    numberError ? 'It can't be blank' : null)

Also you need to use setState as follows in a Event of your choice

   setState(() {
                                  ? numberError = true

Saving words for another post….. lol

Create a custom RawMaterial button in Flutter

Custom buttons help us create new UI with additional feature, Flutter allows you to create awesome controls/widgets combining existing ones. Our material button have following features

  • Icon
  • Icon Color
  • Splash color
  • Back ground color
  • Shape
  • title

To make this possible we used 7 widgets , lets checkout the code

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
//This Widget written by []
class MButon extends StatelessWidget {
  MButon({@required this.onPressed,@required this.title,, this.splash, this.background_color, this.newshape, this.newicon, this.iconColor});
  final String title;
  final GestureTapCallback onPressed;
  final TextStyle style;
  final Color splash;
  final Color background_color;
  final ShapeBorder newshape;
  final IconData newicon;
  final Color iconColor;

  Widget build(BuildContext context) {
    return RawMaterialButton(
      fillColor: background_color,
      splashColor: splash,
      shape:newshape!=null ? newshape:  const StadiumBorder(),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 20),
        child: Row(mainAxisSize: MainAxisSize.min,
          children:  [
              newicon!=null ? newicon :,
              color: iconColor!=null ? iconColor: Colors.amber,
              width: 8,
              style: style,
      onPressed: onPressed,

We have used Padding to accommodate space between borders and Text, so that the Text widget look neat and nice. A SizeBox widget is placed between Icon and the Text Widgets which add blank space.

You also noticed that we have checked for nulls make sure the Shape property not null ( It will fire an error , if it leave blank), if so it used an stadium border. You can also use the other borders like

          borderRadius: BorderRadius.all(Radius.circular(10))),


Here is Quick and Simple Floating button. Include the .dart[the above code] file to lib directory and import in main.drt.

        title: 'About',
        style: TextStyle(color:,
        background_color: Colors.deepOrange,
        newshape: RoundedRectangleBorder(
           borderRadius: BorderRadius.all(Radius.circular(10))),
        onPressed: () { 

The complete code and other Widgets projects can be located @ Flutter-Widgets GitHub Repository

Flutter Widget of the day : Wrap

Welcome to another Flutter Widget of the Day post. Today we have Wrap widget. Look at the following screen shot

Flutter Row with unfitted elements

Behind the scene

 body: Center(

        child: Row(

          children: <Widget>[
           FlatButton(child: Text('Butto1'),),
           FlatButton(child: Text('Butto2'),),
           FlatButton(child: Text('Butto3'),),
           FlatButton(child: Text('Butto4'),),
           FlatButton(child: Text('Butto5'),),
           FlatButton(child: Text('Butto6'),),


As we know for arranging controls in horizontal manner we use Row widget and for vertical use Column widget.

The screen bump with a Yellow bar, which is caused by controls that is not fitted on the screen. Flutter has beautiful way of showing Errors, lol.

To solve the issue like this, Flutter has a special Widget called Wrap which wrap the contents to next line as we saw on the following screenshot

Replace Row with Wrap

and the code will be as follows

body: Center(

        child: Wrap(spacing: 3,

          children: <Widget>[
           FlatButton(child: Text('Butto1'),),
           FlatButton(child: Text('Butto2'),),
           FlatButton(child: Text('Butto3'),),
           FlatButton(child: Text('Butto4'),),
           FlatButton(child: Text('Butto5'),),
           FlatButton(child: Text('Butto6'),),


Wrap has property children as Rows has ,so we can lay the controls as in Rows. It has many other property such as spacing which is handy . And the following quick video will help you further.

Flutter Widget of the day : AboutDialog

Welcome to another Flutter Widget of the Day post. Today we have AboutDialog widget, which can be must have for every app, since every developer tech like to have some license info for the users.

How to use the AboutDialog

It is a good idea to create function to show the dialog which return a AboutDialog in a Flutter Manner as follows.

 void showAboutDialog({
    @required BuildContext context,
    String applicationName,
    String applicationVersion,
    Widget applicationIcon,
    String applicationLegalese,
    List<Widget> children,
    bool useRootNavigator = true,
    RouteSettings routeSettings,
  }) {
    assert(context != null);
    assert(useRootNavigator != null);
      context: context,
      useRootNavigator: useRootNavigator,
      builder: (BuildContext context) {
        return AboutDialog(
          applicationName: applicationName,
          applicationVersion: applicationVersion,
          applicationIcon: applicationIcon,
          applicationLegalese: applicationLegalese,
          children: children,
      routeSettings: routeSettings,

Now we are ready for calling the function inside the floating Actions button. You can now add all relevant information about your app, name, icon, version, etc as follows

 floatingActionButton: FloatingActionButton(
        child: Icon(,
        onPressed: () {
              context: context,
              applicationName: "My APP",
              applicationVersion: "Beta",
              children: [
                Text('Developer: Manoj A.P'),
                Text('can be reached @'),
                Text('Web:' + '')
              applicationIcon: Icon(;

Besides there is children : [ ] which is used to add additional information in case you need them as a list of Widgets of your choice.

You may already noticed that flutter automatically included package license info for you, it can also be done manually

Create a custom Flutter Text Widget

A Custom Widget can be composed of many widgets , in our Neat Textbox widget we used Decorated Box, BoxDecoration and Padding.

To make new widget first have to extend a class from StatelessWidget and then provide final variables , constructor and build method

The build method is the heart of any widget

Our NeattextBox accepting Text Styles ,so we have a final variable styl, it help us to use different font, color and other style properties

Padding used to adjust distance the boarder using EdgeInsets , also se the alignment of the Text. You can also utilize other BoxDecoration property as you wish

NeattexBox Widget

class NeattextBox extends StatelessWidget {
  final String title;
  final TextStyle styl;

  const NeattextBox({Key key, @required this.title, this.styl})
      : super(key: key);

  Widget build(BuildContext context) {
    return DecoratedBox(
        decoration: BoxDecoration(color: Colors.white),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            textAlign: TextAlign.left,
            style: styl,

How to use the New Box

Here is the sample code implement the widget with styl

                styl: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                    color: Colors.deepOrangeAccent),
                title: "Dead :" + dist.status.deceased.toString(),

Flutter Widget of the day : SafeArea

SafeArea is must have widget for any app developing with Flutter and Dart. So what is SafeArea for ?

As the name indicates it secure the mostly you want to cover, it helps to prevent overlapping of UI to Notification area, bottom navigation and edges of the screen. So you can keep the app away from different type of notches, curved edges , and other hardware features.

All you have to do is to wrap your widgets with SafeArea() widget as follows

        child: Scaffold(

Flutter Widget

Flutter Widgets are basic building blocks of your Flutter Apps. We usually use widgets like Text, ListView etc. There are two type of widgets,

  • Stateless Widgets
  • Statefull Widgets

The Stateless widget are useful when the part of the user interface you are describing does not depend on anything other than the configuration information in the object itself.

Stateful widgets are useful when the part of the user interface you are describing can change dynamically.

Custom Widgets

Custom widgets can be composed of existing ones, we can create widgets by extending StatelessWidget/StatefullWidget class and add properties of our own.

Please follow the tag custom-widgets for more examples