Shimmer animation creates a visual effect resembling shimmering or sparkling light on a surface. It's commonly employed to signify loading or highlight specific elements on a screen. This animation entails a smooth transition in the brightness or opacity of a UI component.
This article demonstrates how to implement a shimmer animation in Flutter.
To begin, let's create a new Flutter project and set up a new channel. Follow these steps:
1. Navigate to "File" -> "New" -> "New Flutter Project".
After creating the project, proceed to create the device by selecting "Create Device" in the left window. Then, start by defining a variable symbol and importing the necessary items as demonstrated below:
import 'package:flutter/material.dart';
import 'package:shimmer_animation/shimmer_animation.dart';
Create a new class that extends StatelessWidget
class FullPageShimmer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ShimmerPage(),
);
}
}Inside the StatelessWidget, the MaterialApp widget is returned. This widget serves as the root of the Flutter widget tree and is commonly used to define the basic structure of a Material Design app. The home property of MaterialApp is set to an instance of the ShimmerPage widget. Therefore, the ShimmerPage widget becomes the main content of the app.
class ShimmerPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Shimmer(
),
);
}
}This snippet defines a class named ShimmerPage, which extends StatelessWidget. StatelessWidget is employed when the user interface remains static and does not rely on state changes.
Designing is an essential step for every widget, where a widget tree is returned to represent the user interface of the widget.
Scaffolding serves as the backbone of application development, offering a foundational structure for crafting sophisticated creations using basic tools.
Scaffolding is fundamental to application development, providing a foundational structure for creating intricate designs with simple tools.
Below is the code to add a button in the body of a Flutter application:
class ShimmerPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Shimmer(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {
},
child: Text('Button 1'),
),
ElevatedButton(
onPressed: () {
},
child: Text('Button 2'),
),
],
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {
},
child: Text('Button 3'),
),
ElevatedButton(
onPressed: () {
},
child: Text('Button 4'),
),
],
),
],
),
),
),
);
}
}The output generated by the code is displayed below:
To incorporate a button in Flutter, simply insert the following code snippet within the children widget:
ElevatedButton(
onPressed: () {
},
child: Text('Button 3'),
),
You can also define the action to be taken when the button is pressed inside the onPressed parameter.
Now, to incorporate a Shimmer animation into the body, follow the provided code snippet:
class ShimmerPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Shimmer(
child: Container(
color: Colors.white,
),
duration: Duration(seconds: 3),
interval: Duration(seconds: 0),
color: Colors.black,
colorOpacity: 0.7,
),
);
}
}Here, you have the flexibility to adjust custom parameters such as duration, interval, color, and color opacity. Below is the output of the code:
Below is the combined code snippet incorporating all the elements discussed above:
import 'package:flutter/material.dart';
import 'package:shimmer_animation/shimmer_animation.dart';
void main() {
runApp(FullPageShimmer());
}
class FullPageShimmer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ShimmerPage(),
);
}
}
class ShimmerPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Shimmer(
child: Container(
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {
},
child: Text('Button 1'),
),
ElevatedButton(
onPressed: () {
},
child: Text('Button 2'),
),
],
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {
},
child: Text('Button 3'),
),
ElevatedButton(
onPressed: () {
},
child: Text('Button 4'),
),
],
),
],
),
),
duration: Duration(seconds: 3),
interval: Duration(seconds: 0),
color: Colors.black,
colorOpacity: 0.7,
),
);
}
}
Below is the output of the combined code:
This article covered the process of developing a Flutter application featuring shimmer animations and buttons. Shimmer effects serve to indicate loading processes or highlight specific UI components.
This blog provides a foundation, and you have the flexibility to extend and tailor the UI according to the specific needs of your application.