0

I have a list of items. Each item has a button to show a sub-menu to do some action. I want to show only a sub-menu and hide others. When I tap an IconButton it shows and hides a sub-menu and works correctly but when another item sub-menu is open and I tap the other one I can not handle hiding the other opened sub-menu and opening the newly tapped one.

Here is a screenshot : enter image description here

Here is the list builder

class List extends StatelessWidget {
  const List({super.key, this.items});
  final List<ListItem> items;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {
        return ItemListTile(
          miner: items[index],
        );
      },
      itemCount: items.length,
    );
  }
}

Here is the ItemListTile code:

class ItemListTile extends StatelessWidget {
  const ItemListTile({super.key, this.item});
  final Item item;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text('title'),
      trailing: IconButton(
        onPressed: () {
          // How to toggle menus open and close state?
          if (isOpen) {
            closeMenu();
          } else {
            openMenu();
          }
        },
        icon: const Icon(
          Icons.more_vert_outlined,
          color: Colors.white,
        ),
        color: Colors.white,
      ),
    );
  }

  void openMenu() {
    // How to handle state?
    findButton();
    overlayEntry = _overlayEntryBuilder();
    Overlay.of(context, debugRequiredFor: widget).insert(overlayEntry!);
  }

  void closeMenu() {
    // How to handle state?
    overlayEntry?.remove();
  }

  @override
  void dispose() {
    overlayEntry?.remove();
    overlayEntry = null;
    super.dispose();
  }
}

I want to learn to solve this problem using stateful widgets or Bloc pattern. Thanks in advance.

zex_rectooor
  • 692
  • 7
  • 26

1 Answers1

0

I'm sorry for using setstate because I don't know what kind of state management you are using, but I can show you a simple example of how to close others while one is open:

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

class ExampleApp extends StatefulWidget {
const ExampleApp({super.key});

@override
State<ExampleApp> createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
late int activeItem;
@override
void initState() {
activeItem =-1;
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
  body: ListView.builder(
    itemCount: 5,
    itemBuilder: ((context, index) {
    return ListTile(
      title: Text("$index-title"),
      trailing: IconButton(onPressed: (){
        if(activeItem==index){
          closeMenu();
          activeItem=-1;
          setState(() {});

          }else{
            openMenu();
            activeItem =index;
            setState(() {});
          }
      }, icon: Icon(activeItem==index?Icons.more_vert:Icons.more_horiz)),
      subtitle: Text(activeItem==index?"Opened Subtitle":"closed 
Subtitle"),
    );
  })),
);
}
closeMenu(){
//Some logic here
}
openMenu(){
//Some logic here
}
}
Wodota ML
  • 76
  • 5