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,59 +8,64 @@ 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, shrinkWrap: true,
skeleton: ListView.builder( itemCount: 7,
shrinkWrap: true, padding: EdgeInsets.zero,
itemCount: 7, itemBuilder: (context, index) => Padding(
itemBuilder: (context, index) => Padding( padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12.0),
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8.0), child: CustomCard(
child: SkeletonItem( child: Row(
child: Row( children: [
children: <Widget>[ SkeletonAvatar(
SkeletonAvatar( style: SkeletonAvatarStyle(
style: SkeletonAvatarStyle( width: screenWidth * 0.10,
width: screenWidth * 0.15, height: screenWidth * 0.10,
height: screenWidth * 0.15, borderRadius: const BorderRadius.all(Radius.circular(12)),
borderRadius: const BorderRadius.all(Radius.circular(12)), ),
),
const SizedBox(width: 16),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
width: screenWidth * 0.4,
child: SkeletonLine(
style: SkeletonLineStyle(
height: 20,
width: screenWidth * 0.4,
borderRadius: const BorderRadius.all(Radius.circular(10)),
),
),
), ),
), const SizedBox(height: 12),
const SizedBox(width: 16), SizedBox(
Column( width: screenWidth * 0.6,
crossAxisAlignment: CrossAxisAlignment.start, child: SkeletonLine(
children: <Widget>[ style: SkeletonLineStyle(
Container( height: 15,
color: Colors.white, width: screenWidth * 0.6,
height: 34, borderRadius: const BorderRadius.all(Radius.circular(10)),
width: screenWidth * 0.4,
child: SkeletonParagraph(
style: const SkeletonParagraphStyle(
lines: 1,
),
), ),
), ),
const SizedBox(height: 12), ),
Container( const SizedBox(height: 5),
margin: const EdgeInsets.only(bottom: 4), SizedBox(
color: Colors.white, width: screenWidth * 0.5,
height: 34, child: SkeletonLine(
width: screenWidth * 0.6, style: SkeletonLineStyle(
child: SkeletonParagraph( height: 15,
style: const SkeletonParagraphStyle( width: screenWidth * 0.5,
lines: 1, borderRadius: const BorderRadius.all(Radius.circular(10)),
),
), ),
), ),
], ),
), ],
], ),
), ],
), ),
), ),
), ),
child: const Center(
child: Text('Content'),
),
); );
} }
} }