feat(app-selector): improve skeleton UI (#939)

This commit is contained in:
Aabed Khan 2023-06-15 15:42:39 +05:45 committed by GitHub
parent b161608d02
commit ec77987fcd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,4 +1,5 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
import 'package:skeletons/skeletons.dart'; import 'package:skeletons/skeletons.dart';
class AppSkeletonLoader extends StatelessWidget { class AppSkeletonLoader extends StatelessWidget {
@ -7,20 +8,19 @@ class AppSkeletonLoader extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width; final screenWidth = MediaQuery.of(context).size.width;
return Skeleton( return ListView.builder(
isLoading: true,
skeleton: ListView.builder(
shrinkWrap: true, shrinkWrap: true,
itemCount: 7, itemCount: 7,
padding: EdgeInsets.zero,
itemBuilder: (context, index) => Padding( itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8.0), padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12.0),
child: SkeletonItem( child: CustomCard(
child: Row( child: Row(
children: <Widget>[ children: [
SkeletonAvatar( SkeletonAvatar(
style: SkeletonAvatarStyle( style: SkeletonAvatarStyle(
width: screenWidth * 0.15, width: screenWidth * 0.10,
height: screenWidth * 0.15, height: screenWidth * 0.10,
borderRadius: const BorderRadius.all(Radius.circular(12)), borderRadius: const BorderRadius.all(Radius.circular(12)),
), ),
), ),
@ -28,25 +28,35 @@ class AppSkeletonLoader extends StatelessWidget {
Column( Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
Container( SizedBox(
color: Colors.white,
height: 34,
width: screenWidth * 0.4, width: screenWidth * 0.4,
child: SkeletonParagraph( child: SkeletonLine(
style: const SkeletonParagraphStyle( style: SkeletonLineStyle(
lines: 1, height: 20,
width: screenWidth * 0.4,
borderRadius: const BorderRadius.all(Radius.circular(10)),
), ),
), ),
), ),
const SizedBox(height: 12), const SizedBox(height: 12),
Container( SizedBox(
margin: const EdgeInsets.only(bottom: 4),
color: Colors.white,
height: 34,
width: screenWidth * 0.6, width: screenWidth * 0.6,
child: SkeletonParagraph( child: SkeletonLine(
style: const SkeletonParagraphStyle( style: SkeletonLineStyle(
lines: 1, height: 15,
width: screenWidth * 0.6,
borderRadius: const BorderRadius.all(Radius.circular(10)),
),
),
),
const SizedBox(height: 5),
SizedBox(
width: screenWidth * 0.5,
child: SkeletonLine(
style: SkeletonLineStyle(
height: 15,
width: screenWidth * 0.5,
borderRadius: const BorderRadius.all(Radius.circular(10)),
), ),
), ),
), ),
@ -56,10 +66,6 @@ class AppSkeletonLoader extends StatelessWidget {
), ),
), ),
), ),
),
child: const Center(
child: Text('Content'),
),
); );
} }
} }