import 'package:easycook_mobile/blocs/home/home_cubit.dart'; import 'package:easycook_mobile/blocs/user_detail/user_detail_cubit.dart'; import 'package:easycook_mobile/pages/detail_resep.dart'; import 'package:easycook_mobile/theme.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:google_fonts/google_fonts.dart'; import 'package:eva_icons_flutter/eva_icons_flutter.dart'; import 'package:percent_indicator/percent_indicator.dart'; import 'package:easycook_mobile/pages/account/profil.dart'; import 'package:easycook_mobile/pages/dapurku.dart'; import 'package:easycook_mobile/pages/explore.dart'; class HomePage extends StatefulWidget { @override State createState() => _HomePageState(); } class _HomePageState extends State { int _selectedIndex = 0; void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); } static List _pages = [ PageHome(), PageExplore(), PageDapurku(), PageProfil(), ]; @override Widget build(BuildContext context) { return Scaffold( body: _pages.elementAt(_selectedIndex), bottomNavigationBar: Container( height: 95, child: BottomNavigationBar( showSelectedLabels: true, showUnselectedLabels: true, selectedItemColor: Colors.orange, unselectedItemColor: Colors.black, items: [ BottomNavigationBarItem( icon: Icon( Icons.home, ), label: 'Beranda', ), BottomNavigationBarItem( icon: Icon( Icons.explore, ), label: 'Explore', ), BottomNavigationBarItem( icon: Icon( Icons.kitchen_rounded, ), label: 'Dapurku', ), BottomNavigationBarItem( icon: Icon( Icons.account_circle, ), label: 'Akun', ), ], currentIndex: _selectedIndex, onTap: _onItemTapped, ), ), ); } } class PageHome extends StatefulWidget { const PageHome({ super.key, }); @override State createState() => _PageHomeState(); } class _PageHomeState extends State { late HomeCubit _fetchHomeCubit; late UserDetailCubit _fetchUserDetailCubit; @override void initState() { // TODO: implement initState _fetchHomeCubit = HomeCubit()..fetchHome(); _fetchUserDetailCubit = UserDetailCubit()..fetchUserDetail(); super.initState(); } @override void dispose() { // TODO: implement dispose _fetchHomeCubit.close(); _fetchUserDetailCubit.close(); super.dispose(); } @override Widget build(BuildContext context) { return Container( decoration: BoxDecoration( image: DecorationImage( image: AssetImage('images/BG.png'), fit: BoxFit.fill, ), ), child: ListView( children: [ // Header Container( padding: EdgeInsets.only(top: 50, left: 16, right: 16), child: BlocProvider( create: (context) => _fetchUserDetailCubit, child: BlocBuilder( bloc: _fetchUserDetailCubit, builder: (context, state) { return state is UserDetailLoading ? Center( child: CircularProgressIndicator(), ) : state is UserDetailFailure ? Center( child: Text(state.message), ) : state is UserDetailSuccess ? Column( children: [ Row( children: [ ClipRRect( borderRadius: BorderRadius.circular(45), child: Image.asset( 'images/profil.png', fit: BoxFit.cover, width: 40, height: 40, ), ), SizedBox( width: 16, ), Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Selamat Datang', style: GoogleFonts.montserrat() .copyWith( color: Colors.black45, fontSize: 12, fontWeight: FontWeight.bold, ), ), Row( children: [ Text( state.userDetail.user .firstName, style: GoogleFonts.montserrat() .copyWith( color: Colors.black, fontSize: 18, fontWeight: FontWeight.bold, ), ), SizedBox( width: 7, ), Text( state.userDetail.user .lastName, style: GoogleFonts.montserrat() .copyWith( color: Colors.black, fontSize: 18, fontWeight: FontWeight.bold, ), ), ], ), ], ), Spacer(), SvgPicture.asset( 'assets/icons/cart.svg', color: Colors.amber, width: 24, height: 24, ), ], ), SizedBox( height: 24, ), ], ) : SizedBox(); }, ), )), // Search Padding( padding: const EdgeInsets.only(top: 24, left: 16, right: 16), child: TextFormField( decoration: const InputDecoration( border: OutlineInputBorder(), enabledBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.black), ), focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.blueAccent), ), hintText: "Cari", hintStyle: TextStyle(color: Colors.black26), ), ), ), // Text Padding( padding: const EdgeInsets.only(top: 32, left: 16), child: Text( 'Hanya Untuk Kamu', style: GoogleFonts.montserrat().copyWith( color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold, ), ), ), Padding( padding: const EdgeInsets.only(top: 6, left: 16), child: Text( 'Rekomendasi menu berdasarkan bahan di dapurmu', style: GoogleFonts.montserrat().copyWith( color: Colors.black, fontSize: 14, ), ), ), // Card Resep Padding( padding: const EdgeInsets.only(top: 16, left: 16, right: 16), child: SizedBox( height: 220, width: double.infinity, child: BlocProvider( create: (context) => _fetchHomeCubit, child: BlocBuilder( bloc: _fetchHomeCubit, builder: (context, state) { return state is HomeLoading ? Center( child: CircularProgressIndicator(), ) : state is HomeFailure ? Center( child: Text(state.message), ) : state is HomeSuccess ? ListView.separated( scrollDirection: Axis.horizontal, itemBuilder: (context, index) { final data = state.recipes[index]; return Wrap( runSpacing: 20, spacing: 20, children: [ InkWell( onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => DetailResepPage( recipeId: data.id, ), ), ); }, child: Container( width: 156, height: 216, margin: const EdgeInsets.only( right: 15), padding: const EdgeInsets.only( top: 8, right: 8, left: 8, bottom: 16), decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), image: DecorationImage( image: NetworkImage( data.imageUrl), fit: BoxFit.fitHeight, ), ), child: Column( mainAxisAlignment: MainAxisAlignment .spaceBetween, children: [ Row( children: [ // Rating SvgPicture.asset( 'assets/icons/Star 1.svg'), SizedBox( width: 4, ), Text( '4/5', style: GoogleFonts .montserrat() .copyWith( fontSize: 10, color: Colors.white, fontWeight: FontWeight.bold, ), ), const Spacer(), // Like Button OutlinedButton( onPressed: () {}, child: const Icon( Icons.favorite, color: Colors.amber, ), style: OutlinedButton .styleFrom( shape: CircleBorder(), backgroundColor: Colors.white, side: BorderSide( color: Colors.amber), ), ), ], ), const Spacer(), Text( data.title, style: GoogleFonts.montserrat() .copyWith( color: Colors.white, fontSize: 12, fontWeight: FontWeight.w900, ), ), Align( alignment: Alignment.centerLeft, child: Text( 'kelengkapan bahan', style: GoogleFonts .montserrat() .copyWith( color: Colors.white, fontSize: 10, ), ), ), Row( children: [ LinearPercentIndicator( width: 100.0, lineHeight: 8.0, percent: 0.8, backgroundColor: Colors.white, progressColor: Colors.orange, ), Spacer(), Text( '80 %', style: GoogleFonts .montserrat() .copyWith( color: Colors.orange, ), ), ], ), ], ), ), ), ], ); // Text(data.difficulty); }, separatorBuilder: (BuildContext context, int index) => const Divider(), itemCount: state.recipes.length, ) : SizedBox(); }, ), ), ), ), // Text Padding( padding: const EdgeInsets.only(top: 32, left: 16), child: Text( 'Paling banyak disukai', style: GoogleFonts.montserrat().copyWith( color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold, ), ), ), Padding( padding: const EdgeInsets.only(left: 16, top: 6), child: Text( 'Menu yang disukai oleh banyak orang', style: GoogleFonts.montserrat().copyWith( color: Colors.black, fontSize: 14, ), ), ), // Card Resep Lebar Container( // width: 311, height: 216, padding: const EdgeInsets.only(top: 24), child: ListView( scrollDirection: Axis.horizontal, children: [ _cardResepLebar(), _cardResepLebar(), _cardResepLebar(), ], ), ), // Text Padding( padding: const EdgeInsets.only(top: 32, left: 16), child: Text( 'Paling banyak ingin dicoba', style: GoogleFonts.montserrat().copyWith( color: Colors.black, fontWeight: FontWeight.bold, fontSize: 14, ), ), ), Padding( padding: const EdgeInsets.only(top: 8, left: 16), child: Text( 'Menu yang ingin dicoba oleh banyak orang', style: GoogleFonts.montserrat().copyWith( color: Colors.black, fontSize: 14, ), ), ), // Card resep Padding( padding: const EdgeInsets.only(top: 16, left: 16, right: 16), child: SizedBox( height: 220, width: double.infinity, child: BlocProvider( create: (context) => _fetchHomeCubit, child: BlocBuilder( bloc: _fetchHomeCubit, builder: (context, state) { return state is HomeLoading ? Center( child: CircularProgressIndicator(), ) : state is HomeFailure ? Center( child: Text(state.message), ) : state is HomeSuccess ? ListView.separated( scrollDirection: Axis.horizontal, itemBuilder: (context, index) { final data = state.recipes[index]; return Wrap( runSpacing: 20, spacing: 20, children: [ InkWell( onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => DetailResepPage( recipeId: data.id, ), ), ); }, child: Container( width: 156, height: 216, margin: const EdgeInsets.only( right: 15), padding: const EdgeInsets.only( top: 8, right: 8, left: 8, bottom: 16), decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), image: DecorationImage( image: NetworkImage( data.imageUrl), fit: BoxFit.fitHeight, ), ), child: Column( mainAxisAlignment: MainAxisAlignment .spaceBetween, children: [ Row( children: [ // Rating SvgPicture.asset( 'assets/icons/Star 1.svg'), SizedBox( width: 4, ), Text( '4/5', style: GoogleFonts .montserrat() .copyWith( fontSize: 10, color: Colors.white, fontWeight: FontWeight.bold, ), ), const Spacer(), // Like Button OutlinedButton( onPressed: () {}, child: const Icon( Icons.favorite, color: Colors.amber, ), style: OutlinedButton .styleFrom( shape: CircleBorder(), backgroundColor: Colors.white, side: BorderSide( color: Colors.amber), ), ), ], ), const Spacer(), Text( data.title, style: GoogleFonts.montserrat() .copyWith( color: Colors.white, fontSize: 12, fontWeight: FontWeight.w900, ), ), Align( alignment: Alignment.centerLeft, child: Text( 'kelengkapan bahan', style: GoogleFonts .montserrat() .copyWith( color: Colors.white, fontSize: 10, ), ), ), Row( children: [ LinearPercentIndicator( width: 100.0, lineHeight: 8.0, percent: 0.8, backgroundColor: Colors.white, progressColor: Colors.orange, ), Spacer(), Text( '80 %', style: GoogleFonts .montserrat() .copyWith( color: Colors.orange, ), ), ], ), ], ), ), ), ], ); // Text(data.difficulty); }, separatorBuilder: (BuildContext context, int index) => const Divider(), itemCount: state.recipes.length, ) : SizedBox(); }, ), ), ), ), ], ), ); } } Widget _cardResep(BuildContext context) { return InkWell( onTap: () { // Navigator.push( // context, // MaterialPageRoute( // builder: (context) => DetailResepPage(), // ), // ); }, child: Container( width: 156, height: 216, padding: const EdgeInsets.only(top: 8, right: 8, left: 8, bottom: 16), decoration: BoxDecoration( image: DecorationImage( image: AssetImage('images/card_bg.png'), fit: BoxFit.fitHeight, ), ), child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Row( children: [ // Rating SvgPicture.asset('assets/icons/Star 1.svg'), SizedBox( width: 4, ), Text( '4/5', style: GoogleFonts.montserrat().copyWith( fontSize: 10, color: Colors.white, fontWeight: FontWeight.bold, ), ), const Spacer(), // Like Button OutlinedButton( onPressed: () {}, child: const Icon( Icons.favorite, color: Colors.amber, ), style: OutlinedButton.styleFrom( shape: CircleBorder(), backgroundColor: Colors.white, side: BorderSide(color: Colors.amber), ), ), ], ), const Spacer(), Text( 'Tumis Sawi dengan Terasi', style: GoogleFonts.montserrat().copyWith( color: Colors.white, fontSize: 12, fontWeight: FontWeight.w900, ), ), Align( alignment: Alignment.centerLeft, child: Text( 'kelengkapan bahan', style: GoogleFonts.montserrat().copyWith( color: Colors.white, fontSize: 10, ), ), ), Row( children: [ LinearPercentIndicator( width: 100.0, lineHeight: 8.0, percent: 0.8, backgroundColor: Colors.white, progressColor: Colors.orange, ), Spacer(), Text( '80 %', style: GoogleFonts.montserrat().copyWith( color: Colors.orange, ), ), ], ), ], ), ), ); } Widget _cardResepLebar() { return Container( width: 311, height: 216, decoration: BoxDecoration( image: DecorationImage( image: AssetImage('images/bg_card_lebar.png'), fit: BoxFit.fitHeight, ), ), child: Column( children: [ Padding( padding: const EdgeInsets.only(top: 100, left: 32, right: 12), child: Column( children: [ Row( children: [ Text( 'Tumis Tahu Kemangi', style: GoogleFonts.montserrat().copyWith( color: Colors.white, fontSize: 12, fontWeight: FontWeight.bold, ), ), SizedBox( height: 6, ), ], ), Row( children: [ Text( 'Kelengkapan bahan', style: GoogleFonts.montserrat() .copyWith(fontSize: 10, color: Colors.white), ), ], ), Row( children: [ LinearPercentIndicator( width: 210, lineHeight: 8.0, percent: 0.8, backgroundColor: Colors.white, progressColor: Colors.orange, ), Text( '80 %', style: GoogleFonts.montserrat().copyWith( color: Colors.orange, ), ), ], ), Row( children: [ SvgPicture.asset('assets/icons/Star 1.svg'), SizedBox( width: 4, ), Text( '4/5', style: GoogleFonts.montserrat().copyWith( fontSize: 10, color: Colors.white, fontWeight: FontWeight.bold, ), ), Spacer(), // Like Button OutlinedButton( onPressed: () {}, child: const Icon( Icons.favorite, color: Colors.amber, ), style: OutlinedButton.styleFrom( shape: CircleBorder(), backgroundColor: Colors.white, side: BorderSide(color: Colors.amber), ), ), ], ), ], ), ), ], ), ); }