import 'dart:math'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:carousel_slider/carousel_slider.dart'; import 'package:double_back_to_close_app/double_back_to_close_app.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; import 'package:get/get.dart'; import 'package:IQ/app/global/converted_bytes.dart'; import 'package:IQ/app/global/global_snackbar.dart'; import 'package:IQ/app/global/static_informs.dart'; import 'package:IQ/app/global/single_box.dart'; import 'package:IQ/app/global/single_card.dart'; import 'package:IQ/app/global/text_widget.dart'; import 'package:IQ/app/modules/drawerSide/views/drawer_side_view.dart'; import 'package:IQ/app/modules/home/providers/notifications.dart'; import 'package:IQ/app/modules/home/providers/user.dart'; import 'package:IQ/app/modules/home/widgets/shimmer_icon.dart'; import 'package:IQ/app/modules/home/widgets/shimmer_text.dart'; import 'package:IQ/app/modules/home/widgets/shimmer_text_widget.dart'; import 'package:IQ/app/routes/app_pages.dart'; import 'package:shimmer/shimmer.dart'; import '../controllers/home_controller.dart'; class HomeView extends GetView { HomeView({Key? key}) : super(key: key); final GlobalKey scaffoldKey = GlobalKey(); String formatBytesForRemainingTraffic(int bytes, int decimals) { if (bytes <= 0) return "0 B"; const suffixes = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]; var i = (log(bytes) / log(1024)).floor(); return suffixes[i] + ' ' + ((bytes / pow(1024, i)).toStringAsFixed(decimals)); } @override Widget build(BuildContext context) { return Directionality( textDirection: defaultLocale != "en" ? TextDirection.ltr : TextDirection.rtl, child: Scaffold( backgroundColor: backgroundColor, drawerScrimColor: Colors.black.withOpacity(0.7), key: scaffoldKey, endDrawer: const DrawerSideView(), drawerEdgeDragWidth: widthSize(context), body: DoubleBackToCloseApp( snackBar: snackBar, child: GetBuilder( builder: (HomeController homeController) { return RefreshIndicator( onRefresh: controller.onRefresh, triggerMode: RefreshIndicatorTriggerMode.anywhere, backgroundColor: Colors.white, color: brandColor, child: homeController.fetchHomeData ? Stack( children: [ SingleChildScrollView( physics: const AlwaysScrollableScrollPhysics(), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const SizedBox(height: 270), GetBuilder( builder: (c) { return Column( children: [ SizedBox( child: CarouselSlider( options: CarouselOptions( height: 200, viewportFraction: 1.0, enableInfiniteScroll: true, autoPlay: true, autoPlayAnimationDuration: const Duration( milliseconds: 200), scrollPhysics: const AlwaysScrollableScrollPhysics(), onPageChanged: c.onPageChanged, ), items: c.slidersImages.map((image) { return Builder( builder: (BuildContext context) { return Container( margin: const EdgeInsets .symmetric( horizontal: 15, ), width: MediaQuery.of(context) .size .width - 18, decoration: BoxDecoration( borderRadius: BorderRadius.circular( 10), ), child: ClipRRect( borderRadius: BorderRadius.circular( 10), child: CachedNetworkImage( imageUrl: image, fit: BoxFit.fill, placeholder: (_, __) => Image.asset( "assets/placeholder.png", ), ), ), ); }, ); }).toList(), ), ), const SizedBox(height: 8), Row( mainAxisAlignment: MainAxisAlignment.center, children: List.generate( c.slidersImages.length, (int index) { return Container( width: 8.0, height: 8.0, margin: const EdgeInsets.symmetric( horizontal: 6, ), decoration: BoxDecoration( shape: BoxShape.rectangle, color: c.current == index ? const Color(0xff503296) : const Color(0xffCACFEA), ), ); }), ) // Row( // mainAxisAlignment: // MainAxisAlignment.center, // children: c.slidersImages.map((url) { // int index = // c.slidersImages.indexOf(url); // print( // "Building indicator with index $index and current ${c.current}"); // return Container( // width: 8.0, // height: 8.0, // margin: // const EdgeInsets.symmetric( // horizontal: 6, // ), // decoration: BoxDecoration( // shape: BoxShape.rectangle, // color: c.current == index // ? const Color(0xff503296) // : const Color(0xffCACFEA), // ), // ); // }).toList(), // ), ], ); }, ), const SizedBox(height: 20), Container( height: 150, margin: const EdgeInsets.symmetric( horizontal: 15), decoration: BoxDecoration( borderRadius: const BorderRadius.all( Radius.circular(20), ), color: Colors.white, border: Border.all( color: borderColor, width: 2, ), ), child: Column( children: [ const SizedBox(height: 30), Container( margin: const EdgeInsets.only( top: 10, right: 15, left: 15, ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.center, children: [ Column( children: [ Stack( alignment: Alignment.center, children: [ SvgPicture.asset( controller.remainingIcon, height: 60, width: 60, ), Container( margin: const EdgeInsets.only( top: 10), child: TextWidget( text: controller .remainingDays, fontSize: 18, fontWeight: FontWeight.bold, color: controller .remainingDays == '!' ? Colors.red : Colors.black, ), ), ], ), const SizedBox(height: 5), TextWidget( fontSize: 16, text: 'remaining_days'.tr, fontWeight: FontWeight.w500, ), ], ), Container( padding: const EdgeInsets.symmetric( horizontal: 40, ), decoration: BoxDecoration( border: Border( left: BorderSide( color: Colors.grey .withOpacity(0.3), width: 1, ), right: BorderSide( color: Colors.grey .withOpacity(0.3), width: 1, ), ), ), child: SingleBox( text: controller.connectionIcon, text2: controller .connectionStatusText, ), ), SingleBox( text: controller.activiationIcon, text2: controller .activiationStatusText, ), ], ), ), ], ), ), const SizedBox(height: 20), Column( children: [ Container( margin: const EdgeInsets.symmetric( horizontal: 35), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container(), TextWidget( text: 'account_information'.tr, fontSize: 23, fontWeight: FontWeight.w500, color: brandColor, ), ], ), ), Container( margin: const EdgeInsets.symmetric( horizontal: 15, vertical: 10), padding: const EdgeInsets.symmetric( vertical: 10, horizontal: 25, ), decoration: BoxDecoration( borderRadius: const BorderRadius.all( Radius.circular(20), ), color: Colors.white, border: Border.all( color: borderColor, width: 2, ), ), child: Column( children: [ SingleCard( text: controller.loginName, text2: 'username'.tr, ), SingleCard( text: controller.fullName, text2: 'fullname'.tr, ), SingleCard( text: controller.subscriptionPrice, text2: 'subscription_price'.tr, ), SingleCard( text: controller.expireDate, text2: 'subscription_expire'.tr, ), controller.remainingTraffic != null ? Column( crossAxisAlignment: CrossAxisAlignment.end, mainAxisAlignment: MainAxisAlignment.end, children: [ Directionality( textDirection: defaultLocale == "en" ? TextDirection .ltr : TextDirection .rtl, child: TextWidget( text: formatBytes( controller .remainingTraffic ?? 0, 0), fontSize: 20, fontWeight: FontWeight.w400, color: brandColor, ), ), TextWidget( text: 'remaining_traffic' .tr, fontWeight: FontWeight.w400, fontSize: 16, color: Colors.grey, ), Container( margin: const EdgeInsets .symmetric( horizontal: 10, ), child: const Divider(), ), ], ) : Container(), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container(), Column( crossAxisAlignment: CrossAxisAlignment.end, // mainAxisAlignment: MainAxisAlignment.start, children: [ TextWidget( text: controller .availableBalance, fontSize: 20, fontWeight: FontWeight.w400, color: brandColor, ), TextWidget( text: 'available_balance'.tr, fontWeight: FontWeight.w400, fontSize: 16, color: Colors.grey, ), ], ), ], ) ], ), ), Container( margin: const EdgeInsets.only( right: 35, left: 35, top: 20, ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container(), TextWidget( text: 'home_notifs'.tr, fontSize: 23, fontWeight: FontWeight.w500, color: brandColor, ), ], ), ), Container( margin: const EdgeInsets.symmetric( horizontal: 15, vertical: 10), decoration: BoxDecoration( borderRadius: const BorderRadius.all( Radius.circular(20), ), border: Border.all( color: borderColor, width: 2, ), color: Colors.white, ), // ignore: prefer_is_empty child: notifications?.data?.length != 0 ? Column( children: notifications?.data ?.map((e) { return Column( children: [ TextButton( onPressed: () => Get .offNamed(Routes .NOTIFICATIONS_SCREEN), child: ListTile( trailing: SvgPicture .asset( 'assets/help_icon.svg', height: 35, width: 35, ), title: Container( margin: const EdgeInsets .only( top: 5, ), child: TextWidget( text: e.subject, fontSize: 16, overflow: TextOverflow .ellipsis, textAlign: TextAlign .right, softWrap: false, fontWeight: FontWeight .w400, color: brandColor, ), ), subtitle: TextWidget( text: e.message, fontWeight: FontWeight .w400, textAlign: TextAlign .right, fontSize: 14, color: Colors.grey, ), leading: const Icon( Icons .arrow_back_ios, size: 35, ), ), ), // ignore: prefer_is_empty (controller.listOfNotification ?.length != 0) ? controller.listOfNotification ?.last != e ? Container( margin: const EdgeInsets .symmetric( horizontal: 10, ), child: const Divider(), ) : Container() : Container(), ], ); }).toList() ?? [], ) : Container( // margin: , padding: const EdgeInsets.all(15), child: Row( mainAxisAlignment: MainAxisAlignment .spaceEvenly, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container(), TextWidget( text: "empty_home_notifs".tr, fontSize: 20, fontWeight: FontWeight.w400, color: const Color(0xff484848), ), SvgPicture.asset( "assets/notifs.svg", height: 50, width: 50, ), ], ), ), ), ], ), const SizedBox(height: 100), ], ), ), Container( height: 250, decoration: BoxDecoration( color: brandColor, image: const DecorationImage( image: AssetImage('assets/background.png'), fit: BoxFit.fill, ), ), child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.end, children: [ SizedBox( height: MediaQuery.of(context).viewPadding.top, ), Container( margin: const EdgeInsets.symmetric( horizontal: 15, ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container( margin: const EdgeInsets.only( top: 5, right: 15, ), child: Row( children: [ SvgPicture.asset( "assets/2/icon.svg", height: 20, width: 71.16, ), const SizedBox(width: 10), Image.asset("assets/logo.png"), ], ), ), const SizedBox(width: 10), Row( children: [ Text( user?.data?.firstname ?? ' . . . ', style: const TextStyle( fontSize: 20, color: Colors.white, fontWeight: FontWeight.normal, ), ), IconButton( onPressed: () { scaffoldKey.currentState ?.openEndDrawer(); }, icon: const Icon( Icons.menu, color: Colors.white, size: 40, ), ), ], ), ], ), ), Container( margin: const EdgeInsets.symmetric( horizontal: 20), child: Column( mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end, children: [ TextWidget( text: 'subscription_type'.tr, color: Colors.white, fontSize: 18, fontWeight: FontWeight.w300, textAlign: TextAlign.start, ), const SizedBox(height: 5), TextWidget( text: controller.profileName ?? ' . . . ', color: Colors.white, fontSize: 32, fontWeight: FontWeight.bold, textAlign: TextAlign.start, ), ], ), ), const SizedBox(height: 5), ], ), ), ], ) : Stack( children: [ SingleChildScrollView( physics: const AlwaysScrollableScrollPhysics(), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const SizedBox(height: 250), Container( height: 150, margin: const EdgeInsets.symmetric( horizontal: 15), decoration: BoxDecoration( borderRadius: const BorderRadius.all( Radius.circular(20), ), color: Colors.white, border: Border.all( color: borderColor, width: 2, ), ), child: Column( children: [ const SizedBox(height: 30), Shimmer.fromColors( baseColor: Colors.grey.withOpacity(0.3), highlightColor: Colors.white, enabled: true, child: Container( margin: const EdgeInsets.only( top: 10, right: 15, left: 15, ), child: const Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ ShiimerIcon(), ShiimerIcon(), ShiimerIcon(), ], ), ), ), ], ), ), const SizedBox(height: 20), Column( children: [ Align( alignment: Alignment.centerRight, child: Container( margin: const EdgeInsets.symmetric( horizontal: 15, vertical: 10), child: Shimmer.fromColors( baseColor: Colors.grey.withOpacity(0.3), highlightColor: Colors.white, enabled: true, child: const ShimmerText(), ), ), ), Container( margin: const EdgeInsets.symmetric( horizontal: 15, vertical: 10, ), padding: const EdgeInsets.symmetric( vertical: 10, horizontal: 25, ), width: MediaQuery.of(context).size.width, decoration: BoxDecoration( borderRadius: const BorderRadius.all( Radius.circular(20), ), color: Colors.white, border: Border.all( color: borderColor, width: 2, ), ), child: Column( children: [ const ShimmerTextWidget(), const ShimmerTextWidget(), const ShimmerTextWidget(), const ShimmerTextWidget(), Align( alignment: Alignment.centerRight, child: Column( children: [ Shimmer.fromColors( baseColor: Colors.grey .withOpacity(0.3), highlightColor: Colors.white, enabled: true, child: const ShimmerText(), ), const SizedBox(height: 5), Shimmer.fromColors( baseColor: Colors.grey .withOpacity(0.3), highlightColor: Colors.white, enabled: true, child: const ShimmerText(), ), ], ), ), ], ), ), // ignore: prefer_is_empty Align( alignment: Alignment.centerRight, child: Container( margin: const EdgeInsets.symmetric( horizontal: 15, vertical: 10), child: Shimmer.fromColors( baseColor: Colors.grey.withOpacity(0.3), highlightColor: Colors.white, enabled: true, child: const ShimmerText(), ), ), ), Container( margin: const EdgeInsets.symmetric( horizontal: 15, vertical: 10), decoration: BoxDecoration( borderRadius: const BorderRadius.all( Radius.circular(20), ), border: Border.all( color: borderColor, width: 2, ), color: Colors.white, ), child: Column( children: notifications?.data?.map((e) { return Column( children: [ TextButton( onPressed: () {}, child: ListTile( title: Align( alignment: Alignment .centerRight, child: Shimmer.fromColors( baseColor: Colors.grey .withOpacity(0.3), highlightColor: Colors.white, enabled: true, child: Container( height: 6, width: 300, decoration: const BoxDecoration( color: Colors.grey, shape: BoxShape .rectangle, ), ), ), ), subtitle: Align( alignment: Alignment .centerRight, child: Shimmer.fromColors( baseColor: Colors.grey .withOpacity(0.3), highlightColor: Colors.white, enabled: true, child: Container( height: 6, width: 150, decoration: const BoxDecoration( color: Colors.grey, shape: BoxShape .rectangle, ), ), ), ), ), ), if (controller .listOfNotification ?.last != e) Container( margin: const EdgeInsets .symmetric( horizontal: 10, ), child: const Divider(), ), ], ); }).toList() ?? [], ), ), ], ), const SizedBox(height: 100), ], ), ), Container( height: 230, decoration: BoxDecoration( color: brandColor, image: const DecorationImage( image: AssetImage('assets/background.png'), fit: BoxFit.fill, ), ), child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ SizedBox( height: MediaQuery.of(context).viewPadding.top), Container( margin: const EdgeInsets.only(right: 10), child: Row( mainAxisAlignment: MainAxisAlignment.end, children: [ Container( margin: const EdgeInsets.only( top: 5, right: 15), child: Row( children: [ Text( user?.data?.firstname ?? ' . . . ', style: const TextStyle( fontSize: 22, color: Colors.white, fontWeight: FontWeight.normal, ), ), ], ), ), const SizedBox(width: 10), IconButton( onPressed: () { scaffoldKey.currentState ?.openEndDrawer(); }, icon: const Icon( Icons.menu, color: Colors.white, size: 40, ), ), ], ), ), Column( children: [ TextWidget( text: 'subscription_type'.tr, color: Colors.white, fontSize: 20, fontWeight: FontWeight.w300, textAlign: TextAlign.center, ), const SizedBox(height: 5), TextWidget( text: controller.profileName, color: Colors.white, fontSize: 34, fontWeight: FontWeight.bold, textAlign: TextAlign.center, ), ], ), const SizedBox(height: 5), ], ), ), ], ), ); }, ), ), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling, floatingActionButton: GetBuilder( builder: (homeController) { return homeController.fetchHomeData ? Container( width: widthSize(context), height: 60, decoration: const BoxDecoration( gradient: LinearGradient( colors: [ Color(0xFF4009C0), Color(0xFF8C5EF6) ], // Gradient colors begin: Alignment.centerLeft, end: Alignment.centerRight, ), borderRadius: BorderRadius.all(Radius.circular(5)), ), margin: const EdgeInsets.symmetric( horizontal: 15, vertical: 29), child: TextButton( onPressed: () { Get.toNamed(Routes.FILL_CARD); }, child: GetBuilder( builder: (HomeController c) { return TextWidget( text: controller.floatButtonActivation, fontSize: 18, fontWeight: FontWeight.normal, color: Colors.white, ); }, ), ), ) : Container(); }, ), ), ); } }