How to customize the menu in Flutter? - flutter

Question

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?
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']),
),
),
),
);
},
),
],
),
)
),
],
)
],
);
}
}

Answer 1

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