at the moment this code
import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import 'package:uuid/uuid.dart'; // Import for UUID
import '../item.dart'; // Ensure your Item class is updated as discussed previously

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> {
  List<Item> _filteredItems = List.from(items);
  String _searchQuery = "";
  String _selectedGroup = 'Family'; // Default group
  final TextEditingController _searchController = TextEditingController();
  final ScrollController _scrollController = ScrollController();

  // Controllers for adding new items
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _quantityController = TextEditingController();
  final TextEditingController _unitController = TextEditingController();
  final FocusNode _nameFocusNode = FocusNode();
  bool _isDuplicateName = false;

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

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

  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);
    });
  }

  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 _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")),
                );
              },
            ),
          ],
        );
      },
    );
  }

  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 &&
                  _quantityController.text.isNotEmpty &&
                  _unitController.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'),
                    ),
                    SizedBox(height: 20.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        TextButton(
                          child: const Text('Cancel'),
                          onPressed: () {
                            _clearTextControllers();
                            Navigator.of(context).pop();
                          },
                        ),
                        TextButton(
                          onPressed: isFormValid()
                              ? () {
                                  setState(() {
                                    items.add(Item(
                                      name: _nameController.text.trim(),
                                      quantity: double.tryParse(
                                              _quantityController.text.trim()) ??
                                          0.0,
                                      unit: _unitController.text.trim(),
                                      group: _selectedGroup,
                                    ));
                                    _sortItems();
                                    _clearTextControllers();
                                  });
                                  Navigator.of(context).pop();
                                }
                              : null,
                          child: const Text('Add'),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            );
          },
        );
      },
    );
  }

  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();
    _isDuplicateName = false;
  }

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

  void _scrollToBottom() {
    _scrollController.animateTo(
      _scrollController.position.maxScrollExtent,
      duration: Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }

  @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,
            );
          },
        ),
      ),
      drawer: SizedBox(
        width: MediaQuery.of(context).size.width * 0.75,
        child: Drawer(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            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.add_circle),
                title: Text('Create New List'),
                onTap: () {
                  Navigator.pop(context);
                  _showCreateNewListDialog();
                },
              ),
              ListTile(
                leading: Icon(widget.isDarkTheme ? Icons.wb_sunny : Icons.nightlight_round),
                title: Text('Toggle Theme'),
                onTap: () {
                  Navigator.pop(context);
                  widget.toggleTheme();
                },
              ),
              ListTile(
                leading: const Icon(Icons.settings),
                title: const Text('Settings'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                leading: Icon(Icons.logout),
                title: Text('Logout'),
                onTap: () async {
                  await Supabase.instance.client.auth.signOut();
                  Navigator.of(context).pushReplacementNamed('/auth');
                },
              ),
            ],
          ),
        ),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                SizedBox(
                  width: MediaQuery.of(context).size.width * 0.3,
                  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(),
                  ),
                ),
                SizedBox(width: 10.0),
                Spacer(),
                SizedBox(
                  width: MediaQuery.of(context).size.width * 0.375,
                  child: TextField(
                    controller: _searchController,
                    onChanged: _filterItems,
                    decoration: InputDecoration(
                      labelText: 'Search',
                      border: OutlineInputBorder(),
                      isDense: true,
                      contentPadding: 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 = 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: () {
                              // Implement edit functionality
                            },
                          ),
                          Transform.scale(
                            scale: 1.15,
                            child: Checkbox(
                              shape: CircleBorder(),
                              value: item.picked,
                              onChanged: (bool? newValue) {
                                _toggleItemPicked(item);
                              },
                            ),
                          ),
                        ],
                      ),
                      onTap: () {
                        _toggleItemPicked(item);
                      },
                    ),
                  ),
                );
              },
            ),
          ),
          SizedBox(height: 16.0),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(width: 20.0),
              SizedBox(
                width: 48,
                height: 48,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    padding: EdgeInsets.zero,
                  ),
                  onPressed: _scrollToBottom,
                  child: const Icon(Icons.arrow_downward),
                ),
              ),
              SizedBox(width: 8.0),
              SizedBox(
                width: 48,
                height: 48,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    padding: EdgeInsets.zero,
                  ),
                  onPressed: _scrollToTop,
                  child: const Icon(Icons.arrow_upward),
                ),
              ),
              Spacer(),
              ElevatedButton.icon(
                onPressed: _addItem,
                icon: const Icon(Icons.add),
                label: const Text('Add Item'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.lightBlueAccent,
                  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
                  textStyle: TextStyle(fontSize: 18),
                  elevation: 3,
                ),
              ),
              SizedBox(width: 20.0),
            ],
          ),
          SizedBox(height: 16.0),
        ],
      ),
    );
  }

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

  String formatQuantity(double quantity, String unit) {
    if (quantity == quantity.toInt()) {
      return '${quantity.toInt()} $unit';
    } else {
      return '$quantity $unit';
    }
  }

  void _showCreateNewListDialog() {
    final TextEditingController _listNameController = TextEditingController();

    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text('Create New List'),
          content: TextField(
            controller: _listNameController,
            decoration: InputDecoration(hintText: "List Name"),
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Cancel'),
            ),
            TextButton(
              onPressed: () {
                final listName = _listNameController.text.trim();
                if (listName.isNotEmpty) {
                  _createNewList(listName);
                  Navigator.pop(context);
                }
              },
              child: Text('Create'),
            ),
          ],
        );
      },
    );
  }

  void _createNewList(String name) {
    final uuid = Uuid();
    final listId = uuid.v4(); // Generate a unique UUID

    // This is where you'd typically add logic to store the 
    // new list data along with the UUID (e.g., in Supabase or local storage).
    print("Created new list: $name with ID: $listId");

    // You can implement your logic here, such as navigating to another page where this list will be used.
  }
}

user this file
// lib/item.dart

class Item {
  final String name;
  final double quantity; // Use double to handle both whole numbers and decimals
  final String unit;
  //final String userInitial;
  final String group;
  bool picked;

  Item({
    required this.name,
    required this.quantity,
    required this.unit,
    //required this.userInitial,
    required this.group,
    this.picked = false,
  });
}

final List<Item> items = [
  Item(name: 'Apples', quantity: 5, unit: 'kg', group: 'Family'),
  Item(name: 'Bananas', quantity: 12, unit: 'pcs', group: 'Timos Party'),
  Item(name: 'Bread', quantity: 2, unit: 'loaves', group: 'Family'),
  Item(name: 'Carrots', quantity: 3.5, unit: 'kg', group: 'Family'),
  Item(name: 'Detergent', quantity: 1, unit: 'bottle', group: 'Family'),
  Item(name: 'Eggs', quantity: 30, unit: 'pcs', group: 'Timos Party'),
  Item(name: 'Flour', quantity: 2.25, unit: 'kg', group: 'Family'),
  Item(name: 'Grapes', quantity: 1.5, unit: 'bag', group: 'Timos Party'),
  Item(name: 'Honey', quantity: 1, unit: 'jar', group: 'Family'),
  Item(name: 'Ice Cream', quantity: 2, unit: 'liters', group: 'Timos Party'),
  Item(name: 'Juice', quantity: 4, unit: 'liters', group: 'Family'),
  Item(name: 'Kale', quantity: 1, unit: 'bag', group: 'Family'),
  Item(name: 'Lemons', quantity: 10, unit: 'pcs', group: 'Family'),
  Item(name: 'Milk', quantity: 3, unit: 'liters', group: 'Family'),
  Item(name: 'Nuts', quantity: 200, unit: 'g', group: 'Timos Party'),
  Item(name: 'Oranges', quantity: 7, unit: 'pcs', group: 'Family'),
  Item(name: 'Pasta', quantity: 1, unit: 'kg', group: 'Family'),
  Item(name: 'Quinoa', quantity: 0.75, unit: 'bag', group: 'Family'),
  Item(name: 'Rice', quantity: 5, unit: 'kg', group: 'Family'),
  Item(name: 'Strawberries', quantity: 2, unit: 'boxes', group: 'Timos Party'),
  Item(name: 'Tomatoes', quantity: 1, unit: 'kg', group: 'Family'),
  Item(name: 'Umbrellas', quantity: 3, unit: 'pcs', group: 'Timos Party'),
  Item(name: 'Watermelon', quantity: 1, unit: 'pcs', group: 'Timos Party'),
  Item(name: 'Watermelon', quantity: 1, unit: 'pcs', group: 'Family'),
];

// Note: Ensure all entries have non-null values.

to store valuse

Please convert for using Supabse using a local first paradine