feat: update home ui
This commit is contained in:
Efril
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
|
||||
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||
import 'package:line_icons/line_icons.dart';
|
||||
|
||||
import '../../../application/analytic/exclusive_summary_loader/exclusive_summary_loader_bloc.dart';
|
||||
import '../../../application/home/home_bloc.dart';
|
||||
import '../../../application/outlet/outlet_list_loader/outlet_list_loader_bloc.dart';
|
||||
import '../../../application/outlet/selected_outlet/selected_outlet_bloc.dart';
|
||||
@@ -13,7 +14,8 @@ import '../../components/button/button.dart';
|
||||
import '../../components/spacer/spacer.dart';
|
||||
import 'widgets/feature.dart';
|
||||
import 'widgets/header.dart';
|
||||
import 'widgets/promo_banner.dart';
|
||||
import 'widgets/home_top_products.dart';
|
||||
import 'widgets/home_warnings.dart';
|
||||
import 'widgets/stats.dart';
|
||||
|
||||
@RoutePage()
|
||||
@@ -31,13 +33,16 @@ class HomePage extends StatefulWidget implements AutoRouteWrapper {
|
||||
getIt<HomeBloc>()..add(HomeEvent.fetchedDashboard()),
|
||||
),
|
||||
BlocProvider(
|
||||
create: (context) => getIt<OutletListLoaderBloc>()
|
||||
..add(const OutletListLoaderEvent.fetched()),
|
||||
create: (context) =>
|
||||
getIt<OutletListLoaderBloc>()
|
||||
..add(const OutletListLoaderEvent.fetched()),
|
||||
),
|
||||
BlocProvider(
|
||||
create: (context) => getIt<SelectedOutletBloc>()
|
||||
..add(const SelectedOutletEvent.loaded()),
|
||||
create: (context) =>
|
||||
getIt<SelectedOutletBloc>()
|
||||
..add(const SelectedOutletEvent.loaded()),
|
||||
),
|
||||
BlocProvider(create: (context) => getIt<ExclusiveSummaryLoaderBloc>()),
|
||||
],
|
||||
child: this,
|
||||
);
|
||||
@@ -89,129 +94,132 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
|
||||
previous.selectedOutletId != current.selectedOutletId,
|
||||
listener: (context, state) => _refetchDashboard(context),
|
||||
child: Scaffold(
|
||||
backgroundColor: AppColor.background,
|
||||
body: RefreshIndicator(
|
||||
backgroundColor: AppColor.white,
|
||||
color: AppColor.primary,
|
||||
onRefresh: () {
|
||||
_refetchDashboard(context);
|
||||
return Future.value();
|
||||
},
|
||||
child: BlocBuilder<HomeBloc, HomeState>(
|
||||
builder: (context, state) {
|
||||
return CustomScrollView(
|
||||
physics: const BouncingScrollPhysics(
|
||||
parent: ClampingScrollPhysics(),
|
||||
),
|
||||
slivers: [
|
||||
// SliverAppBar with HomeHeader as background
|
||||
SliverAppBar(
|
||||
expandedHeight: 300, // Adjust based on HomeHeader height
|
||||
floating: false,
|
||||
pinned: true,
|
||||
snap: false,
|
||||
elevation: 0,
|
||||
scrolledUnderElevation: 8,
|
||||
backgroundColor: AppColor.primary,
|
||||
surfaceTintColor: Colors.transparent,
|
||||
flexibleSpace: LayoutBuilder(
|
||||
builder: (BuildContext context, BoxConstraints constraints) {
|
||||
// Calculate collapse progress (0.0 = expanded, 1.0 = collapsed)
|
||||
final double expandedHeight = 200;
|
||||
final double collapsedHeight =
|
||||
kToolbarHeight + MediaQuery.of(context).padding.top;
|
||||
final double currentHeight = constraints.maxHeight;
|
||||
backgroundColor: AppColor.background,
|
||||
body: RefreshIndicator(
|
||||
backgroundColor: AppColor.white,
|
||||
color: AppColor.primary,
|
||||
onRefresh: () {
|
||||
_refetchDashboard(context);
|
||||
return Future.value();
|
||||
},
|
||||
child: BlocBuilder<HomeBloc, HomeState>(
|
||||
builder: (context, state) {
|
||||
return CustomScrollView(
|
||||
physics: const BouncingScrollPhysics(
|
||||
parent: ClampingScrollPhysics(),
|
||||
),
|
||||
slivers: [
|
||||
// SliverAppBar with HomeHeader as background
|
||||
SliverAppBar(
|
||||
expandedHeight: 440, // Adjusted for new header with slider
|
||||
floating: false,
|
||||
pinned: true,
|
||||
snap: false,
|
||||
elevation: 0,
|
||||
scrolledUnderElevation: 8,
|
||||
backgroundColor: AppColor.primary,
|
||||
surfaceTintColor: Colors.transparent,
|
||||
flexibleSpace: LayoutBuilder(
|
||||
builder: (BuildContext context, BoxConstraints constraints) {
|
||||
// Calculate collapse progress (0.0 = expanded, 1.0 = collapsed)
|
||||
final double expandedHeight = 200;
|
||||
final double collapsedHeight =
|
||||
kToolbarHeight + MediaQuery.of(context).padding.top;
|
||||
final double currentHeight = constraints.maxHeight;
|
||||
|
||||
double collapseProgress =
|
||||
1.0 -
|
||||
((currentHeight - collapsedHeight) /
|
||||
(expandedHeight - collapsedHeight));
|
||||
collapseProgress = collapseProgress.clamp(0.0, 1.0);
|
||||
double collapseProgress =
|
||||
1.0 -
|
||||
((currentHeight - collapsedHeight) /
|
||||
(expandedHeight - collapsedHeight));
|
||||
collapseProgress = collapseProgress.clamp(0.0, 1.0);
|
||||
|
||||
return FlexibleSpaceBar(
|
||||
title: Opacity(
|
||||
opacity:
|
||||
collapseProgress, // Title muncul saat collapse
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
AppConstant.appName,
|
||||
style: AppStyle.xl.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
fontSize: 18,
|
||||
letterSpacing: -0.5,
|
||||
color: AppColor.white,
|
||||
return FlexibleSpaceBar(
|
||||
title: Opacity(
|
||||
opacity:
|
||||
collapseProgress, // Title muncul saat collapse
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
AppConstant.appName,
|
||||
style: AppStyle.xl.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
fontSize: 18,
|
||||
letterSpacing: -0.5,
|
||||
color: AppColor.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
ActionIconButton(
|
||||
onTap: () {},
|
||||
icon: LineIcons.bell,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
titlePadding: const EdgeInsets.only(
|
||||
left: 20,
|
||||
right: 12,
|
||||
bottom: 16,
|
||||
),
|
||||
background: AnimatedBuilder(
|
||||
animation: _headerAnimationController,
|
||||
builder: (context, child) {
|
||||
return Transform.translate(
|
||||
offset: Offset(
|
||||
0,
|
||||
50 * (1 - _headerAnimationController.value),
|
||||
),
|
||||
child: Opacity(
|
||||
opacity: _headerAnimationController.value,
|
||||
child: HomeHeader(
|
||||
totalRevenue:
|
||||
state.dashboard.overview.totalSales,
|
||||
ActionIconButton(
|
||||
onTap: () {},
|
||||
icon: LineIcons.bell,
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
|
||||
// Main Content
|
||||
SliverToBoxAdapter(
|
||||
child: AnimatedBuilder(
|
||||
animation: _contentAnimationController,
|
||||
builder: (context, child) {
|
||||
return Transform.translate(
|
||||
offset: Offset(
|
||||
0,
|
||||
30 * (1 - _contentAnimationController.value),
|
||||
),
|
||||
child: Opacity(
|
||||
opacity: _contentAnimationController.value,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const HomePromoBanner(),
|
||||
HomeFeature(),
|
||||
HomeStats(overview: state.dashboard.overview),
|
||||
const SpaceHeight(40),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
titlePadding: const EdgeInsets.only(
|
||||
left: 20,
|
||||
right: 12,
|
||||
bottom: 16,
|
||||
),
|
||||
background: AnimatedBuilder(
|
||||
animation: _headerAnimationController,
|
||||
builder: (context, child) {
|
||||
return Transform.translate(
|
||||
offset: Offset(
|
||||
0,
|
||||
50 * (1 - _headerAnimationController.value),
|
||||
),
|
||||
child: Opacity(
|
||||
opacity: _headerAnimationController.value,
|
||||
child: HomeHeader(
|
||||
totalRevenue:
|
||||
state.dashboard.overview.totalSales,
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
|
||||
// Main Content
|
||||
SliverToBoxAdapter(
|
||||
child: AnimatedBuilder(
|
||||
animation: _contentAnimationController,
|
||||
builder: (context, child) {
|
||||
return Transform.translate(
|
||||
offset: Offset(
|
||||
0,
|
||||
30 * (1 - _contentAnimationController.value),
|
||||
),
|
||||
child: Opacity(
|
||||
opacity: _contentAnimationController.value,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
HomeFeature(),
|
||||
HomeWarnings(),
|
||||
HomeStats(overview: state.dashboard.overview),
|
||||
HomeTopProducts(
|
||||
products: state.dashboard.topProducts,
|
||||
),
|
||||
const SpaceHeight(40),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
), // Scaffold
|
||||
), // Scaffold
|
||||
); // BlocListener
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user