Getx in not updating value in navigation rails flutter - flutter

Question

I am using Obx in the navigation rails and updating the text widget. When I tap on the filter by source widget and select some values it does not update the length/count but when I tap on the filter by country widget the filter by a source shows the count. Same for the widget filter by country. It does not update the value in real-time. This is my rails widget
NavigationRail(
selectedIndex: homeController.rails.value,
onDestinationSelected: (int index) {
homeController.rails.value = index;
},
labelType: NavigationRailLabelType.all,
destinations: <NavigationRailDestination>[
const NavigationRailDestination(
icon: Icon(Icons.list_alt_sharp),
selectedIcon: Icon(Icons.list_alt),
label: Text('Layouts'),
),
const NavigationRailDestination(
icon: Icon(Icons.language_outlined),
selectedIcon: Icon(Icons.language),
label: Text('Filter by language'),
),
NavigationRailDestination(
icon: const Icon(Icons.source_outlined),
selectedIcon: const Icon(Icons.source),
label: Obx(() => Text(
'Filter by source ${homeController.filterSources.value.length}'))),
NavigationRailDestination(
icon: const Icon(FontAwesomeIcons.earthAsia),
selectedIcon:
const FaIcon(FontAwesomeIcons.earthAsia),
label: Obx(
() => Text(
'Filter by country ${homeController.filterCountry.value.length}'),
)),
],
),
This is my get controller
class HomeController extends GetxController {
var filterCountry = [].obs;
var filterSources = [].obs;
void filterCountryFunc(String e) {
if (filterCountry.value.contains(e)) {
filterCountry.value.remove(e);
} else {
filterCountry.value.add(e);
}
update();
}
void filterSourcesFunc(String e) {
if (filterSources.value.contains(e)) {
filterSources.value.remove(e);
} else {
filterSources.value.add(e);
}
update();
}
}
This is my complete dart stateful class
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:get/get.dart';
import 'package:newsconnects/constants.dart';
import 'package:newsconnects/controllers/home_controller.dart';
import 'package:newsconnects/controllers/sources_controller.dart';
import 'package:newsconnects/translations/helper.dart';
import 'package:newsconnects/views/widgets/custom_checkBoxTile.dart';
import 'news_view.dart';
class HomeView extends StatefulWidget {
HomeView({Key? key}) : super(key: key);
#override
State<HomeView> createState() => _HomeViewState();
}
class _HomeViewState extends State<HomeView>
with SingleTickerProviderStateMixin {
late TabController controller;
late final List<String> _syncChannels = [];
HomeController homeController = Get.put(HomeController());
SourcesController sourcesController = Get.find<SourcesController>();
final List _screens = <Widget>[
const NewsView(),
Center(
child: Text(t.getText('notifications')),
),
const Center(
child: Text('Politics'),
),
];
#override
void initState() {
controller = TabController(length: 3, vsync: this);
super.initState();
print('Home');
_resources();
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
toolbarHeight: 75.0,
leadingWidth: 90,
leading: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
GestureDetector(
onTap: () {},
child: const Icon(
Icons.refresh,
size: 30.0,
),
),
InkWell(
onTap: () => _showModelSheet(context),
child: const Icon(
Icons.add_box_sharp,
size: 30.0,
),
),
const Icon(
Icons.search,
size: 30.0,
),
]),
centerTitle: true,
title: const Center(
child: Text('NewsConnect'),
),
actions: [
const Center(
child: Text(
'Options',
style: TextStyle(fontSize: 14),
),
),
IconButton(onPressed: () {}, icon: const Icon(Icons.more_vert))
],
bottom: PreferredSize(
preferredSize: const Size.fromHeight(30.0),
child: TabBar(
controller: controller,
isScrollable: true,
unselectedLabelColor: Colors.white.withOpacity(0.3),
indicatorColor: Colors.white,
tabs: const [
Tab(
child: Text('All News'),
),
Tab(
child: Text('Notifications'),
),
Tab(
child: Text('Politics'),
),
]),
),
),
body: TabBarView(
controller: controller,
children: <Widget>[..._screens],
),
);
}
_showModelSheet(BuildContext context) {
showModalBottomSheet(
context: context,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(25.0)),
),
builder: (context) {
return SizedBox(
height: 400.0,
child: Container(
padding: const EdgeInsets.all(16),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0))),
child: Obx(
() => Column(
children: [
Expanded(
flex: 2,
child: Row(
children: <Widget>[
NavigationRail(
selectedIndex: homeController.rails.value,
onDestinationSelected: (int index) {
homeController.rails.value = index;
},
labelType: NavigationRailLabelType.all,
destinations: <NavigationRailDestination>[
const NavigationRailDestination(
icon: Icon(Icons.list_alt_sharp),
selectedIcon: Icon(Icons.list_alt),
label: Text('Layouts'),
),
const NavigationRailDestination(
icon: Icon(Icons.language_outlined),
selectedIcon: Icon(Icons.language),
label: Text('Filter by language'),
),
NavigationRailDestination(
icon: const Icon(Icons.source_outlined),
selectedIcon: const Icon(Icons.source),
label: Obx(() => Text(
'Filter by source ${homeController.filterSources.value.length}'))),
NavigationRailDestination(
icon: const Icon(FontAwesomeIcons.earthAsia),
selectedIcon:
const FaIcon(FontAwesomeIcons.earthAsia),
label: Obx(
() => Text(
'Filter by country ${homeController.filterCountry.value.length}'),
)),
],
),
const VerticalDivider(thickness: 1, width: 1),
// This is the main content.
Expanded(
child: IndexedStack(
index: homeController.rails.value,
children: [
_layouts(),
_language(),
_sources(),
_country(),
],
))
],
),
),
const Divider(thickness: 1, height: 1),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
TextButton(
onPressed: () {
homeController.filterSources.value.clear();
homeController.filterCountry.value.clear();
},
child: const Text('CLEAR All')),
ElevatedButton(
onPressed: () {}, child: const Text('APPLY'))
],
)
],
),
),
),
);
});
}
Widget _myRadioButton({required String title, required int index}) {
return GetBuilder<HomeController>(
builder: (_) => RadioListTile(
value: homeController.layout[index],
groupValue: homeController.isGrid.value,
onChanged: (newValue) =>
homeController.onClickRadioButton(int.parse(newValue.toString())),
title: Text(title),
activeColor: Consts.appMainColor,
),
);
}
_layouts() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_myRadioButton(
title: "List View",
index: 0,
),
_myRadioButton(
title: "Grid View",
index: 1,
),
],
);
}
_language() {
return Obx(
() => Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CustomCheckBoxListTile(
value: homeController.isEnglish.value,
title: const Text('English'),
onTap: (newVal) {
homeController.isEnglish.value = newVal ?? false;
}),
CustomCheckBoxListTile(
value: homeController.isArabic.value,
title: const Text('Arabic'),
onTap: (newVal) {
homeController.isArabic.value = newVal ?? false;
}),
],
),
);
}
_sources() {
return GetBuilder<HomeController>(builder: (_) {
return ListView(
children: _syncChannels
.map((e) => CustomCheckBoxListTile(
value: homeController.filterSources.value.contains(e),
title: Text(e),
onTap: (newVal) {
homeController.filterSourcesFunc(e);
}))
.toList());
});
}
_country() {
return GetBuilder<HomeController>(
builder: (_) => ListView(
children: sourcesController.mapSelectedChannelCheckList.keys
.map((e) => CustomCheckBoxListTile(
value: homeController.filterCountry.value.contains(e),
title: Text(e.toString()),
onTap: (newVal) {
homeController.filterCountryFunc(e);
}))
.toList()));
}
void _resources() {
List.generate(
sourcesController.mapSelectedChannelCheckList.values.length,
(index0) => List.generate(
sourcesController.mapSelectedChannelCheckList.values
.elementAt(index0)
.length,
(index1) => List.generate(
sourcesController.mapSelectedChannelCheckList.values
.elementAt(index0)
.elementAt(index1)
.values
.length,
(index2) => List.generate(
sourcesController.mapSelectedChannelCheckList.values
.elementAt(index0)
.elementAt(index1)
.values
.elementAt(index2)['channels']
.length,
(index3) => _syncChannels.add(sourcesController
.mapSelectedChannelCheckList.values
.elementAt(index0)
.elementAt(index1)
.values
.elementAt(index2)['channels'][index3]
.keys
.toString())))));
}
}