adaptive_shimmer 0.0.1
adaptive_shimmer: ^0.0.1 copied to clipboard
A package to give adaptive shimmer effect to your widgets
Adaptive Shimmer provides easy shimmer effect to any child widget with the facility to turn and off shimmer anytime to save lot of code duplication and extra codes
Features #
Adaptive shimmer is able to mock the shape of its child widget, shimmer colors, loop, animation duration, direction of shimmer etc are customisable
Getting started #
VERSION 1.0.0
Usage #
AdaptiveShimmer( //pass any widget you want to shimmer, here using a empty container //other properties like colors,loop,duration etc are customisable child: Container( color: Colors.amber, height: 100,width: 100, ), //set loading to true to turn on shimmer & false to turn off shimmer (typically to represent when data is loading or not) loading: true, baseColor: Colors.grey[300]!, highlightColor: Colors.white, enabled: true, period: const Duration(milliseconds: 1500), direction:ShimmerDirection.ltr, loop: 0, ) ),
import 'package:adaptive_shimmer/adaptive_shimmer.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Adaptive Shimmer Example',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Adaptive Shimmer Example'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: AdaptiveShimmer(
//pass any widget you want to shimmer, here using a empty container
//other properties like colors,loop,duration etc are customisable
child: Container(
color: Colors.amber,
height: 100,width: 100,
),
//set loading to true to turn on shimmer & false to turn off shimmer (typically to represent when data is loading or not)
loading: true,)
),
);
}
}
Additional information #
Based on package shimmer: