shimmer_loading

Description:

shimmer loading

Shimmer loading #
It is simple widget to create Skelton & shimmer loading
Screenshots #

Usage/Examples #
import 'package:flutter/material.dart';
import 'package:shimmer_loading/shimmer_loading.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
bool isLoading = true;

void toggleLoading() {
setState(() {
isLoading = !isLoading;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
isLoading
? ShimmerLoading(
child: Container(
width: 200,
height: 50,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
color: Color(0xFFEBEBF4),
),
child: const UnconstrainedBox(
child: CircularProgressIndicator.adaptive()),
),
)
: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Theme.of(context).colorScheme.surface,
),
child: const Text(
"lorum ipsum",
),
),
const SizedBox(
height: 16,
),
isLoading
? ShimmerLoading(
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
color: Color(0xFFEBEBF4),
),
child: const Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
),
),
)
: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: Theme.of(context).colorScheme.surface,
),
child: Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
style: Theme.of(context).textTheme.headlineMedium,
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: toggleLoading,
tooltip: 'Increment',
child: Icon(
isLoading ? Icons.hourglass_full : Icons.hourglass_bottom,
),
),
);
}
}

copied to clipboard