mod: add skeleton

Signed-off-by: bggRGjQaUbCoE <githubaccount56556@proton.me>
This commit is contained in:
bggRGjQaUbCoE
2025-04-20 21:37:44 +08:00
parent abdde1f811
commit 95caf111ae
24 changed files with 740 additions and 347 deletions

View File

@@ -6,6 +6,7 @@ class DynamicCardSkeleton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final color = Theme.of(context).colorScheme.onInverseSurface;
return Skeleton(
child: Container(
padding: const EdgeInsets.only(left: 12, right: 12, top: 12),
@@ -25,7 +26,7 @@ class DynamicCardSkeleton extends StatelessWidget {
width: 40,
height: 40,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
borderRadius: BorderRadius.circular(20),
),
),
@@ -34,13 +35,13 @@ class DynamicCardSkeleton extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
width: 100,
height: 13,
margin: const EdgeInsets.only(bottom: 5),
),
Container(
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
width: 50,
height: 11,
),
@@ -55,31 +56,31 @@ class DynamicCardSkeleton extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
width: double.infinity,
height: 13,
margin: const EdgeInsets.only(bottom: 7),
),
Container(
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
width: double.infinity,
height: 13,
margin: const EdgeInsets.only(bottom: 7),
),
Container(
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
width: 300,
height: 13,
margin: const EdgeInsets.only(bottom: 7),
),
Container(
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
width: 250,
height: 13,
margin: const EdgeInsets.only(bottom: 7),
),
Container(
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
width: 100,
height: 13,
margin: const EdgeInsets.only(bottom: 7),

View File

@@ -0,0 +1,67 @@
import 'package:PiliPlus/common/constants.dart';
import 'package:flutter/material.dart';
import 'skeleton.dart';
class FavPgcItemSkeleton extends StatelessWidget {
const FavPgcItemSkeleton({super.key});
@override
Widget build(BuildContext context) {
final color = Theme.of(context).colorScheme.onInverseSurface;
return Skeleton(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: StyleString.safeSpace,
vertical: 5,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AspectRatio(
aspectRatio: 3 / 4,
child: LayoutBuilder(
builder: (context, boxConstraints) {
return Container(
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(4),
),
width: boxConstraints.maxWidth,
height: boxConstraints.maxHeight,
);
},
),
),
const SizedBox(width: 10),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 175,
height: 12,
color: color,
),
const SizedBox(height: 10),
Container(
width: 55,
height: 11,
color: color,
),
const SizedBox(height: 5),
Container(
width: 35,
height: 11,
color: color,
),
],
),
),
],
),
),
);
}
}

View File

@@ -0,0 +1,53 @@
import 'package:flutter/material.dart';
import 'skeleton.dart';
class MsgFeedSysMsgSkeleton extends StatelessWidget {
const MsgFeedSysMsgSkeleton({super.key});
@override
Widget build(BuildContext context) {
final color = Theme.of(context).colorScheme.onInverseSurface;
return Skeleton(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 125,
height: 16,
color: color,
),
const SizedBox(height: 6),
Container(
width: double.infinity,
height: 12,
color: color,
),
const SizedBox(height: 4),
Container(
width: double.infinity,
height: 12,
color: color,
),
const SizedBox(height: 4),
Container(
width: 100,
height: 12,
color: color,
),
const SizedBox(height: 4),
Align(
alignment: Alignment.centerRight,
child: Container(
width: 100,
height: 10,
color: color,
),
),
],
),
),
);
}
}

View File

@@ -0,0 +1,36 @@
import 'package:flutter/material.dart';
import 'skeleton.dart';
class MsgFeedTopSkeleton extends StatelessWidget {
const MsgFeedTopSkeleton({super.key});
@override
Widget build(BuildContext context) {
final color = Theme.of(context).colorScheme.onInverseSurface;
return Skeleton(
child: ListTile(
leading: Container(
width: 45,
height: 45,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: color,
),
),
title: UnconstrainedBox(
alignment: Alignment.centerLeft,
child: Container(
width: 100,
height: 11,
color: color,
),
),
subtitle: Container(
color: color,
width: 125,
height: 11,
),
),
);
}
}

View File

@@ -7,6 +7,7 @@ class VideoCardHSkeleton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final color = Theme.of(context).colorScheme.onInverseSurface;
return Skeleton(
child: Padding(
padding: const EdgeInsets.symmetric(
@@ -23,7 +24,7 @@ class VideoCardHSkeleton extends StatelessWidget {
builder: (context, boxConstraints) {
return Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
borderRadius: StyleString.mdRadius,
),
);
@@ -37,19 +38,19 @@ class VideoCardHSkeleton extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
width: 200,
height: 11,
margin: const EdgeInsets.only(bottom: 5),
),
Container(
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
width: 150,
height: 13,
),
const Spacer(),
Container(
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
width: 100,
height: 13,
margin: const EdgeInsets.only(bottom: 5),
@@ -57,13 +58,13 @@ class VideoCardHSkeleton extends StatelessWidget {
Row(
children: [
Container(
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
width: 40,
height: 13,
margin: const EdgeInsets.only(right: 8),
),
Container(
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
width: 40,
height: 13,
),

View File

@@ -7,6 +7,7 @@ class VideoCardVSkeleton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final color = Theme.of(context).colorScheme.onInverseSurface;
return Skeleton(
child: Column(
children: [
@@ -16,7 +17,7 @@ class VideoCardVSkeleton extends StatelessWidget {
builder: (context, boxConstraints) {
return Container(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
borderRadius: StyleString.mdRadius,
),
);
@@ -37,24 +38,24 @@ class VideoCardVSkeleton extends StatelessWidget {
width: 200,
height: 13,
margin: const EdgeInsets.only(bottom: 5),
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
),
Container(
width: 150,
height: 13,
margin: const EdgeInsets.only(bottom: 12),
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
),
Container(
width: 110,
height: 13,
margin: const EdgeInsets.only(bottom: 5),
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
),
Container(
width: 75,
height: 13,
color: Theme.of(context).colorScheme.onInverseSurface,
color: color,
),
],
),

View File

@@ -0,0 +1,41 @@
import 'package:flutter/material.dart';
import 'skeleton.dart';
class WhisperItemSkeleton extends StatelessWidget {
const WhisperItemSkeleton({super.key});
@override
Widget build(BuildContext context) {
final color = Theme.of(context).colorScheme.onInverseSurface;
return Skeleton(
child: ListTile(
leading: Container(
width: 45,
height: 45,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: color,
),
),
title: UnconstrainedBox(
alignment: Alignment.centerLeft,
child: Container(
width: 100,
height: 11,
color: color,
),
),
subtitle: Container(
color: color,
width: 125,
height: 11,
),
trailing: Container(
color: color,
width: 50,
height: 11,
),
),
);
}
}