feat: nav_added
This commit is contained in:
parent
967c11f012
commit
0ed3a02063
253
lib/main.dart
253
lib/main.dart
@ -17,12 +17,17 @@ class MyApp extends StatelessWidget {
|
||||
useMaterial3: true,
|
||||
),
|
||||
home: const MyHomePage(),
|
||||
// Named routes for clean navigation
|
||||
routes: {
|
||||
'/shop': (context) => const ShopLandingPage(),
|
||||
'/shop/grid-right': (context) => const ShopGridRightSidebarPage(),
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// REUSABLE HEADER WIDGET — USED IN BOTH HOME PAGE & SHOP PAGE
|
||||
// REUSABLE HEADER WIDGET
|
||||
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
|
||||
final String title;
|
||||
|
||||
@ -51,28 +56,18 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
|
||||
),
|
||||
title: Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 40,
|
||||
Container(
|
||||
width: 120,
|
||||
height: 40,
|
||||
padding: const EdgeInsets.all(4),
|
||||
child: SvgPicture.network(
|
||||
'https://nest-frontend-v6.vercel.app/assets/imgs/theme/logo.svg',
|
||||
placeholderBuilder: (context) => const CircularProgressIndicator(),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'Nest',
|
||||
style: const TextStyle(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.green,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
const Text(
|
||||
'MART & GROCERY',
|
||||
style: TextStyle(
|
||||
fontSize: 10,
|
||||
color: Colors.grey,
|
||||
placeholderBuilder: (context) => const Icon(
|
||||
Icons.shopping_bag,
|
||||
color: Colors.green,
|
||||
size: 42,
|
||||
),
|
||||
fit: BoxFit.contain,
|
||||
),
|
||||
),
|
||||
],
|
||||
@ -134,9 +129,7 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
|
||||
);
|
||||
}
|
||||
}
|
||||
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
// REUSABLE DRAWER WIDGET
|
||||
class AppDrawer extends StatefulWidget {
|
||||
const AppDrawer({super.key});
|
||||
@ -202,13 +195,26 @@ class _AppDrawerState extends State<AppDrawer> {
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
SvgPicture.network(
|
||||
logoUrl,
|
||||
Container(
|
||||
height: 40,
|
||||
placeholderBuilder: (context) => const SizedBox(
|
||||
width: 160,
|
||||
height: 40,
|
||||
child: Center(child: Text('Nest')),
|
||||
padding: const EdgeInsets.all(4),
|
||||
child: SvgPicture.network(
|
||||
logoUrl,
|
||||
placeholderBuilder: (context) => const Row(
|
||||
children: [
|
||||
Icon(Icons.shopping_bag, color: Colors.green, size: 32),
|
||||
SizedBox(width: 8),
|
||||
Text(
|
||||
'Nest',
|
||||
style: TextStyle(
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.green,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
fit: BoxFit.contain,
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
@ -271,12 +277,7 @@ class _AppDrawerState extends State<AppDrawer> {
|
||||
'Shop Grid - Right Sidebar',
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => const ShopGridRightSidebarPage(),
|
||||
),
|
||||
);
|
||||
Navigator.pushNamed(context, '/shop/grid-right');
|
||||
},
|
||||
),
|
||||
_buildSubItem('Shop Grid - Left Sidebar'),
|
||||
@ -320,6 +321,10 @@ class _AppDrawerState extends State<AppDrawer> {
|
||||
children: [
|
||||
_buildSubItem('Vendors Grid'),
|
||||
_buildSubItem('Vendore List'),
|
||||
_buildSubItem('Vendore Details 01'),
|
||||
_buildSubItem('Vendors Details 02'),
|
||||
_buildSubItem('Vendors Dashboard'),
|
||||
_buildSubItem('Vendors Guide')
|
||||
],
|
||||
),
|
||||
|
||||
@ -557,27 +562,132 @@ class _AppDrawerState extends State<AppDrawer> {
|
||||
}
|
||||
}
|
||||
|
||||
// NEW PAGE: Shop Grid - Right Sidebar
|
||||
class ShopGridRightSidebarPage extends StatelessWidget {
|
||||
const ShopGridRightSidebarPage({super.key});
|
||||
// DECORATIVE ICONS FOR BREADCRUMB BAR
|
||||
class DecorativeIcons extends StatelessWidget {
|
||||
const DecorativeIcons({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: const CustomAppBar(title: 'Shop Grid - Right Sidebar'),
|
||||
drawer: const AppDrawer(), // ✅ Drawer attached → hamburger works!
|
||||
body: const Center(
|
||||
child: Text(
|
||||
'Hello',
|
||||
style: TextStyle(fontSize: 24),
|
||||
return Positioned.fill(
|
||||
child: IgnorePointer(
|
||||
child: Opacity(
|
||||
opacity: 0.1,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
Transform.rotate(
|
||||
angle: -0.3,
|
||||
child: Icon(Icons.straighten, size: 40, color: Colors.green),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Transform.scale(
|
||||
scale: 0.8,
|
||||
child: Icon(Icons.inventory_2, size: 32, color: Colors.red),
|
||||
),
|
||||
const SizedBox(width: 24),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
// BREADCRUMB ITEM
|
||||
Widget _buildBreadcrumbItem(String label, {VoidCallback? onPressed}) {
|
||||
return MouseRegion(
|
||||
cursor: SystemMouseCursors.click,
|
||||
child: InkWell(
|
||||
onTap: onPressed,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
hoverColor: Colors.green[100],
|
||||
splashColor: Colors.transparent,
|
||||
highlightColor: Colors.transparent,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 2),
|
||||
child: Text(
|
||||
label,
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Colors.green,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// BREADCRUMBS BAR WIDGET
|
||||
class BreadcrumbsBar extends StatelessWidget {
|
||||
final String currentPage;
|
||||
|
||||
const BreadcrumbsBar({
|
||||
super.key,
|
||||
required this.currentPage,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
|
||||
margin: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.green[50],
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
const DecorativeIcons(),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
currentPage,
|
||||
style: const TextStyle(
|
||||
fontSize: 32,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black87,
|
||||
),
|
||||
),
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
_buildBreadcrumbItem('Home', onPressed: () {
|
||||
Navigator.popUntil(context, (route) => route.isFirst);
|
||||
}),
|
||||
const SizedBox(width: 8),
|
||||
const Icon(Icons.chevron_right, size: 16, color: Colors.grey),
|
||||
const SizedBox(width: 8),
|
||||
_buildBreadcrumbItem('Shop', onPressed: () {
|
||||
Navigator.pushNamedAndRemoveUntil(
|
||||
context,
|
||||
'/shop',
|
||||
(route) => route.isFirst,
|
||||
);
|
||||
}),
|
||||
const SizedBox(width: 8),
|
||||
const Icon(Icons.chevron_right, size: 16, color: Colors.grey),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
currentPage,
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Colors.black54,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// MAIN HOME PAGE
|
||||
class MyHomePage extends StatelessWidget {
|
||||
const MyHomePage({super.key});
|
||||
@ -586,12 +696,12 @@ class MyHomePage extends StatelessWidget {
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: const CustomAppBar(title: 'Home'),
|
||||
drawer: const AppDrawer(), // ✅ Same drawer
|
||||
drawer: const AppDrawer(),
|
||||
body: const Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
Text('Hello'),
|
||||
Text('Hello from Home!'),
|
||||
Text(
|
||||
'0',
|
||||
style: TextStyle(fontSize: 48),
|
||||
@ -601,4 +711,49 @@ class MyHomePage extends StatelessWidget {
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// SHOP LANDING PAGE (e.g., /shop)
|
||||
class ShopLandingPage extends StatelessWidget {
|
||||
const ShopLandingPage({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: const CustomAppBar(title: 'Shop'),
|
||||
drawer: const AppDrawer(),
|
||||
body: const Center(
|
||||
child: Text(
|
||||
'Welcome to the Shop!',
|
||||
style: TextStyle(fontSize: 24),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// SHOP GRID - RIGHT SIDEBAR PAGE
|
||||
class ShopGridRightSidebarPage extends StatelessWidget {
|
||||
const ShopGridRightSidebarPage({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: const CustomAppBar(title: 'Shop Grid - Right Sidebar'),
|
||||
drawer: const AppDrawer(),
|
||||
body: Column(
|
||||
children: [
|
||||
BreadcrumbsBar(currentPage: 'Snack'),
|
||||
Expanded(
|
||||
child: Center(
|
||||
child: Text(
|
||||
'Hello from Shop Grid - Right Sidebar!',
|
||||
style: const TextStyle(fontSize: 24),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user