Flutter: How to change text color using getX?

Question

I want to change the color of a ListTile text on clicking on the tile how can I do that also the color should only be changed for a specific selected tile. My approach is as following:

ListView.builder(
        itemCount: _antigen.plantAntigens.length,
        itemBuilder: (BuildContext cntxt, int index) {
          return ListTile(
              title: Text(
                _antigen.plantAntigens[index],
                style: TextStyle(
                    color: controller.isSelected ? Colors.red : Colors.black87),
              ),
              onTap: () {
                controller.toogle();
              });
        },
      ),

The code for controller is as following:

bool isSelected = false.obs;

  toogle() {
    isSelected = !isSelected;
  }

I am getting an error for making the the isSelected variable observable. i.e. bool isSelected = false.obs; — Aman Rawat, Jul 07 '21 at 23:08
You'll need to use `RxBool isSelected = false.obs`. When you use `.obs` your return type is now an "Observable" type. `RxBool` is Get's "Observable" subclass for booleans. Similar other types exist for int, String, etc. — Baker, Jul 08 '21 at 01:27

score 5 · Answer 1 · answered Jul 08 '21 at 01:28

Just create a list in your controller that stores the selected index

  var plantAntigensSelected = [].obs;

  toogle(int index) {
    if (plantAntigensSelected.contains(index)) {
      plantAntigensSelected.remove(index);
    } else {
      plantAntigensSelected.add(index);
    }
  }

And your ListView like this

     ListView.builder(
        itemCount: plantAntigens.length,
        itemBuilder: (BuildContext cntxt, int index) {
          return ListTile(
              title: Obx(
                () => Text(
                  plantAntigens[index],
                  style: TextStyle(
                      color:
                      controller.plantAntigensSelected.contains(index)
                              ? Colors.red
                              : Colors.black87),
                ),
              ),
              onTap: () {
                controller.toogle(index);
              });
        },
      )

score 0 · Answer 2 · answered Jul 08 '21 at 01:22

The controller TileColorX will hold which tile has been selected (by using the index provided by ListView.builder).

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ListViewBoxConstraintsPage extends StatelessWidget {
  final List<String> _items = ['first', 'second', 'third'];

  @override
  Widget build(BuildContext context) {
    TileColorX tcx = Get.put(TileColorX());

    return Scaffold(
      appBar: AppBar(
        title: Text('ListView Constraints'),
      ),
      body: ListView.builder(itemCount: _items.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Obx(
                      () => Text('${_items[index]} item',
                      style: TextStyle(
                          color: tcx.selectedIndex.value == index ? Colors.green : Colors.red)
                  )),
              onTap: () => tcx.toggle(index),
            );
          }),
    );
  }
}

class TileColorX extends GetxController {
  RxInt selectedIndex = 0.obs;

  void toggle(int index) => selectedIndex.value = index;
}

score 0 · Answer 3 · answered Jul 08 '21 at 05:40

0

Please try to use setState in the onTap as shown below

onTap: () {
            setState(() {
            controller.toogle();
            });
  });

answered Jul 08 '21 at 05:40

Ramesh Guntha

37
1
6

score 0 · Answer 4 · answered Jan 31 '22 at 16:03

0

You have to add .value to the isSelected in your controller like this:

bool isSelected = false.obs;

  toogle() {
    isSelected.value = !isSelected;
  }

answered Jan 31 '22 at 16:03

Mister.Perfect

198
1
7

Flutter: How to change text color using getX?

4 Answers4