C4M
/
CARING_RESTORANT
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

bottom navigation

table
Stephane 4 months ago
parent
b6c8620385
commit
495cd222c7
8 changed files with 913 additions and 264 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 160
      lib/layouts/main_layout.dart
  2. 28
      lib/main.dart
  3. 1
      lib/pages/categories_screen.dart
  4. 1
      lib/pages/commandes_screen.dart
  5. 1
      lib/pages/menus_screen.dart
  6. 790
      lib/pages/tables.dart
  7. 130
      lib/widgets/bottom_navigation.dart
  8. 66
      lib/widgets/mobile_bottom_navigation.dart

160
lib/layouts/main_layout.dart
View File

@ -0,0 +1,160 @@
import 'package:flutter/material.dart';
import '../widgets/bottom_navigation.dart';
class MainLayout extends StatefulWidget {
final Widget child;
final int currentIndex;
const MainLayout({super.key, required this.child, this.currentIndex = 0});
@override
// ignore: library_private_types_in_public_api
_MainLayoutState createState() => _MainLayoutState();
}
class _MainLayoutState extends State<MainLayout> {
int _selectedIndex = 0;
@override
void initState() {
super.initState();
_selectedIndex = widget.currentIndex;
}
@override
Widget build(BuildContext context) {
final isDesktop = MediaQuery.of(context).size.width >= 768;
return Scaffold(
backgroundColor: Colors.grey.shade50,
body: Row(
children: [
// Desktop Sidebar
if (isDesktop) _buildDesktopSidebar(),
// Main Content
Expanded(
child: Column(
children: [
// Page Content
Expanded(child: widget.child),
// Bottom Navigation
AppBottomNavigation(
selectedIndex: _selectedIndex,
onItemTapped: _onItemTapped,
isDesktop: isDesktop,
),
],
),
),
],
),
);
}
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
// Global navigation logic
switch (index) {
case 0:
Navigator.pushReplacementNamed(context, '/tables');
break;
case 1:
Navigator.pushReplacementNamed(context, '/commandes');
break;
case 2:
Navigator.pushReplacementNamed(context, '/categories');
break;
case 3:
Navigator.pushReplacementNamed(context, '/menus');
break;
}
}
Widget _buildDesktopSidebar() {
return Container(
width: 250,
color: Colors.white,
child: Column(
children: [
Container(
padding: const EdgeInsets.all(20),
child: const Text(
'Restaurant App',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
),
),
Expanded(
child: ListView(
children: [
_buildSidebarItem(
icon: Icons.table_restaurant,
title: 'Tables',
route: '/tables',
index: 0,
),
_buildSidebarItem(
icon: Icons.receipt_long_outlined,
title: 'Commandes',
route: '/commandes',
index: 1,
),
_buildSidebarItem(
icon: Icons.category_outlined,
title: 'Catégories',
route: '/categories',
index: 2,
),
_buildSidebarItem(
icon: Icons.restaurant_menu,
title: 'Menus',
route: '/menus',
index: 3,
),
],
),
),
],
),
);
}
Widget _buildSidebarItem({
required IconData icon,
required String title,
required String route,
required int index,
}) {
final isSelected = _selectedIndex == index;
return ListTile(
leading: Icon(
icon,
color: isSelected ? Colors.green.shade700 : Colors.grey.shade600,
),
title: Text(
title,
style: TextStyle(
color: isSelected ? Colors.green.shade700 : Colors.grey.shade700,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
),
),
selected: isSelected,
selectedTileColor: Colors.green.shade50,
onTap: () {
setState(() {
_selectedIndex = index;
});
Navigator.pushReplacementNamed(context, route);
},
);
}
}

28
lib/main.dart
View File

@ -1,21 +1,37 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import '/pages/tables.dart'; // Assure-toi que ce fichier existe dans ton projet import 'layouts/main_layout.dart';
import 'pages/tables.dart';
// import 'pages/commandes_screen.dart';
// import 'pages/categories_screen.dart';
// import 'pages/menus_screen.dart';
void main() { void main() {
runApp(MyApp()); runApp(const MyApp());
} }
class MyApp extends StatelessWidget { class MyApp extends StatelessWidget {
const MyApp({super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
title: 'Sélection de Table', title: 'Restaurant App',
debugShowCheckedModeBanner: false,
theme: ThemeData( theme: ThemeData(
primarySwatch: Colors.deepOrange, primarySwatch: Colors.green,
visualDensity: VisualDensity.adaptivePlatformDensity, visualDensity: VisualDensity.adaptivePlatformDensity,
), ),
home: TablesScreen(), initialRoute: '/tables',
routes: {
'/tables':
(context) =>
const MainLayout(currentIndex: 0, child: TablesScreen()),
// '/commandes':
// (context) => MainLayout(currentIndex: 1, child: CommandesScreen()),
// '/categories':
// (context) => MainLayout(currentIndex: 2, child: CategoriesScreen()),
// '/menus':
// (context) => MainLayout(currentIndex: 3, child: MenusScreen()),
},
); );
} }
} }

1
lib/pages/categories_screen.dart
View File

@ -0,0 +1 @@
// TODO Implement this library.

1
lib/pages/commandes_screen.dart
View File

@ -0,0 +1 @@
// TODO Implement this library.

1
lib/pages/menus_screen.dart
View File

@ -0,0 +1 @@
// TODO Implement this library.

790
lib/pages/tables.dart
View File

@ -1,3 +1,4 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:http/http.dart' as http; import 'package:http/http.dart' as http;
import 'dart:convert'; import 'dart:convert';
@ -26,7 +27,10 @@ class TableData {
} }
class TablesScreen extends StatefulWidget { class TablesScreen extends StatefulWidget {
const TablesScreen({super.key});
@override @override
// ignore: library_private_types_in_public_api
_TablesScreenState createState() => _TablesScreenState(); _TablesScreenState createState() => _TablesScreenState();
} }
@ -41,18 +45,151 @@ class _TablesScreenState extends State<TablesScreen> {
} }
Future<void> fetchTables() async { Future<void> fetchTables() async {
final url = Uri.parse("https://restaurant.careeracademy.mg/api/tables"); try {
final response = await http.get(url); final url = Uri.parse("https://restaurant.careeracademy.mg/api/tables");
final response = await http.get(url);
if (response.statusCode == 200) {
final List<dynamic> data = json.decode(response.body)['data']; if (response.statusCode == 200) {
setState(() { final List<dynamic> data = json.decode(response.body)['data'];
tables = data.map((json) => TableData.fromJson(json)).toList(); setState(() {
isLoading = false; tables = data.map((json) => TableData.fromJson(json)).toList();
}); isLoading = false;
} else { });
} else {
setState(() => isLoading = false);
if (kDebugMode) {
print('Erreur API: ${response.statusCode}');
}
}
} catch (e) {
setState(() => isLoading = false); setState(() => isLoading = false);
print('Erreur API: ${response.statusCode}'); if (kDebugMode) {
print('Erreur: $e');
}
}
}
Future<void> _addTable() async {
// Add table logic
final result = await showDialog<Map<String, dynamic>>(
context: context,
builder: (context) => const _AddEditTableDialog(),
);
if (result != null) {
// Call API to add table
_callAddTableAPI(result);
}
}
Future<void> _callAddTableAPI(Map<String, dynamic> tableData) async {
try {
final url = Uri.parse("https://restaurant.careeracademy.mg/api/tables");
final response = await http.post(
url,
headers: {'Content-Type': 'application/json'},
body: json.encode(tableData),
);
if (response.statusCode == 201) {
fetchTables(); // Refresh the list
// ignore: use_build_context_synchronously
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Table ajoutée avec succès')),
);
}
} catch (e) {
ScaffoldMessenger.of(
// ignore: use_build_context_synchronously
context,
).showSnackBar(SnackBar(content: Text('Erreur: $e')));
}
}
Future<void> _editTable(TableData table) async {
final result = await showDialog<Map<String, dynamic>>(
context: context,
builder: (context) => _AddEditTableDialog(table: table),
);
if (result != null) {
_callEditTableAPI(table.id, result);
}
}
Future<void> _callEditTableAPI(int id, Map<String, dynamic> tableData) async {
try {
final url = Uri.parse(
"https://restaurant.careeracademy.mg/api/tables/$id",
);
final response = await http.put(
url,
headers: {'Content-Type': 'application/json'},
body: json.encode(tableData),
);
if (response.statusCode == 200) {
fetchTables();
// ignore: use_build_context_synchronously
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Table modifiée avec succès')),
);
}
} catch (e) {
ScaffoldMessenger.of(
// ignore: use_build_context_synchronously
context,
).showSnackBar(SnackBar(content: Text('Erreur: $e')));
}
}
Future<void> _deleteTable(int id) async {
final confirm = await showDialog<bool>(
context: context,
builder:
(context) => AlertDialog(
title: const Text('Confirmer la suppression'),
content: const Text(
'Êtes-vous sûr de vouloir supprimer cette table?',
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context, false),
child: const Text('Annuler'),
),
ElevatedButton(
onPressed: () => Navigator.pop(context, true),
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
child: const Text('Supprimer'),
),
],
),
);
if (confirm == true) {
_callDeleteTableAPI(id);
}
}
Future<void> _callDeleteTableAPI(int id) async {
try {
final url = Uri.parse(
"https://restaurant.careeracademy.mg/api/tables/$id",
);
final response = await http.delete(url);
if (response.statusCode == 200) {
fetchTables();
// ignore: use_build_context_synchronously
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Table supprimée avec succès')),
);
}
} catch (e) {
ScaffoldMessenger.of(
// ignore: use_build_context_synchronously
context,
).showSnackBar(SnackBar(content: Text('Erreur: $e')));
} }
} }
@ -89,6 +226,7 @@ class _TablesScreenState extends State<TablesScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width; final screenWidth = MediaQuery.of(context).size.width;
final isDesktop = screenWidth >= 768;
int crossAxisCount = 2; int crossAxisCount = 2;
if (screenWidth > 1200) { if (screenWidth > 1200) {
@ -97,278 +235,284 @@ class _TablesScreenState extends State<TablesScreen> {
crossAxisCount = 3; crossAxisCount = 3;
} }
return Scaffold( if (isLoading) {
backgroundColor: Colors.grey.shade50, return const Center(child: CircularProgressIndicator());
body: Column( }
children: [
// Header return Column(
Container( children: [
width: double.infinity, // Header
color: Colors.white, Container(
padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 20), color: Colors.white,
child: Column( padding: const EdgeInsets.all(20),
children: [ child: Row(
const Text( children: [
'Sélectionner une table', Expanded(
style: TextStyle( child: Column(
fontSize: 24, crossAxisAlignment: CrossAxisAlignment.start,
fontWeight: FontWeight.bold, children: [
color: Colors.black87, const Text(
), 'Sélectionner une table',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
),
const SizedBox(height: 8),
Text(
'Choisissez une table pour commencer une nouvelle commande',
style: TextStyle(
fontSize: 14,
color: Colors.grey.shade600,
),
),
],
), ),
const SizedBox(height: 8), ),
Text( // Add button (desktop only)
'Choisissez une table pour commencer une nouvelle commande', if (isDesktop)
style: TextStyle(fontSize: 14, color: Colors.grey.shade600), ElevatedButton.icon(
onPressed: _addTable,
icon: const Icon(Icons.add, size: 20),
label: const Text('Ajouter'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green.shade700,
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 12,
),
),
), ),
], ],
),
), ),
),
// Tables Grid // Content - Reduced height
Expanded( Expanded(
child: child: Padding(
isLoading padding: const EdgeInsets.all(12.0),
? const Center(child: CircularProgressIndicator()) child: Column(
: Padding( children: [
padding: const EdgeInsets.all(20.0), // Tables Grid - Reduced flex
child: Column( Expanded(
children: [ flex: isDesktop ? 2 : 4, // Reduced from 3/4 to 2/4
Expanded( child: GridView.builder(
child: GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
itemCount: tables.length, crossAxisCount: crossAxisCount,
gridDelegate: crossAxisSpacing: 12,
SliverGridDelegateWithFixedCrossAxisCount( mainAxisSpacing: 12,
crossAxisCount: crossAxisCount, childAspectRatio: isDesktop ? 1.1 : 0.85, // Adjusted
crossAxisSpacing: 16, ),
mainAxisSpacing: 16, itemCount: tables.length,
childAspectRatio: 1.3, itemBuilder: (context, index) {
), final table = tables[index];
itemBuilder: (context, index) { final isSelectable = isTableSelectable(table.status);
final table = tables[index];
final isSelectable = isTableSelectable( return Container(
table.status, decoration: BoxDecoration(
); color: Colors.white,
borderRadius: BorderRadius.circular(12),
return Container( border: Border.all(color: Colors.grey.shade200),
decoration: BoxDecoration( boxShadow: [
color: Colors.white, BoxShadow(
borderRadius: BorderRadius.circular(12), // ignore: deprecated_member_use
border: Border.all( color: Colors.black.withOpacity(0.05),
color: Colors.grey.shade200, blurRadius: 5,
), offset: const Offset(0, 2),
boxShadow: [ ),
BoxShadow( ],
color: Colors.grey.shade100, ),
blurRadius: 4, child: Stack(
offset: const Offset(0, 2), children: [
), // Desktop CRUD menu
], if (isDesktop)
Positioned(
top: 8,
right: 8,
child: PopupMenuButton<String>(
icon: Icon(
Icons.more_vert,
size: 16,
color: Colors.grey.shade600,
), ),
child: Padding( onSelected: (value) {
padding: const EdgeInsets.all(16), switch (value) {
child: Column( case 'edit':
crossAxisAlignment: _editTable(table);
CrossAxisAlignment.start, break;
children: [ case 'delete':
// Table name and status badge _deleteTable(table.id);
Row( break;
mainAxisAlignment: }
MainAxisAlignment.spaceBetween, },
children: [ itemBuilder:
Text( (context) => [
table.nom, const PopupMenuItem(
style: const TextStyle( value: 'edit',
fontWeight: FontWeight.bold, child: Row(
fontSize: 16, children: [
color: Colors.black87, Icon(Icons.edit, size: 16),
), SizedBox(width: 8),
), Text('Modifier'),
Container( ],
padding: ),
const EdgeInsets.symmetric( ),
horizontal: 12, const PopupMenuItem(
vertical: 4, value: 'delete',
), child: Row(
decoration: BoxDecoration( children: [
color: getStatusColor( Icon(
table.status, Icons.delete,
), size: 16,
borderRadius: color: Colors.red,
BorderRadius.circular(20),
), ),
child: Text( SizedBox(width: 8),
getStatusLabel(table.status), Text(
style: const TextStyle( 'Supprimer',
color: Colors.white, style: TextStyle(
fontSize: 9, color: Colors.red,
fontWeight: FontWeight.w500,
), ),
), ),
), ],
], ),
), ),
],
),
),
const SizedBox(height: 12), // Table content
Padding(
// Capacity padding: const EdgeInsets.all(16),
Row( child: Column(
children: [ crossAxisAlignment: CrossAxisAlignment.start,
Icon( children: [
Icons.people_outline, Row(
size: 16, children: [
color: Colors.grey.shade600, Text(
), table.nom,
const SizedBox(width: 6), style: const TextStyle(
Text( fontWeight: FontWeight.w600,
'Capacité: ${table.capacity} personnes', fontSize: 16,
style: TextStyle( color: Colors.black87,
fontSize: 13,
color: Colors.grey.shade600,
),
),
],
), ),
),
const Spacer(), const Spacer(),
Container(
// Button padding: const EdgeInsets.symmetric(
SizedBox( horizontal: 8,
width: double.infinity, vertical: 4,
height: 36, ),
child: ElevatedButton( decoration: BoxDecoration(
onPressed: color: getStatusColor(table.status),
isSelectable ? () {} : null, borderRadius: BorderRadius.circular(
style: ElevatedButton.styleFrom( 12,
backgroundColor:
isSelectable
? Colors.green.shade700
: Colors.grey.shade300,
foregroundColor: Colors.white,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(8),
),
),
child: Text(
isSelectable
? "Sélectionner"
: "Indisponible",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w500,
color:
isSelectable
? Colors.white
: Colors.grey.shade600,
),
),
), ),
), ),
], child: Text(
getStatusLabel(table.status),
style: const TextStyle(
color: Colors.white,
fontSize: 10,
fontWeight: FontWeight.w500,
),
),
),
],
),
const SizedBox(height: 8),
Row(
children: [
Icon(
Icons.people_outline,
size: 16,
color: Colors.grey.shade600,
),
const SizedBox(width: 6),
Text(
'Capacité: ${table.capacity} personnes',
style: TextStyle(
fontSize: 13,
color: Colors.grey.shade600,
),
),
],
),
const Spacer(),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed:
isSelectable
? () {
// Handle table selection
ScaffoldMessenger.of(
context,
).showSnackBar(
SnackBar(
content: Text(
'Table ${table.nom} sélectionnée',
),
),
);
}
: null,
style: ElevatedButton.styleFrom(
backgroundColor:
isSelectable
? Colors.green.shade700
: Colors.grey.shade300,
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(
vertical: 8,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
8,
),
),
),
child: Text(
isSelectable
? 'Sélectionner'
: 'Indisponible',
style: const TextStyle(
color: Colors.white,
fontSize: 12,
),
),
), ),
), ),
); ],
},
),
),
// Legend
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildLegendItem('Disponible', Colors.green),
const SizedBox(width: 24),
_buildLegendItem(
'Occupée',
Colors.green.shade800,
), ),
const SizedBox(width: 24), ),
_buildLegendItem('Réservée', Colors.orange), ],
], ),
), );
], },
), ),
), ),
),
// Bottom Navigation // Legend - Compact
Container(
color: Colors.white,
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
child: Row(
children: [
Container( Container(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(vertical: 16),
horizontal: 16, child: Row(
vertical: 8, mainAxisAlignment: MainAxisAlignment.center,
),
decoration: BoxDecoration(
color: Colors.green.shade700,
borderRadius: BorderRadius.circular(20),
),
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [ children: [
Icon( _buildLegendItem('Disponible', Colors.green),
Icons.table_restaurant, const SizedBox(width: 20),
color: Colors.white, _buildLegendItem('Occupée', Colors.orange),
size: 16, const SizedBox(width: 20),
), _buildLegendItem('Réservée', Colors.orange),
SizedBox(width: 6),
Text(
'Tables',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
], ],
), ),
), ),
const SizedBox(width: 20),
Row(
children: [
Icon(
Icons.receipt_long_outlined,
color: Colors.grey.shade600,
size: 16,
),
const SizedBox(width: 6),
Text(
'Commandes',
style: TextStyle(color: Colors.grey.shade600),
),
],
),
const Spacer(),
Row(
children: [
Icon(
Icons.person_outline,
color: Colors.grey.shade600,
size: 16,
),
const SizedBox(width: 6),
Text(
'Chef Pierre',
style: TextStyle(color: Colors.grey.shade600),
),
const SizedBox(width: 8),
Icon(
Icons.expand_more,
color: Colors.grey.shade600,
size: 16,
),
],
),
], ],
), ),
), ),
], ),
), ],
); );
} }
@ -390,3 +534,133 @@ class _TablesScreenState extends State<TablesScreen> {
); );
} }
} }
// Add/Edit Table Dialog
class _AddEditTableDialog extends StatefulWidget {
final TableData? table;
const _AddEditTableDialog({this.table});
@override
_AddEditTableDialogState createState() => _AddEditTableDialogState();
}
class _AddEditTableDialogState extends State<_AddEditTableDialog> {
final _formKey = GlobalKey<FormState>();
late TextEditingController _nomController;
late TextEditingController _capacityController;
String _selectedStatus = 'available';
final List<Map<String, String>> _statusOptions = [
{'value': 'available', 'label': 'Disponible'},
{'value': 'occupied', 'label': 'Occupée'},
{'value': 'reserved', 'label': 'Réservée'},
];
@override
void initState() {
super.initState();
_nomController = TextEditingController(text: widget.table?.nom ?? '');
_capacityController = TextEditingController(
text: widget.table?.capacity.toString() ?? '',
);
_selectedStatus = widget.table?.status ?? 'available';
}
@override
void dispose() {
_nomController.dispose();
_capacityController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final isEditing = widget.table != null;
return AlertDialog(
title: Text(isEditing ? 'Modifier la table' : 'Ajouter une table'),
content: Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextFormField(
controller: _nomController,
decoration: const InputDecoration(
labelText: 'Nom de la table',
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Veuillez entrer un nom';
}
return null;
},
),
const SizedBox(height: 16),
TextFormField(
controller: _capacityController,
decoration: const InputDecoration(
labelText: 'Capacité',
border: OutlineInputBorder(),
),
keyboardType: TextInputType.number,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Veuillez entrer la capacité';
}
if (int.tryParse(value) == null) {
return 'Veuillez entrer un nombre valide';
}
return null;
},
),
const SizedBox(height: 16),
DropdownButtonFormField<String>(
value: _selectedStatus,
decoration: const InputDecoration(
labelText: 'Statut',
border: OutlineInputBorder(),
),
items:
_statusOptions.map((option) {
return DropdownMenuItem<String>(
value: option['value'],
child: Text(option['label']!),
);
}).toList(),
onChanged: (value) {
setState(() {
_selectedStatus = value!;
});
},
),
],
),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Annuler'),
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
final result = {
'nom': _nomController.text,
'capacity': int.parse(_capacityController.text),
'status': _selectedStatus,
};
Navigator.pop(context, result);
}
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green.shade700,
),
child: Text(isEditing ? 'Modifier' : 'Ajouter'),
),
],
);
}
}

130
lib/widgets/bottom_navigation.dart
View File

@ -0,0 +1,130 @@
import 'package:flutter/material.dart';
class AppBottomNavigation extends StatelessWidget {
final int selectedIndex;
final Function(int) onItemTapped;
final bool isDesktop;
const AppBottomNavigation({
super.key,
required this.selectedIndex,
required this.onItemTapped,
this.isDesktop = false,
});
@override
Widget build(BuildContext context) {
if (isDesktop) return const SizedBox.shrink();
return Container(
color: Colors.white,
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
child: Row(
children: [
// Tables Tab
GestureDetector(
onTap: () => onItemTapped(0),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color:
selectedIndex == 0
? Colors.green.shade700
: Colors.transparent,
borderRadius: BorderRadius.circular(20),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.table_restaurant,
color:
selectedIndex == 0
? Colors.white
: Colors.grey.shade600,
size: 16,
),
const SizedBox(width: 6),
Text(
'Tables',
style: TextStyle(
color:
selectedIndex == 0
? Colors.white
: Colors.grey.shade600,
fontWeight:
selectedIndex == 0
? FontWeight.w500
: FontWeight.normal,
),
),
],
),
),
),
const SizedBox(width: 20),
// Commandes Tab
GestureDetector(
onTap: () => onItemTapped(1),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color:
selectedIndex == 1
? Colors.green.shade700
: Colors.transparent,
borderRadius: BorderRadius.circular(20),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.receipt_long_outlined,
color:
selectedIndex == 1
? Colors.white
: Colors.grey.shade600,
size: 16,
),
const SizedBox(width: 6),
Text(
'Commandes',
style: TextStyle(
color:
selectedIndex == 1
? Colors.white
: Colors.grey.shade600,
fontWeight:
selectedIndex == 1
? FontWeight.w500
: FontWeight.normal,
),
),
],
),
),
),
const Spacer(),
// User Profile Section
_buildUserProfile(),
],
),
);
}
Widget _buildUserProfile() {
return Row(
children: [
Icon(Icons.person_outline, color: Colors.grey.shade600, size: 16),
const SizedBox(width: 6),
Text('Chef Pierre', style: TextStyle(color: Colors.grey.shade600)),
const SizedBox(width: 8),
Icon(Icons.expand_more, color: Colors.grey.shade600, size: 16),
],
);
}
}

66
lib/widgets/mobile_bottom_navigation.dart
View File

@ -0,0 +1,66 @@
import 'package:flutter/material.dart';
class MobileBottomNavigation extends StatelessWidget {
final int selectedIndex;
final Function(int) onItemTapped;
const MobileBottomNavigation({
super.key,
required this.selectedIndex,
required this.onItemTapped,
});
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
padding: const EdgeInsets.symmetric(vertical: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildBottomNavItem(
icon: Icons.table_restaurant,
label: 'Tables',
index: 0,
),
_buildBottomNavItem(
icon: Icons.receipt_long_outlined,
label: 'Commandes',
index: 1,
),
],
),
);
}
Widget _buildBottomNavItem({
required IconData icon,
required String label,
required int index,
}) {
final isSelected = selectedIndex == index;
return GestureDetector(
onTap: () => onItemTapped(index),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
icon,
color: isSelected ? Colors.green.shade700 : Colors.grey.shade600,
size: 24,
),
const SizedBox(height: 4),
Text(
label,
style: TextStyle(
color: isSelected ? Colors.green.shade700 : Colors.grey.shade600,
fontSize: 12,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
),
),
],
),
);
}
}
Write Preview
Loading…
Cancel
Save