Reading time: 2 minutes
I’m going to show you an example of how to customize a loader to appear when we need to load data in our application.
The loader element is as follows:
class Loader extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 10.0,
offset: Offset(0, 5),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.purple),
backgroundColor: Colors.teal,
strokeWidth: 4,
),
SizedBox(height: 16.0),
Text(
'Loading...',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
);
}
}
To customize the colors and width of the loader element, we need to focus on the following part of the code:
CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.purple),
backgroundColor: Colors.teal,
strokeWidth: 4,
),
Here is the complete code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Demo for DevCodeLight',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
void fetchData() async {
await Future.delayed(Duration(seconds: 2));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Demo for DevCodeLight'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return Dialog(
backgroundColor: Colors.transparent,
elevation: 0,
child: Loader(),
);
},
);
Future.delayed(Duration(seconds: 2), () {
Navigator.pop(
context); // Close the loader dialog after 2 seconds (simulation)
});
},
child: Text('Load Data'),
),
),
);
}
}
class Loader extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 10.0,
offset: Offset(0, 5),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [ CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.purple),
backgroundColor: Colors.teal,
strokeWidth: 4,
),
SizedBox(height: 16.0),
Text(
'Loading...',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
],
),
),
);
}
}
I hope this helps, have a great day!
