Created
October 28, 2021 07:02
-
-
Save dened/11037c298ff9505bfb23de53a94162d9 to your computer and use it in GitHub Desktop.
Skelenot
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
... | |
import 'package:flutter/material.dart'; | |
import 'package:flutter/rendering.dart'; | |
class StampWidget extends StatelessWidget { | |
const StampWidget._({ | |
Key? key, | |
this.number, | |
this.title, | |
this.transactions, | |
}) : super(key: key); | |
factory StampWidget.skeleton() => const StampWidget._( | |
number: SkeletonStub(), | |
title: SkeletonStub(), | |
transactions: SkeletonStub(), | |
); | |
//... | |
final Widget? number; | |
final Widget? title; | |
final Widget? transactions; | |
@override | |
Widget build(BuildContext context) => StampLayout( | |
number: number, | |
title: title, | |
transactions: transactions, | |
); | |
} | |
class StampLayout extends StatelessWidget { | |
const StampLayout({ | |
Key? key, | |
this.number, | |
this.title, | |
this.transactions, | |
}) : super(key: key); | |
final Widget? number; | |
final Widget? title; | |
final Widget? transactions; | |
@override | |
Widget build(BuildContext context) => Container( | |
padding: const EdgeInsets.all(16), | |
decoration: BoxDecoration( | |
border: Border.all( | |
color: AppTheme.of(context).stampColors.border, | |
width: 3, | |
), | |
borderRadius: AppTheme.of(context).borderRadius.borderRadius, | |
), | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: [ | |
if (number != null) | |
DefaultTextStyle( | |
style: AppTheme.of(context).textTheme.caption?.copyWith( | |
color: AppTheme.of(context).stampColors.text, | |
) ?? | |
const TextStyle(), | |
child: MinimalBox( | |
height: 16, | |
width: 124, | |
child: number, | |
), | |
), | |
if (title != null) | |
DefaultTextStyle( | |
style: AppTheme.of(context).textTheme.headline1?.copyWith( | |
color: AppTheme.of(context).stampColors.text, | |
) ?? | |
const TextStyle(), | |
child: MinimalBox( | |
height: 32, | |
width: 218, | |
child: title, | |
), | |
), | |
if (transactions != null) | |
DefaultTextStyle( | |
style: AppTheme.of(context).textTheme.subtitle1?.copyWith( | |
color: AppTheme.of(context).stampColors.text, | |
) ?? | |
const TextStyle(), | |
child: MinimalBox( | |
height: 24, | |
width: double.infinity, | |
child: transactions, | |
), | |
), | |
] | |
.addDivider( | |
const SizedBox( | |
height: 4, | |
width: double.infinity, | |
), | |
) | |
.toList(), | |
), | |
); | |
} | |
class MinimalBox extends StatelessWidget { | |
const MinimalBox({ | |
Key? key, | |
this.width, | |
this.height, | |
this.child, | |
}) : super(key: key); | |
final Widget? child; | |
final double? height; | |
final double? width; | |
@override | |
Widget build(BuildContext context) => ConstrainedBox( | |
constraints: BoxConstraints( | |
minHeight: height ?? 0, | |
minWidth: width ?? 0, | |
), | |
child: child, | |
); | |
} | |
class SkeletonStub extends StatelessWidget { | |
const SkeletonStub({Key? key}) : super(key: key); | |
@override | |
Widget build(BuildContext context) => SizedBox.shrink( | |
child: DecoratedBox( | |
decoration: BoxDecoration( | |
color: AppTheme.of(context).skeletonColors.background, | |
borderRadius: AppTheme.of(context).borderRadius.borderRadius, | |
), | |
), | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment