728 lines
23 KiB
Dart
728 lines
23 KiB
Dart
import 'package:carousel_slider/carousel_slider.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:skeletons/skeletons.dart';
|
|
|
|
import '../../view_model/global_controller.dart';
|
|
|
|
// =================homa page skeleton running start================
|
|
|
|
class HomePageSkeleton extends StatelessWidget {
|
|
const HomePageSkeleton({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SafeArea(
|
|
child: Scaffold(
|
|
body: SingleChildScrollView(
|
|
// physics: const NeverScrollableScrollPhysics(),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const SizedBox(height: 15),
|
|
SizedBox(
|
|
width: context.width,
|
|
child: SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 2,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
randomLength: true,
|
|
height: 15,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 15),
|
|
SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
width: context.width,
|
|
height: 170,
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
),
|
|
const SizedBox(height: 30),
|
|
gsfTrendingChamps(),
|
|
const SizedBox(height: 30),
|
|
floatingBannerSkeleton(),
|
|
const SizedBox(height: 30),
|
|
headWithArrow(),
|
|
const SizedBox(height: 10),
|
|
upcomingActivities(),
|
|
const SizedBox(height: 30),
|
|
headWithArrow(),
|
|
const SizedBox(height: 10),
|
|
personalizedDietPlan(),
|
|
const SizedBox(height: 30),
|
|
headWithArrow(),
|
|
const SizedBox(height: 10),
|
|
shortClips(),
|
|
const SizedBox(height: 30),
|
|
headWithArrow(),
|
|
const SizedBox(height: 10),
|
|
courses(),
|
|
const SizedBox(height: 30),
|
|
headWithArrow(),
|
|
const SizedBox(height: 10),
|
|
meetTheCommunity()
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
gsfTrendingChamps() {
|
|
return Column(
|
|
children: [
|
|
SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 2,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
randomLength: true,
|
|
height: 15,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 20),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
width: Get.width / 3.5,
|
|
height: 120,
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
),
|
|
SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
width: Get.width / 3.5,
|
|
height: 120,
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
),
|
|
SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
width: Get.width / 3.5,
|
|
height: 120,
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 20),
|
|
SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
padding: const EdgeInsets.symmetric(horizontal: 20),
|
|
width: Get.width,
|
|
height: 50,
|
|
borderRadius: BorderRadius.circular(25),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
floatingBannerSkeleton() {
|
|
return SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
padding: const EdgeInsets.symmetric(horizontal: 0),
|
|
width: Get.width,
|
|
height: 200,
|
|
borderRadius: BorderRadius.circular(0),
|
|
),
|
|
);
|
|
}
|
|
|
|
upcomingActivities() {
|
|
return SizedBox(
|
|
height: 200,
|
|
child: ListView.builder(
|
|
physics: const BouncingScrollPhysics(),
|
|
scrollDirection: Axis.horizontal,
|
|
shrinkWrap: true,
|
|
itemCount: 3,
|
|
itemBuilder: (context, index) => SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
width: Get.width * 0.88,
|
|
height: 200,
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
personalizedDietPlan() {
|
|
return SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
width: Get.width,
|
|
height: 170,
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
);
|
|
}
|
|
|
|
shortClips() {
|
|
return SizedBox(
|
|
height: 240,
|
|
child: ListView.builder(
|
|
physics: const BouncingScrollPhysics(),
|
|
scrollDirection: Axis.horizontal,
|
|
shrinkWrap: true,
|
|
itemCount: 3,
|
|
itemBuilder: (context, index) {
|
|
return Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
width: Get.width / 3.2,
|
|
height: 180,
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
),
|
|
// const SizedBox(height: 10),
|
|
SizedBox(
|
|
width: Get.width / 3.2,
|
|
child: SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 0, vertical: 8),
|
|
lines: 2,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
randomLength: true,
|
|
height: 12,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}),
|
|
);
|
|
}
|
|
|
|
courses() {
|
|
return SizedBox(
|
|
height: 130,
|
|
child: ListView.builder(
|
|
physics: const BouncingScrollPhysics(),
|
|
scrollDirection: Axis.horizontal,
|
|
shrinkWrap: true,
|
|
itemCount: 3,
|
|
itemBuilder: (context, index) {
|
|
return Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
width: Get.width / 2.5,
|
|
height: 100,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
// const SizedBox(height: 10),
|
|
SizedBox(
|
|
width: Get.width / 2.5,
|
|
child: SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
padding:
|
|
const EdgeInsets.symmetric(horizontal: 0, vertical: 8),
|
|
lines: 1,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
// randomLength: true,
|
|
height: 12,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
meetTheCommunity() {
|
|
return SizedBox(
|
|
height: 180,
|
|
child: ListView.builder(
|
|
scrollDirection: Axis.horizontal,
|
|
shrinkWrap: true,
|
|
itemCount: 3,
|
|
physics: const ScrollPhysics(),
|
|
itemBuilder: (context, index) => SizedBox(
|
|
width: Get.width * 0.95,
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
flex: 2,
|
|
child: SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
width: Get.width,
|
|
height: 170,
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
),
|
|
),
|
|
Expanded(
|
|
flex: 4,
|
|
child: Column(
|
|
children: [
|
|
SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 1,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
randomLength: true,
|
|
height: 15,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 3,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
randomLength: true,
|
|
height: 15,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 5),
|
|
SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 1,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
randomLength: true,
|
|
height: 15,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
headWithArrow() {
|
|
return Row(
|
|
children: [
|
|
Expanded(
|
|
flex: 10,
|
|
child: SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 1,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
// randomLength: true,
|
|
height: 25,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
const Expanded(flex: 1, child: SizedBox()),
|
|
Expanded(
|
|
flex: 1,
|
|
child: SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
padding: const EdgeInsets.symmetric(horizontal: 0),
|
|
width: Get.width,
|
|
height: 25,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
//========my ranking page skeleton start======================
|
|
|
|
class LeaderboardSkeleton extends StatelessWidget {
|
|
const LeaderboardSkeleton({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SafeArea(
|
|
child: SingleChildScrollView(
|
|
child: Column(
|
|
children: [
|
|
topMembersSkeleton(),
|
|
const SizedBox(height: 40),
|
|
listMemberSkeleton(),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
topMembersSkeleton() {
|
|
return Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
SizedBox(
|
|
width: Get.width / 3.5,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const SizedBox(height: 150),
|
|
SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
maxWidth: Get.width,
|
|
padding: const EdgeInsets.symmetric(horizontal: 0),
|
|
width: 110,
|
|
height: 110,
|
|
borderRadius: BorderRadius.circular(100),
|
|
),
|
|
),
|
|
SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 2,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
randomLength: true,
|
|
height: 15,
|
|
alignment: Alignment.center,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
SizedBox(
|
|
width: Get.width / 3.5,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
maxWidth: Get.width,
|
|
padding: const EdgeInsets.symmetric(horizontal: 0),
|
|
width: 110,
|
|
height: 110,
|
|
borderRadius: BorderRadius.circular(100),
|
|
),
|
|
),
|
|
SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 2,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
randomLength: true,
|
|
height: 15,
|
|
alignment: Alignment.center,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
SizedBox(
|
|
width: Get.width / 3.5,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const SizedBox(height: 150),
|
|
SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
maxWidth: Get.width,
|
|
padding: const EdgeInsets.symmetric(horizontal: 0),
|
|
width: 110,
|
|
height: 110,
|
|
borderRadius: BorderRadius.circular(100),
|
|
),
|
|
),
|
|
SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 2,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
randomLength: true,
|
|
height: 15,
|
|
alignment: Alignment.center,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
listMemberSkeleton() {
|
|
return ListView.builder(
|
|
shrinkWrap: true,
|
|
itemCount: 15,
|
|
physics: const ScrollPhysics(),
|
|
itemBuilder: (context, index) => Container(
|
|
margin: const EdgeInsets.symmetric(horizontal: 0, vertical: 8),
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xff333333),
|
|
borderRadius: BorderRadius.circular(50)),
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
flex: 1,
|
|
child: SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 1,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
// randomLength: true,
|
|
width: Get.width,
|
|
height: 20,
|
|
alignment: Alignment.center,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Expanded(
|
|
flex: 5,
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
flex: 1,
|
|
child: Align(
|
|
alignment: Alignment.center,
|
|
child: SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
// maxWidth: Get.width,
|
|
padding: const EdgeInsets.symmetric(horizontal: 0),
|
|
width: 50,
|
|
height: 50,
|
|
borderRadius: BorderRadius.circular(100),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Expanded(
|
|
flex: 3,
|
|
child: SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 2,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
// randomLength: true,
|
|
width: Get.width,
|
|
height: 15,
|
|
alignment: Alignment.center,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Expanded(
|
|
flex: 1,
|
|
child: SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 1,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
// randomLength: true,
|
|
height: 20,
|
|
alignment: Alignment.center,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
//========profile page skeleton start======================
|
|
|
|
class ProfileSkeleton extends StatelessWidget {
|
|
const ProfileSkeleton({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SingleChildScrollView(
|
|
child: SafeArea(
|
|
child: Column(
|
|
children: [
|
|
const SizedBox(height: 80),
|
|
Container(
|
|
height: 280,
|
|
width: Get.width,
|
|
margin: const EdgeInsets.all(8),
|
|
decoration: const BoxDecoration(
|
|
color: Color(0xff333333),
|
|
),
|
|
child: Stack(
|
|
clipBehavior: Clip.none,
|
|
children: [
|
|
Positioned(
|
|
top: -50,
|
|
left: 0,
|
|
right: 0,
|
|
child: Align(
|
|
child: SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
maxWidth: Get.width,
|
|
padding: const EdgeInsets.symmetric(horizontal: 0),
|
|
width: 120,
|
|
height: 120,
|
|
borderRadius: BorderRadius.circular(100),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
// const SizedBox(height: 20),
|
|
Column(
|
|
children: [
|
|
const SizedBox(height: 100),
|
|
SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 2,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
randomLength: true,
|
|
height: 15,
|
|
alignment: Alignment.center,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
flex: 1,
|
|
child: Column(
|
|
children: [
|
|
SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
maxWidth: Get.width,
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 0),
|
|
width: Get.width,
|
|
height: 40,
|
|
borderRadius: BorderRadius.circular(100),
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 2,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
randomLength: true,
|
|
height: 15,
|
|
alignment: Alignment.center,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Expanded(
|
|
flex: 1,
|
|
child: Column(
|
|
children: [
|
|
SkeletonAvatar(
|
|
style: SkeletonAvatarStyle(
|
|
maxWidth: Get.width,
|
|
width: Get.width,
|
|
height: 40,
|
|
borderRadius: BorderRadius.circular(100),
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 2,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
randomLength: true,
|
|
height: 15,
|
|
alignment: Alignment.center,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
)
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 1,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
randomLength: true,
|
|
height: 15,
|
|
alignment: Alignment.center,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
SkeletonParagraph(
|
|
style: SkeletonParagraphStyle(
|
|
lines: 3,
|
|
spacing: 10,
|
|
lineStyle: SkeletonLineStyle(
|
|
// randomLength: true,
|
|
height: 15,
|
|
alignment: Alignment.centerLeft,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|