241 lines
8.9 KiB
Dart
241 lines
8.9 KiB
Dart
import 'package:flutter/material.dart';
|
|
import '../widgets/main_app_bar.dart';
|
|
import 'dashboard_screen.dart';
|
|
import 'order_screen.dart';
|
|
import 'invoice_screen.dart';
|
|
import 'chat_screen.dart';
|
|
import 'settings_screen.dart';
|
|
import 'package:provider/provider.dart';
|
|
import '../providers/chat_unread_provider.dart';
|
|
|
|
|
|
class MainBottomNav extends StatefulWidget {
|
|
const MainBottomNav({super.key});
|
|
|
|
@override
|
|
State<MainBottomNav> createState() => MainBottomNavState();
|
|
}
|
|
|
|
class MainBottomNavState extends State<MainBottomNav> {
|
|
int _currentIndex = 0;
|
|
|
|
void setIndex(int index) {
|
|
setState(() => _currentIndex = index);
|
|
}
|
|
|
|
final List<Widget> _screens = [
|
|
DashboardScreen(),
|
|
OrdersScreen(),
|
|
InvoiceScreen(),
|
|
ChatScreen(),
|
|
SettingsScreen(),
|
|
];
|
|
|
|
final List<IconData> _icons = const [
|
|
Icons.dashboard_outlined,
|
|
Icons.shopping_bag_outlined,
|
|
Icons.receipt_long_outlined,
|
|
Icons.chat_bubble_outline,
|
|
Icons.settings_outlined,
|
|
];
|
|
|
|
final List<String> _labels = const [
|
|
"Dashboard",
|
|
"Orders",
|
|
"Invoice",
|
|
"Chat",
|
|
"Settings",
|
|
];
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final width = MediaQuery.of(context).size.width;
|
|
final scale = (width / 390).clamp(0.85, 1.20);
|
|
|
|
final containerPadding = 8 * scale;
|
|
|
|
return Scaffold(
|
|
appBar: const MainAppBar(),
|
|
body: _screens[_currentIndex],
|
|
|
|
bottomNavigationBar: Padding(
|
|
padding: EdgeInsets.only(
|
|
left: 10 * scale,
|
|
right: 10 * scale,
|
|
bottom: 10 * scale,
|
|
),
|
|
child: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
final totalWidth = constraints.maxWidth;
|
|
|
|
// inner width (after padding)
|
|
final contentWidth = totalWidth - (containerPadding * 2);
|
|
|
|
final safeContentWidth =
|
|
contentWidth > 0 ? contentWidth : totalWidth;
|
|
|
|
final itemWidth = safeContentWidth / _icons.length;
|
|
|
|
final indicatorWidth = 70 * scale;
|
|
final indicatorHeight = 70 * scale;
|
|
|
|
double left = (_currentIndex * itemWidth) +
|
|
(itemWidth / 2) -
|
|
(indicatorWidth / 2);
|
|
|
|
/// ⭐ FIX: explicitly convert clamp to double
|
|
final double safeLeft = left
|
|
.clamp(0, safeContentWidth - indicatorWidth)
|
|
.toDouble();
|
|
|
|
return Container(
|
|
height: 100 * scale,
|
|
padding: EdgeInsets.symmetric(horizontal: containerPadding),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(28 * scale),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.08),
|
|
blurRadius: 20 * scale,
|
|
offset: Offset(0, 8 * scale),
|
|
)
|
|
],
|
|
),
|
|
child: Stack(
|
|
children: [
|
|
/// ⭐ Indicator - safe positioned
|
|
AnimatedPositioned(
|
|
duration: const Duration(milliseconds: 350),
|
|
curve: Curves.easeOut,
|
|
top: 10 * scale,
|
|
left: safeLeft,
|
|
child: Container(
|
|
width: indicatorWidth,
|
|
height: indicatorHeight,
|
|
decoration: BoxDecoration(
|
|
gradient: const LinearGradient(
|
|
colors: [
|
|
Color(0xFF4F46E5),
|
|
Color(0xFF06B6D4),
|
|
],
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
),
|
|
borderRadius: BorderRadius.circular(20 * scale),
|
|
),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
_icons[_currentIndex],
|
|
size: 22 * scale,
|
|
color: Colors.white,
|
|
),
|
|
SizedBox(height: 2 * scale),
|
|
Text(
|
|
_labels[_currentIndex],
|
|
style: TextStyle(
|
|
fontSize: 10 * scale,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
|
|
/// ⭐ Icon Row
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
children: List.generate(_icons.length, (index) {
|
|
final selected = index == _currentIndex;
|
|
|
|
return GestureDetector(
|
|
onTap: () => setIndex(index),
|
|
child: SizedBox(
|
|
width: itemWidth,
|
|
height: 100 * scale,
|
|
child: Center(
|
|
child: AnimatedOpacity(
|
|
duration: const Duration(milliseconds: 250),
|
|
opacity: selected ? 0 : 1,
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
index == 3
|
|
? Consumer<ChatUnreadProvider>(
|
|
builder: (_, chat, __) {
|
|
return Stack(
|
|
clipBehavior: Clip.none,
|
|
children: [
|
|
Icon(
|
|
_icons[index],
|
|
size: 22 * scale,
|
|
color: Colors.black87,
|
|
),
|
|
|
|
if (chat.unreadCount > 0)
|
|
Positioned(
|
|
right: -6,
|
|
top: -6,
|
|
child: Container(
|
|
padding: const EdgeInsets.all(4),
|
|
decoration: const BoxDecoration(
|
|
color: Colors.red,
|
|
shape: BoxShape.circle,
|
|
),
|
|
constraints: const BoxConstraints(
|
|
minWidth: 20,
|
|
minHeight: 20,
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
chat.unreadCount.toString(),
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
)
|
|
: Icon(
|
|
_icons[index],
|
|
size: 22 * scale,
|
|
color: Colors.black87,
|
|
),
|
|
|
|
SizedBox(height: 4 * scale),
|
|
Text(
|
|
_labels[index],
|
|
style: TextStyle(
|
|
fontSize: 10 * scale,
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.black87,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|