DEV Community: Hemunt Sharma

Flutter Toast vs Snackbar

Hemunt Sharma — Thu, 01 Dec 2022 06:28:36 +0000

What is a toast message in an android application? It is just a message that is displayed on the top of the screen for a short time. This is the simplest meaning of the toast message and in a flutter, the toast message has the no different meaning it is the same as I described above.

And what is a Snackbar in flutter? It is also a way to communicate with the user or display a message to the user but with the snackbar your user can interact with the app by doing certain things. Snackbar can be used in areas where simple external information is required with options to use. For example: In the GMail application, when you delete a message, a quick snackbar with the option message ‘Deleted’ and ‘Restore’ displays on the top of the mobile screen. After clicking the ‘Restore’ button, the deleted information will be restored.

You can compare Toast vs Snackbar in android development with using java but in flutter showing a snackbar and showing a toast message are the same thing although there is a package in flutter especially for displaying the toast message on the screen just like the toast message from java. And you can use this package to display a toast message.

Use this plugin

Fluttertoast.showToast(

msg: “This is a Toast message”, // message

toastLength: Toast.LENGTH_SHORT, // length

gravity: ToastGravity.CENTER, // location

timeInSecForIos: 1 // duration

);

For displaying a snackbar in flutter you don’t need any extra package. Flutter comes with a pre-define snackbar property in scaffold widget of the app.

ScaffoldMessenger.of(context).showSnackBar(
 SnackBar(

  content: Text(“Sending Message”),

 )
);

if you use the flutter toast package then here is a little comparison between toast and snackbar. In my opinion, if your goal is to show warnings or information that requires user interaction/confirmation, then you should use a snackbar. If it’s just information that doesn’t require user authentication, you can use a toast message.

#TOAST

You can not dismiss by swiping
Widget not required (Can show in the android home or above other apps)
It can not handle user input
Best to show info messages to the user

#Snackbar

It can be dismissed by swiping
It can only be displayed inside the app widget or activity
It can easily handle user input
Good for showing warning/info type messages to the user that needs attention

You can use whatever you want to show the message but in my opinion, I would rather use snackbar for displaying the message because it gives the ability to interact with the user, and by using snackbar we can do lots of stuff that can not be done using flutter toast.

How to add a static widget at the end of ListView In Flutter

Hemunt Sharma — Thu, 01 Dec 2022 06:22:45 +0000

Here are some steps

First Add LsitView to your code, Make its children
Create one Nested Listview Builder For the rest of the Listview elements.
Make sure to add Property — (Physics: ScrollPhysics(), shrinkWrap: true) To ListView builder
Below that listView builder Create the Footer widget(Container).
Wrap the ListView Builder and Footer widget in the children of the First created ListView
Below is the Example Code for this

Now I Crested the List of the Rest of the Widgets And the footer Widget was Created Separately

  List listTiles = ["A", "B", "C", "C"];

 ListView(
          children: <Widget>[

            //Rest of the elements
            ListView.builder(
              physics: ScrollPhysics(),
              shrinkWrap: true,
              itemCount: listTiles.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  color: Colors.green,
                  height: 60,
                  child: Center(
                    child: Text(
                      '${listTiles[index]}',
                      style: const TextStyle(color: Colors.black, fontSize: 16),
                    ),
                  ),
                );
              },
            ),

            //Footer widget or other Static Widget after list view
            Container(
              height: 40,
              color: Colors.redAccent,
              child:  const Center(
                child: Text(
                  'Footer',
                  style: TextStyle(color: Colors.white, fontSize: 16),
                ),
              ),
            ),
          ],
        ),

This is Just one way To do it But here is How to add a static widget at end of ListView builder flutter

How to Create table In SQLite Database in a flutter

Hemunt Sharma — Thu, 01 Dec 2022 06:19:36 +0000

SQLite is the Plugin that stores the data in the device in the form of Tables.

It helps to maintain the data in rows and columns in the Mobile local directory. we can run SQL queries to perform CRUD operations (Create, Read, Update, delete)

So to start Using the Sqlite in flutter add the plugin in the dependencies:

dependencies:
  flutter:
    sdk: flutter

#dependencie of SQLITE
  sqflite: ^2.2.0+3
  path_provider: ^2.0.11

Then make a separate file for using all the database queries and creating a database.

Import the statements and create the database helper class:

import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';


class DatabaseHelper{

}

In this class create the future method for creating a database and which will return the database when needed.

There is an openDatabase() function that comes in the SQLite package, which takes three parameters. first takes the path of the database where the database file will be stored and the second one takes the onCreate call back function which calls when the database is not there in the provided path and needs to be created. third is the version that takes the integer value.

Here is the function for that:

  final String _tableName = "users";

  Future<Database> getDataBase() async {
    return openDatabase(
      join(await getDatabasesPath(), "usersDatabase.db"),
      onCreate: (db, version) async {
        await db.execute(
          "CREATE TABLE $_tableName (id TEXT PRIMARY KEY, name TEXT, imageUrl TEXT)",
        );
      },
      version: 1,
    );
  }

Also created one variable that stores the table name.

So here is how to create the Database function which creates the local database table.

See how to flutter SQLite CRUD operations are performed with Example Code.

Thank you for reading

Happy Fluttering