MobileEasyCook/easycook_mobile/lib/pages/home.dart
2024-12-31 09:53:57 +07:00

857 lines
37 KiB
Dart

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<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
static List<Widget> _pages = <Widget>[
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>[
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<PageHome> createState() => _PageHomeState();
}
class _PageHomeState extends State<PageHome> {
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),
),
),
],
),
],
),
),
],
),
);
}