import 'package:bootstrap_icons/bootstrap_icons.dart'; import 'package:carousel_slider/carousel_slider.dart'; import 'package:english_learning/core/widgets/custom_button.dart'; import 'package:english_learning/features/auth/provider/user_provider.dart'; import 'package:english_learning/features/history/provider/history_provider.dart'; import 'package:english_learning/features/history/screens/history_screen.dart'; import 'package:english_learning/features/home/data/card_data.dart'; import 'package:english_learning/features/home/provider/completed_topics_provider.dart'; import 'package:english_learning/features/home/widgets/progress_card.dart'; import 'package:english_learning/features/home/widgets/welcome_card.dart'; import 'package:english_learning/features/learning/screens/learning_screen.dart'; import 'package:english_learning/features/settings/modules/edit_profile/screens/edit_profile_screen.dart'; import 'package:english_learning/features/settings/screens/settings_screen.dart'; import 'package:english_learning/core/widgets/slider_widget.dart'; import 'package:english_learning/core/utils/styles/theme.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:google_nav_bar/google_nav_bar.dart'; import 'package:provider/provider.dart'; import 'package:shimmer/shimmer.dart'; class HomeScreen extends StatefulWidget { const HomeScreen({super.key}); @override State createState() => _HomeScreenState(); static void navigateReplacing(BuildContext context) { Navigator.of(context).pushReplacement( MaterialPageRoute(builder: (context) => const HomeScreen()), ); } } class _HomeScreenState extends State { final PageController _pageController = PageController(); int _selectedIndex = 0; final List _screens = [ const HomeContent(), const LearningScreen(), const HistoryScreen(), const SettingsScreen(), ]; @override Widget build(BuildContext context) { return Scaffold( body: Container( color: AppColors.bgSoftColor, child: PageView( physics: const NeverScrollableScrollPhysics(), controller: _pageController, children: _screens, onPageChanged: (index) { setState(() { _selectedIndex = index; }); }, ), ), bottomNavigationBar: Container( decoration: BoxDecoration( gradient: AppColors.gradientTheme, borderRadius: const BorderRadius.only( topLeft: Radius.circular(20), topRight: Radius.circular(20), ), ), child: Padding( padding: const EdgeInsets.only( top: 20, bottom: 24, left: 16, right: 16, ), child: GNav( activeColor: AppColors.blueColor, tabBackgroundColor: AppColors.whiteColor, tabBorderRadius: 100, color: AppColors.whiteColor, iconSize: 20, gap: 8, selectedIndex: _selectedIndex, onTabChange: (index) async { setState(() { _selectedIndex = index; _pageController.jumpToPage(index); }); if (index == 2) { // Index 2 adalah tab History final historyProvider = Provider.of(context, listen: false); final userProvider = Provider.of(context, listen: false); await historyProvider.loadHistoryData(userProvider.jwtToken!); } }, padding: const EdgeInsets.symmetric( horizontal: 16, vertical: 8, ), tabs: const [ GButton( icon: BootstrapIcons.house, text: 'Home', ), GButton( icon: BootstrapIcons.book, text: 'Learning', ), GButton( icon: BootstrapIcons.clock_history, text: 'History', ), GButton( icon: BootstrapIcons.gear, text: 'Settings', ), ], ), ), ), ); } } class HomeContent extends StatefulWidget { const HomeContent({super.key}); @override State createState() => _HomeContentState(); } class _HomeContentState extends State { final CardData cardData = CardData(); int _currentPage = 0; @override void initState() { super.initState(); // Memanggil fetchCompletedTopics saat HomeContent diinisialisasi WidgetsBinding.instance.addPostFrameCallback((_) { final userProvider = Provider.of(context, listen: false); final completedTopicsProvider = Provider.of(context, listen: false); completedTopicsProvider.fetchCompletedTopics(userProvider.jwtToken!); }); } Widget _buildNoDataWidget() { return Padding( padding: const EdgeInsets.all(12.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Still new?', style: AppTextStyles.blackTextStyle.copyWith( fontSize: 18, fontWeight: FontWeight.bold, ), ), const SizedBox(height: 4), Text( 'Begin your journey!', style: AppTextStyles.disableTextStyle.copyWith( fontSize: 14, ), ), const SizedBox(height: 24), CustomButton( text: 'Explore', width: double.infinity, height: 44, color: AppColors.yellowButtonColor, onPressed: () {}, ), ], ), ); } Widget _buildShimmerEffect() { return Padding( padding: const EdgeInsets.symmetric(horizontal: 24.0), child: Shimmer.fromColors( baseColor: Colors.grey[300]!, highlightColor: Colors.grey[100]!, child: Column( children: List.generate( 2, (index) => Padding( padding: const EdgeInsets.only(bottom: 16.0), child: Container( width: double.infinity, height: 150, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(12), ), ), )), ), ), ); } Widget _buildCompletedTopicsContent(CompletedTopicsProvider provider) { return ListView.builder( shrinkWrap: true, physics: const NeverScrollableScrollPhysics(), padding: const EdgeInsets.symmetric( horizontal: 16.0, ), itemCount: 1, itemBuilder: (context, index) { return ProgressCard( completedTopic: provider.completedTopics, ); }, ); } @override Widget build(BuildContext context) { return Consumer2(builder: ( context, authProvider, completedTopicsProvider, child, ) { final userName = authProvider.getUserName() ?? 'Guest'; return SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Stack( children: [ Column( mainAxisSize: MainAxisSize.min, children: [ Container( width: double.infinity, decoration: BoxDecoration( gradient: AppColors.gradientTheme, borderRadius: const BorderRadius.only( bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24), ), ), child: Padding( padding: const EdgeInsets.only( top: 60.0, left: 18.34, right: 16.0, bottom: 34.0, ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Row( children: [ SvgPicture.asset( 'lib/features/home/assets/images/Logo.svg', width: 31, ), const SizedBox(width: 4.34), Text( 'SEALS', style: AppTextStyles.logoTextStyle.copyWith( fontSize: 28, fontWeight: FontWeight.w700, ), ), ], ), GestureDetector( onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => const EditProfileScreen(), ), ); }, child: const Icon( BootstrapIcons.person_circle, size: 28, color: AppColors.whiteColor, ), ), ], ), const SizedBox(height: 17), RichText( text: TextSpan( text: 'Hi, ', style: AppTextStyles.whiteTextStyle.copyWith( fontWeight: FontWeight.w700, fontSize: 18, ), children: [ TextSpan( text: userName, style: AppTextStyles.yellowTextStyle.copyWith( fontWeight: FontWeight.w700, fontSize: 18, ), ), TextSpan( text: '!', style: AppTextStyles.whiteTextStyle.copyWith( fontWeight: FontWeight.w700, fontSize: 18, ), ), ], ), ), const SizedBox(height: 8), Text( 'Let\'s evolve together', style: AppTextStyles.whiteTextStyle.copyWith( fontSize: 12, fontWeight: FontWeight.w400, ), ), ], ), ), ), ], ), ], ), const SizedBox(height: 16), CarouselSlider.builder( itemCount: cardData.cardData.length, itemBuilder: (context, index, realIndex) { return WelcomeCard(cardModel: cardData.cardData[index]); }, options: CarouselOptions( height: 168, viewportFraction: 0.9, enlargeCenterPage: true, autoPlay: true, autoPlayInterval: const Duration(seconds: 3), autoPlayAnimationDuration: const Duration(milliseconds: 800), autoPlayCurve: Curves.fastOutSlowIn, onPageChanged: (index, reason) { setState( () { _currentPage = index; }, ); }, ), ), const SizedBox(height: 16), SliderWidget( currentPage: _currentPage, itemCount: cardData.cardData.length, ), const SizedBox(height: 16), Padding( padding: const EdgeInsets.only( top: 8.0, left: 24.0, right: 24.0, bottom: 47.0, ), child: Container( width: double.infinity, decoration: BoxDecoration( color: AppColors.whiteColor, borderRadius: BorderRadius.circular(12), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.2), spreadRadius: 2, blurRadius: 5, offset: const Offset(0, 3), ), ], ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( padding: const EdgeInsets.all(16.0), child: Row( children: [ const Icon( BootstrapIcons.info_circle, color: AppColors.tetriaryColor, size: 16, ), const SizedBox(width: 8), Text( 'Your Last Journey.', style: AppTextStyles.tetriaryTextStyle.copyWith( fontSize: 12, fontWeight: FontWeight.w800, ), ), ], ), ), completedTopicsProvider.isLoading ? _buildShimmerEffect() : completedTopicsProvider.completedTopics.isEmpty ? _buildNoDataWidget() : _buildCompletedTopicsContent( completedTopicsProvider), // completedTopicsProvider.isLoading // ? _buildShimmerEffect() // : completedTopicsProvider.completedTopics.isEmpty // ? _buildNoDataWidget() // : ListView.builder( // shrinkWrap: true, // physics: const NeverScrollableScrollPhysics(), // padding: const EdgeInsets.symmetric( // horizontal: 16.0, // ), // itemCount: 1, // itemBuilder: (context, index) { // return ProgressCard( // completedTopic: completedTopicsProvider // .completedTopics, // Kirim seluruh list // ); // }, // ), ], ), ), ), ], ), ); }); } }