using this code
// lib/pages/shopping_list_page.dart
import 'package:flutter/material.dart';
import '../item.dart'; // Ensure the correct path

class ShoppingListPage extends StatefulWidget {
  final Function toggleTheme;
  final bool isDarkTheme;

  const ShoppingListPage({super.key, required this.toggleTheme, required this.isDarkTheme});

  @override
  State<ShoppingListPage> createState() => _ShoppingListPageState();
}

class _ShoppingListPageState extends State<ShoppingListPage> {
  int _selectedIndex = 0;
  String _searchQuery = "";
  String _selectedGroup = 'Family'; // Default selected group
  List<Item> _filteredItems = List.from(items);
  final TextEditingController _searchController = TextEditingController();
  final ScrollController _scrollController = ScrollController();
  Color? _highlightColor;

  // Controllers for adding new items
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _quantityController = TextEditingController();
  final TextEditingController _unitController = TextEditingController();
  final TextEditingController _userInitialController = TextEditingController();

  // Using StateSetter for updating the duplicate check
  FocusNode _nameFocusNode = FocusNode();
  bool _isDuplicateName = false;

  List<String> _getGroups() {
    return items.map((item) => item.group).toSet().toList();
  }

  @override
  void initState() {
    super.initState();
    _sortItems(); // Initial sorting
  }

  @override
  void dispose() {
    _nameController.dispose();
    _quantityController.dispose();
    _unitController.dispose();
    _userInitialController.dispose();
    _nameFocusNode.dispose();
    super.dispose();
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  void _filterItems(String query) {
    setState(() {
      _searchQuery = query;
      _sortItems();
    });
  }

  void _clearSearch() {
    _searchController.clear();
    setState(() {
      _searchQuery = "";
      _sortItems();
    });
  }

  void _toggleItemPicked(Item item) {
    setState(() {
      item.picked = !item.picked;
      _filteredItems.remove(item);
      _filteredItems.insert(0, item); // Move item to the top

      _highlightColor = widget.isDarkTheme ? Colors.tealAccent[700] : Colors.lightBlue[100];

      _scrollController.animateTo(
        0.0,
        duration: Duration(milliseconds: 300),
        curve: Curves.easeInOut,
      );
    });

    Future.delayed(Duration(milliseconds: 800)).then((_) {
      setState(() {
        _highlightColor = null; // Clear highlight color
        _clearSearch(); // Clear search after changing item state
        _sortItems(); // Re-sort items
      });
    });
  }

  void _sortItems() {
    _filteredItems =
        items.where((item) => item.group == _selectedGroup).toList();
    if (_searchQuery.isNotEmpty) {
      _filteredItems = _filteredItems
          .where((item) =>
              item.name.toLowerCase().contains(_searchQuery.toLowerCase()))
          .toList();
    }

    _filteredItems.sort((a, b) {
      if (a.picked && !b.picked) return -1;
      if (!a.picked && b.picked) return 1;
      return a.name.compareTo(b.name);
    });
  }

  void _addItem() {
    _showDialogToAddItem();
  }

  void _editItem(Item item) {
    print("Edit item clicked: ${item.name}");
    // Implement your edit functionality here
  }

  void _showDialogToAddItem() {
    final textColor = widget.isDarkTheme ? Colors.white : Colors.black;

    showDialog(
      context: context,
      builder: (BuildContext context) {
        return StatefulBuilder(
          builder: (context, setState) {
            bool isFormValid() {
              return _nameController.text.isNotEmpty &&
                  !_isDuplicateName && // Include duplicate check in form validation
                  _quantityController.text.isNotEmpty &&
                  _unitController.text.isNotEmpty &&
                  _userInitialController.text.isNotEmpty;
            }

            return AlertDialog(
              title: const Text('Add New Item'),
              content: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    RichText(
                      text: TextSpan(
                        children: [
                          TextSpan(
                            text: 'Group: ',
                            style: TextStyle(
                              fontSize: 16.0,
                              color: textColor,
                            ),
                          ),
                          TextSpan(
                            text: _selectedGroup,
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 18.0,
                              color: textColor,
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(height: 8.0),
                    TextField(
                      controller: _nameController,
                      focusNode: _nameFocusNode,
                      decoration: InputDecoration(
                        labelText: 'Name',
                        errorText:
                            _isDuplicateName ? 'Item already exists in this group' : null,
                      ),
                      onChanged: (text) {
                        setState(() {
                          _isDuplicateName = _itemExistsForGroup(
                              text.trim(), _selectedGroup);
                        });
                      },
                      onTap: () {
                        setState(() {
                          _isDuplicateName = false;
                        });
                      },
                    ),
                    TextField(
                      controller: _quantityController,
                      decoration: const InputDecoration(labelText: 'Quantity'),
                      keyboardType: TextInputType.number,
                    ),
                    TextField(
                      controller: _unitController,
                      decoration: const InputDecoration(labelText: 'Unit'),
                    ),
                    TextField(
                      controller: _userInitialController,
                      decoration: const InputDecoration(labelText: 'User Initial'),
                    ),
                    SizedBox(height: 20.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        TextButton(
                          child: const Text('Cancel'),
                          onPressed: () {
                            _clearTextControllers();
                            Navigator.of(context).pop();
                          },
                        ),
                        TextButton(
                          child: const Text('Add'),
                          onPressed: isFormValid()
                              ? () {
                                  setState(() {
                                    items.add(Item(
                                      name: _nameController.text.trim(),
                                      quantity: double.tryParse(
                                              _quantityController.text
                                                  .trim()) ??
                                          0.0,
                                      unit: _unitController.text.trim(),
                                      userInitial: _userInitialController.text
                                          .trim()
                                          .toUpperCase(),
                                      group: _selectedGroup,
                                    ));
                                    _sortItems();
                                    _clearTextControllers();
                                  });
                                  Navigator.of(context).pop();
                                }
                              : null, // Disable button if form is not valid
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            );
          },
        );
      },
    );
  }

  bool _itemExistsForGroup(String name, String group) {
    return items
        .any((item) => item.name.toLowerCase() == name.toLowerCase() && item.group == group);
  }

  void _clearTextControllers() {
    _nameController.clear();
    _quantityController.clear();
    _unitController.clear();
    _userInitialController.clear();
    _isDuplicateName = false;
  }

  void _confirmDeleteItem(Item item) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Confirm Delete'),
          content: Text('Are you sure you want to delete ${item.name}?'),
          actions: [
            TextButton(
              child: const Text('Cancel'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            TextButton(
              child: const Text('Delete'),
              onPressed: () {
                setState(() {
                  items.remove(item);
                  _sortItems();
                });
                Navigator.of(context).pop();
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text("${item.name} deleted")),
                );
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    final rowColorsDefault = widget.isDarkTheme
        ? [Colors.grey[900]!, Colors.grey[850]!]
        : [Colors.blue[50]!, Colors.blue[100]!];

    final pickedRowColors = widget.isDarkTheme
        ? [Colors.teal[800]!.withOpacity(0.5), Colors.teal[700]!.withOpacity(0.5)]
        : [Colors.green[100]!, Colors.green[50]!];

    final groups = _getGroups();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Shopping List'),
        leading: Builder(
          builder: (BuildContext context) {
            return IconButton(
              icon: const Icon(Icons.menu),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
            );
          },
        ),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.add),
            onPressed: _addItem, // Add button functionality
            tooltip: 'Add Item',
          ),
          // Removed the edit icon
        ],
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text(
                'Menu',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: const Icon(Icons.home),
              title: const Text('Home'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.account_circle),
              title: const Text('Profile'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: const Icon(Icons.settings),
              title: const Text('Settings'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              leading: Icon(widget.isDarkTheme ? Icons.wb_sunny : Icons.nightlight_round),
              title: Text('Toggle Theme'),
              onTap: () {
                Navigator.pop(context);
                widget.toggleTheme();
              },
            ),
          ],
        ),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                SizedBox(
                  width: MediaQuery.of(context).size.width * 0.4,
                  child: DropdownButton<String>(
                    isExpanded: true,
                    value: _selectedGroup,
                    icon: const Icon(Icons.arrow_downward),
                    onChanged: (String? newValue) {
                      setState(() {
                        _selectedGroup = newValue ?? _selectedGroup;
                        _sortItems();
                      });
                    },
                    items: groups.map<DropdownMenuItem<String>>((String group) {
                      return DropdownMenuItem<String>(
                        value: group,
                        child: Text(group),
                      );
                    }).toList(),
                  ),
                ),
                Spacer(),
                SizedBox(
                  width: MediaQuery.of(context).size.width * 0.45,
                  height: 40.0,
                  child: TextField(
                    controller: _searchController,
                    onChanged: _filterItems,
                    decoration: InputDecoration(
                      labelText: 'Search',
                      border: const OutlineInputBorder(),
                      isDense: true,
                      contentPadding: const EdgeInsets.all(8.0),
                      suffixIcon: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          const Icon(Icons.search),
                          IconButton(
                            icon: const Icon(Icons.cancel),
                            onPressed: _clearSearch,
                          ),
                        ],
                      ),
                    ),
                    keyboardType: TextInputType.text,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              controller: _scrollController,
              itemCount: _filteredItems.length,
              itemBuilder: (context, index) {
                final item = _filteredItems[index];
                final isPicked = item.picked;
                final backgroundColor = index == 0 && _highlightColor != null
                    ? _highlightColor
                    : (isPicked
                        ? pickedRowColors[index % pickedRowColors.length]
                        : rowColorsDefault[index % rowColorsDefault.length]);

                return Dismissible(
                  key: UniqueKey(),
                  confirmDismiss: (direction) async {
                    bool? result = await showDialog(
                      context: context,
                      builder: (context) {
                        return AlertDialog(
                          title: const Text('Confirm Delete'),
                          content: Text('Are you sure you want to delete ${item.name}?'),
                          actions: [
                            TextButton(
                              child: const Text('Cancel'),
                              onPressed: () {
                                Navigator.of(context).pop(false);
                              },
                            ),
                            TextButton(
                              child: const Text('Delete'),
                              onPressed: () {
                                Navigator.of(context).pop(true);
                              },
                            ),
                          ],
                        );
                      },
                    );
                    return result ?? false;
                  },
                  onDismissed: (direction) {
                    setState(() {
                      items.remove(item);
                      _sortItems();
                    });
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text("${item.name} deleted")),
                    );
                  },
                  background: Container(color: Colors.red),
                  child: Container(
                    color: backgroundColor,
                    child: ListTile(
                      contentPadding:
                          const EdgeInsets.symmetric(horizontal: 12.0, vertical: 0.0),
                      dense: true,
                      title: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            item.name,
                            style: TextStyle(
                              color: widget.isDarkTheme ? Colors.white : Colors.black,
                            ),
                          ),
                          Text(
                            formatQuantity(item.quantity, item.unit),
                            style: TextStyle(
                              color: widget.isDarkTheme ? Colors.white : Colors.black,
                            ),
                          ),
                        ],
                      ),
                      trailing: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          IconButton(
                            icon: Icon(Icons.edit, color: Colors.grey),
                            onPressed: () => _editItem(item),
                          ),
                          CircleAvatar(
                            backgroundColor: Colors.blue,
                            child: Text(
                              item.userInitial,
                              style: const TextStyle(color: Colors.white),
                            ),
                          ),
                          Transform.scale(
                            scale: 1.15,
                            child: Checkbox(
                              shape: CircleBorder(),
                              value: item.picked,
                              onChanged: (bool? newValue) {
                                _toggleItemPicked(item);
                              },
                            ),
                          ),
                        ],
                      ),
                      onTap: () => _toggleItemPicked(item),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: 'List',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_cart),
            label: 'Cart',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.account_circle),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped,
      ),
    );
  }

  String formatQuantity(double quantity, String unit) {
    if (quantity == quantity.toInt()) {
      return '${quantity.toInt()} $unit'; // Display as integer if it's whole
    } else {
      return '$quantity $unit'; // Display as double for decimals
    }
  }
}
remove the bottom nav bar