Skip to content

Instantly share code, notes, and snippets.

@dirisujesse

dirisujesse/shimmer_poc.dart

Created March 10, 2021 19:37
Show Gist options
  • Save dirisujesse/da84ac114659651ac620cc712e379bfd to your computer and use it in GitHub Desktop.
Save dirisujesse/da84ac114659651ac620cc712e379bfd to your computer and use it in GitHub Desktop.
Download ZIP
Just a crude spaghetti code of shimmer animation
Raw
shimmer_poc.dart
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:lighthouse/components/fragments/spacers/lighthouse_sized_box.dart';
import 'package:lighthouse/components/layout/grids/app_grid.dart';
import 'package:lighthouse/components/typography/lighthouse_text.dart';
import 'package:lighthouse/styles/colors.dart';
import 'package:lighthouse/utils/dimensions.dart';
enum ChildType { Default, PlayList, ListTile, Grid }
class AppLoader extends StatefulWidget {
final double horizontalPadding;
final int length;
final bool isList;
final Axis direction;
final double crossAxisFraction;
final ChildType childType;
const AppLoader({
this.length = 10,
this.isList = false,
this.crossAxisFraction = .6,
this.direction = Axis.vertical,
this.childType = ChildType.Default,
this.horizontalPadding = 0,
});
@override
State<StatefulWidget> createState() {
return _AppLoaderState();
}
}
class _AppLoaderState extends State<AppLoader>
with SingleTickerProviderStateMixin {
AnimationController _ctrl;
@override
void initState() {
super.initState();
_ctrl = AnimationController(
duration: Duration(seconds: 2),
vsync: this,
)..repeat();
}
@override
void dispose() {
_ctrl.dispose();
super.dispose();
}
bool get isHorizontal {
return widget.direction == Axis.horizontal;
}
Widget _child(LighthouseScaleUtil scaler, BoxConstraints constraints) {
if (widget.childType == ChildType.PlayList) {
return Container(
margin: scaler.insets.only(
bottom: 4,
),
child: AnimatedBuilder(
animation: _ctrl,
builder: (_, __) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Container(
height: scaler.fontSizer.sp(25),
decoration: BoxDecoration(
color: lighthouseLightBlack,
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(10),
),
),
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(10),
),
gradient: LinearGradient(
begin: Alignment.bottomLeft,
colors: [
lighthouseGrey.withOpacity(.5),
Colors.transparent,
],
stops: [
0,
_ctrl.value,
],
end: Alignment.topRight,
),
),
),
),
LighthouseSizedBox(width: 20),
Container(
width: scaler.sizer.setWidth(10),
height: scaler.fontSizer.sp(15),
decoration: BoxDecoration(
color: lighthouseLightBlack,
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(30),
),
),
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(30),
),
gradient: LinearGradient(
begin: Alignment.bottomLeft,
colors: [
lighthouseGrey.withOpacity(.5),
Colors.transparent,
],
stops: [
0,
_ctrl.value,
],
end: Alignment.topRight,
),
),
),
],
),
LighthouseSizedBox(
height: 1,
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: lighthouseLightBlack,
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(5),
),
),
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(5),
),
gradient: LinearGradient(
begin: Alignment.bottomLeft,
colors: [
lighthouseGrey.withOpacity(.5),
Colors.transparent,
],
stops: [
0,
_ctrl.value,
],
end: Alignment.topRight,
),
),
),
),
],
);
},
),
constraints: BoxConstraints.tightFor(
height: scaler.fontSizer.sp(200),
width: scaler.sizer.width,
),
);
} else if (widget.childType == ChildType.ListTile) {
return Container(
margin: scaler.insets.only(bottom: 2),
child: AnimatedBuilder(
animation: _ctrl,
builder: (_, __) {
return Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: scaler.fontSizer.sp(200),
height: scaler.fontSizer.sp(200),
margin: scaler.insets.only(
right: 2,
),
decoration: BoxDecoration(
color: lighthouseLightBlack,
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(20),
),
),
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(20),
),
gradient: LinearGradient(
begin: Alignment.bottomLeft,
colors: [
lighthouseGrey.withOpacity(.5),
Colors.transparent,
],
stops: [
0,
_ctrl.value,
],
end: Alignment.topRight,
),
),
),
Expanded(
child: Column(
children: <Widget>[
LighthouseSizedBox(height: 1),
Container(
height: scaler.fontSizer.sp(30),
decoration: BoxDecoration(
color: lighthouseLightBlack,
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(20),
),
),
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(20),
),
gradient: LinearGradient(
begin: Alignment.bottomLeft,
colors: [
lighthouseGrey.withOpacity(.5),
Colors.transparent,
],
stops: [
0,
_ctrl.value,
],
end: Alignment.topRight,
),
),
),
LighthouseSizedBox(height: 2),
Container(
height: scaler.fontSizer.sp(15),
decoration: BoxDecoration(
color: lighthouseLightBlack,
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(20),
),
),
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(20),
),
gradient: LinearGradient(
begin: Alignment.bottomLeft,
colors: [
lighthouseGrey.withOpacity(.5),
Colors.transparent,
],
stops: [
0,
_ctrl.value,
],
end: Alignment.topRight,
),
),
),
],
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
),
),
LighthouseSizedBox(width: 10),
Align(
alignment: Alignment.topRight,
child: Container(
margin: scaler.insets.only(top: 2),
width: scaler.fontSizer.sp(10),
height: scaler.fontSizer.sp(70),
decoration: BoxDecoration(
color: lighthouseLightBlack,
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(20),
),
),
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(20),
),
gradient: LinearGradient(
begin: Alignment.bottomLeft,
colors: [
lighthouseGrey.withOpacity(.5),
Colors.transparent,
],
stops: [
0,
_ctrl.value,
],
end: Alignment.topRight,
),
),
),
)
],
);
},
),
constraints: BoxConstraints.tightFor(
height: scaler.fontSizer.sp(200),
width: scaler.sizer.width,
),
);
} else if (widget.childType == ChildType.Grid) {
return AnimatedBuilder(
animation: _ctrl,
builder: (_, __) {
return AppGrid(
topPadding: widget.direction == Axis.horizontal ? 0 : 2,
itemLength: 30,
height: 100,
aspectRatio: 5 / 5.02,
itemBuilder: (_, __) {
return Container(
margin: scaler.insets.only(
right: isHorizontal ? 4 : 0,
bottom: isHorizontal ? 0 : 2,
),
decoration: BoxDecoration(
color: lighthouseLightBlack,
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(20),
),
),
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(20),
),
gradient: LinearGradient(
begin: Alignment.bottomLeft,
colors: [
lighthouseGrey.withOpacity(.5),
Colors.transparent,
],
stops: [
0,
_ctrl.value,
],
end: Alignment.topRight,
),
),
);
},
scrollDirection: widget.direction,
crossAxisCount: widget.direction == Axis.vertical ? 2 : 1,
physics: NeverScrollableScrollPhysics(),
);
},
);
} else {
return ConstrainedBox(
child: AnimatedBuilder(
animation: _ctrl,
builder: (_, __) {
return Container(
margin: scaler.insets.only(
right: isHorizontal ? 4 : 0,
bottom: isHorizontal ? 0 : 2,
),
decoration: BoxDecoration(
color: lighthouseLightBlack,
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(20),
),
),
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(
scaler.fontSizer.sp(20),
),
gradient: LinearGradient(
begin: Alignment.bottomLeft,
colors: [
lighthouseGrey.withOpacity(.5),
Colors.transparent,
],
stops: [
0,
_ctrl.value,
],
end: Alignment.topRight,
),
),
);
},
),
constraints: BoxConstraints(
maxHeight: isHorizontal || widget.childType != ChildType.Default
? constraints.maxHeight
: scaler.fontSizer.sp(250),
minHeight: isHorizontal || widget.childType != ChildType.Default
? constraints.maxHeight
: scaler.fontSizer.sp(200),
maxWidth: isHorizontal
? constraints.maxWidth * widget.crossAxisFraction
: constraints.maxWidth,
minWidth: isHorizontal
? constraints.minWidth * widget.crossAxisFraction
: constraints.minWidth,
),
);
}
}
@override
Widget build(BuildContext context) {
final scaler = LighthouseScaleUtil(context);
return LayoutBuilder(
builder: (context, constraints) {
if (widget.childType == ChildType.Grid) {
return _child(scaler, constraints);
}
return ListView.builder(
padding: scaler.insets.symmetric(
vertical: 2,
horizontal: widget.horizontalPadding,
),
itemCount: widget.length,
physics: NeverScrollableScrollPhysics(),
scrollDirection: widget.direction,
itemBuilder: (context, idx) {
return _child(scaler, constraints);
},
);
},
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment