Home > Net >  How to customize the menu in Flutter?
How to customize the menu in Flutter?

Time:05-11

I'm developing a dynamic menu in Getx and I'm iterating through a list. It wouldn't be a problem if all the menus were the same, the problem is that the Editores menu is not the default as you can see in the image. Is there a way to leverage my code and print the Editores menu to the screen?

enter image description here

Controller

class HomeController extends GetxController {
  final HomeRepository repository;
  HomeController(this.repository);
  final searchDrawerEC = TextEditingController();

  //Variáveis para compor o menu
  final _selectedIndex = 0.obs;
  int get selectedIndex => _selectedIndex.value;
  set selectedIndex(int newValue) => _selectedIndex(newValue);
  final items = [].obs;


  @override
  void onInit() {
    items.add(
      {
        'titulo': 'Home',
        'icone': const Icon(
          Icons.house_rounded,
          color: Colors.white,
        ),
        'rota': Routes.home,
      },
    );

    items.add(
      {
        'titulo': 'Novas Edições',
        'icone': Image.asset(AppImages.novasEdicoes),
        'rota': Routes.newEditions,
      },
    );

    items.add(
      {
        'titulo': 'Editores',
        'icone': Image.asset(AppImages.editores),
        'rota': '/',
      },
    );

    items.add(
      {
        'titulo': 'Seguindo',
        'icone': Image.asset(AppImages.seguinte),
        'rota': '/',
      },
    );

    items.add(
      {
        'titulo': 'Favoritos',
        'icone': Image.asset(AppImages.favorite),
        'rota': Routes.favoriteds,
      },
    );

    items.add(
      {
        'titulo': 'Net',
        'icone': Image.asset(AppImages.net1),
        'rota': '/',
      },
    );

    items.add(
      {
        'titulo': 'Configurações',
        'icone': const Icon(
          Icons.settings,
          color: Colors.white,
        ),
        'rota': '/',
      },
    );

    items.add(
      {
        'titulo': 'MMN',
        'icone': const Icon(
          Icons.person,
          color: Colors.white,
        ),
        'rota': '/',
      },
    );

    super.onInit();
  }

Page

class DrawerContentWidget extends GetView<HomeController> {
  final int? editores;
  final bool? showEditores;


  // ignore: use_key_in_widget_constructors
  const DrawerContentWidget({this.editores, this.showEditores});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CardInfoWidget(
          showNet: false,
          showEdit: true,
          color: const Color(0XFF005E6C),
          editor: Get.find<AppController>().currentUser,
        ),
        Column(
          children: [
            Obx(() => SizedBox(
              height: 200,
              child: Column(
                children: [
                  ListView.builder(
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemCount: controller.items.length,
                    itemBuilder: (_, index) {
                      final _item = controller.items[index];
                      return Obx(() => Container(
                        decoration: (controller.selectedIndex == index)
                            ? const BoxDecoration(
                          border: Border(
                            top: BorderSide(width: 3.0, color: Colors.white),
                            bottom: BorderSide(width: 3.0, color: Colors.white),
                          ),
                        )
                            : null,
                        child: Card(
                          color: const Color(0XFF007E94),
                          elevation: 3,
                          child: ListTile(
                            title: Text(
                              _item['titulo'],
                              style: const TextStyle(color: Colors.white),
                            ),

                            leading: _item['icone'],
                            selected: (controller.selectedIndex == index),
                            onTap: () => Get.toNamed(_item['rota']),
                          ),
                        ),
                      ),
                      );
                    },
                  ),
                ],
              ),
            )
            ),
          ],
        )
      ],
    );
  }
}

CodePudding user response:

Solved, envolve the card in some OBX then use the controller.selectedIndex = index with the route like this.

onTap: () {
     controller.selectedIndex = index ;
     Get.toNamed(_item['rota']);
}
  • Related