CODEWITHSUNDEEP
flutterflutter-getx
dylan.kwon
dylan.kwon

Reputation: 551

How to create a listview with GetX

Each item in the listview I will create is stateful.

For example, each row has a TextField and a Button, and the Button should only be activated when there is input text.

Data class

class Row {
    String text;
    bool get enabled => text.isNotEmpty;
}

In a project that uses GetX, when creating an item widget for a listview, should it be created as a StatefulWidget? Or should I create a StatelessWidget and declare a Controller of GetX on each row to manage the state?

Which method is better? Or is there a better way?

Upvotes: 1

Views: 1869

Answers (1)

4xMafole
4xMafole

Reputation: 477

MY SUGGESTION

You should create a StatelessWidget and declare a controller of Getx.

Create a list in your controller that stores the selected index:

  var buttonsSelected = [].obs;

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

And your ListView like this:

 ListView.builder(
    itemCount: row.length,
    itemBuilder: (context, index) {
      //I'm using Text Widget for demonstration
      return ListTile(
          title: Obx(
            () => Text(
              row[index].text,
              style: TextStyle(
                  //Here is where the toggling effect takes place
                  color:
                  controller.buttonsSelected.contains(index)
                          ? Colors.red
                          : Colors.black87,),
            ),
          ),
          onTap: () {
            //Here we activate the toggle function
            controller.toogle(index);
          });
    },
  )

Upvotes: 2

Related Questions