Flutter – Empty Widget
Last Updated :
07 Nov, 2022
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: null,
packageImage: PackageImage.Image_3,
title: 'going to be title here' ,
subTitle: 'Subtitle here' ,
titleTextStyle: TextStyle(
fontSize: 22,
color: Color(0xff9da9c4),
fontWeight: FontWeight.bold,
),
subtitleTextStyle: TextStyle(
fontSize: 14,
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.
Share your thoughts in the comments
Please Login to comment...