Flutter – Empty Widget

Empty widget is the flutter widget that is mainly used to notify the user about some event, Like if we are fetching the data from the API or From the database, There may be a case when API returns the null at that moment we can show the empty widget. Also If there is no user internet connection we can notify the user by this widget.

How to Use

Use the Empty widget in the body of the scaffold or child of the container, Give parameters title, subtitle, image, etc.

Dart

EmptyWidget(
   // image from the project
   image: null,
   // image from the package assets
   packageImage: PackageImage.Image_3,
   title: 'going to be title here',
   subTitle: 'Subtitle here',
   // styling the text
   titleTextStyle: TextStyle(
      fontSize: 22,
     color: Color(0xff9da9c4),
     fontWeight: FontWeight.bold,
   ),
   // styling the sub title
   subtitleTextStyle: TextStyle(
     fontSize: 14,
     // color of text
     color: Color(0xffabb8e5),
   ),
 );

• image –  Specify the image to be displayed on the screen. this image will be loaded from assets.
• packageImage – You can specify pre-defined images if you don’t want to use images from assets.
• title – Text to display below the image.
• subtitle – Text to display below the title.
• Animation – You can enable or disable animation using the hideBackgroundAnimation property of the empty widget. This property accepts the true or false value. The default value is false.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package in the pubspec.yaml File

Now we need to import the package into the pubspec.yaml file, which you find at the last of the root folder. From the command line:

Dart

flutter pub add  empty_widget

This will add the following code in the pubspec.yaml file-

Step 3: Import the package into the main file

Dart

import 'package:empty_widget/empty_widget.dart';

Properties:

Parameter	Type	Description
title	string	Set text for title
subTitle	string	Set text for subtitle
image	string	Display images from project assets
packageImage PackageImage		Display images from package assets
titleTextStyle	TextStyle	Set text style for title
subtitleTextStyle	TextStyle	Set text style for subtitle
hideBackgroundAnimation	bool	Hides the background circular ball animation

Code Example

Dart

import 'package:empty_widget/empty_widget.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Empty Widget',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Empty widget Flutter'),
        ),
        body: Container(
          alignment: Alignment.center,
          child: EmptyWidget(
            image: null,
            packageImage: PackageImage.Image_2 ,
            title: 'No Data',
            subTitle: 'No  Data available yet',
            titleTextStyle: TextStyle(
              fontSize: 22,
              color: Color.fromARGB(255, 31, 150, 47),
              fontWeight: FontWeight.w500,
            ),
            subtitleTextStyle: TextStyle(
              fontSize: 14,
              color: Color.fromARGB(255, 21, 226, 199),
            ),
          ),
        ),
      ),
    );
  }
}

Code Explanation

• main is a principal method called once the program is loaded.
• Once the Program Is Loaded runApp Will Run And Call The  Class That We Created (MyApp).
• This  Class Is  StatelessWidget Because No Change to Do.
• This Class Is Taking MaterialApp Only.
• Flutter is Based On Widgets So A  Widget must be Built.
• Creating  MaterialApp (Placed One Time In The Whole Project) That Define Application Settings (debugShowCheckedModeBanner , title … ).
• Home Is Taking widget Scaffold.
• Returning Scaffold That Allows Us To Set Body and AppBar Of The Page.
• AppBar Is Taking AppBar That Is Taking Only Text as a Title.
• As We Need to center the widget We Put a container with an alignment center.
• Now We Need To Create an Empty Widget.
• Empty widget allows us to set the title, sub-title, and image.
• We also styles the text using the titleStyleText and subTitleStyleText.

Output

Using Assets Image

For using assets image, you have to add the asset to your project, See this article on how to add asset images in Flutter. Now in the empty widget in the property image give the path of the image.

Hide the Animation

You can enable or disable animation using hideBackgroundAnimation property of the empty widget. This property accepts the true or false value. The default value is false.