|
Flutter applications involve incorporating loading indicators to provide users with feedback during background operations. Flutter has a package for simplifying the process named flutter_easyloading package. This package easiest way to integrate loading indicators with various styles. In this article, we will implement different types of loading indicators provided by the flutter_easyloading package. From default loading screens to progress indicators and custom widgets, flutter_easyloading provides the easiest way to implement all types of loading indicators. A sample video is given below to get an idea about what we are going to do in this article.
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: Adding the Dependencies
Here we have to add the the following dependencies to our pubspec.yaml file.
dependencies:
flutter_easyloading: ^3.0.5
Or, Simply you can run the below command in your VS code Terminal.
flutter pub add flutter_easyloading
Step 3: Import the Package
First of all import material.dart package and the flutter_easyloading package.
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
Step 4: Execute the main Method
Here the execution of our app starts.
Dart
void main() {
runApp(MyApp());
}
|
Step 5: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false,
title: 'Loading Examples',
home: MyHomePage(),
builder: EasyLoading.init(),
);
}
}
|
Step 6: Create MuHomePage Class
The MyHomePage class in this Flutter application defines the main screen of the app, using the flutter_easyloading package.It contains a several buttons, Each button triggers a different type of loading indicator when pressed: the “Default Loading” button displays a simple loading message, the “Loading with Progress” button demonstrates a loading progress indicator, the “Loading with Success Message” button exhibits a success message with a checkmark, the “Loading with Error Message” button simulates an error message with a warning icon, and finally, the “Loading with Information Message” button showcases an information message with an info icon. Comments are added for better understandings.
// Show default loading with a status message
void _showDefaultLoading() {
EasyLoading.show(status: 'Loading...');
// Simulate a background task
Future.delayed(Duration(seconds: 2), () {
EasyLoading.dismiss();
});
}
// Show loading with progress and a status message
void _showProgressLoading() {
EasyLoading.showProgress(0.5, status: 'Loading...');
// Simulate a background task
Future.delayed(Duration(seconds: 2), () {
EasyLoading.dismiss();
});
}
// Show success message with a checkmark
void _showSuccessMessage() {
EasyLoading.showSuccess('Loaded successfully!');
}
// Show error message with a warning icon
void _showErrorMessage() {
EasyLoading.showError('Failed to load!');
}
// Show information message with an info icon
void _showInfoMessage() {
EasyLoading.showInfo('Information message');
}
Dart
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Loading Examples'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
_showDefaultLoading();
},
child: Text('Default Loading'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showProgressLoading();
},
child: Text('Loading with Progress'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showSuccessMessage();
},
child: Text('Loading with Success Message'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showErrorMessage();
},
child: Text('Loading with Error Message'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showInfoMessage();
},
child: Text('Loading with Information Message'),
),
],
),
),
);
}
void _showDefaultLoading() {
EasyLoading.show(status: 'Loading...');
Future.delayed(Duration(seconds: 2), () {
EasyLoading.dismiss();
});
}
void _showProgressLoading() {
EasyLoading.showProgress(0.5, status: 'Loading...');
Future.delayed(Duration(seconds: 2), () {
EasyLoading.dismiss();
});
}
void _showSuccessMessage() {
EasyLoading.showSuccess('Loaded successfully!');
}
void _showErrorMessage() {
EasyLoading.showError('Failed to load!');
}
void _showInfoMessage() {
EasyLoading.showInfo('Information message');
}
}
|
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false,
title: 'Loading Examples',
home: MyHomePage(),
builder: EasyLoading.init(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Loading Examples'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
_showDefaultLoading();
},
child: Text('Default Loading'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showProgressLoading();
},
child: Text('Loading with Progress'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showSuccessMessage();
},
child: Text('Loading with Success Message'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showErrorMessage();
},
child: Text('Loading with Error Message'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
_showInfoMessage();
},
child: Text('Loading with Information Message'),
),
],
),
),
);
}
void _showDefaultLoading() {
EasyLoading.show(status: 'Loading...');
Future.delayed(Duration(seconds: 2), () {
EasyLoading.dismiss();
});
}
void _showProgressLoading() {
EasyLoading.showProgress(0.5, status: 'Loading...');
Future.delayed(Duration(seconds: 2), () {
EasyLoading.dismiss();
});
}
void _showSuccessMessage() {
EasyLoading.showSuccess('Loaded successfully!');
}
void _showErrorMessage() {
EasyLoading.showError('Failed to load!');
}
void _showInfoMessage() {
EasyLoading.showInfo('Information message');
}
}
|
Output:
|
