CODEWITHSUNDEEP
flutterdart
Bruno Neuman
Bruno Neuman

Reputation: 148

Flutter: DataPicker isn't changes the UI ListTile after selection

I'm trying to change a Text Widget inside ListTile of a ListView after Tapping and selecting a new value with DataPicker.

enter image description here

After Tap the ListTile, I will select a new value for the Subtitle element of ListTile (actual is "Select...")

enter image description here

After clicking on OK button, the value isn't changes the subtitle element.

The DataPicker return the correct value and then I update the corresponding variable linked to Text Widget:

VSCode Console Log

I/flutter ( 8578): Method onTap triggered
I/flutter ( 8578): Method onChange from showMaterialScrollPicker triggered
I/flutter ( 8578): New value:Option 2

Code:

class _BodyState extends State<Body> {
  List<CaracteristicaListItem> caracteristicasList = <CaracteristicaListItem>[];

  @override
  Widget build(BuildContext context) {
    caracteristicasList = <CaracteristicaListItem>[
      CaracteristicaListItemScroll(
        "Test",
        Icon(
          Icons.bubble_chart,
          color: Colors.white70,
          size: 36.0,
        ),
        this,
        <String>["Option 1", "Option 2"],
      ),
    ];


/* 
 *   Some code
 */ 

              child: ListView.separated(
                separatorBuilder: (context, index) => Divider(
                  color: Colors.white70,
                ),
                itemBuilder: (BuildContext context, int index) {
                  var caracteristica = caracteristicasList[index];
                  return Material(
                    color: Colors.white24,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.only(
                        topRight: Radius.circular(100),
                        bottomRight: Radius.circular(100),
                      ),
                      side: BorderSide(style: BorderStyle.none),
                    ),
                    child: ListTile(
                      leading: caracteristica.icon,
                      title: caracteristica.textTitle,
                      subtitle: caracteristica.textSubtitle,
                      onTap: () => caracteristica.onTap(),
                    ),
                  );
                },
                itemCount: caracteristicasList.length,
              ),

onTap Code

// Generic class
abstract class CaracteristicaListItem {
  final String title;
  final Icon icon;
  final _BodyState state;
  Text textTitle;
  Text textSubtitle;
  String subtitle = "Select...";
  bool isValueChanged = false;

  CaracteristicaListItem(this.title, this.icon, this.state) {}

  void onTap();
}

// Scroll DataPicker
class CaracteristicaListItemScroll extends CaracteristicaListItem {
  final List<String> scrollData;

  CaracteristicaListItemScroll(
      String title, Icon icon, _BodyState state, this.scrollData)
      : super(title, icon, state) {
    // Generate a Text() elements
    textTitle = _buildTitle();
    textSubtitle = _buildSubtitle();
  }

  // Tap Handler
  @override
  void onTap() {
    print("Method onTap triggered");

    // Call Addon flutter_material_pickers: ^1.7.3
    showMaterialScrollPicker(
      showDivider: true,
      context: state.context,
      title: "Select",
      items: scrollData,
      selectedItem: isValueChanged ? super.subtitle : scrollData[0],
      onChanged: (value) {
        print("Method onChange from showMaterialScrollPicker triggered");
        print("New value: " + value);
        super.subtitle = value;
        isValueChanged = true;
      },
    );
  }

  Text _buildTitle() {
    // Generate a Text() with variable escape
    // to update after selection using DataPicker
    return Text(
      "$title",
      style: TextStyle(
        color: Colors.white70,
        fontWeight: FontWeight.bold,
        fontSize: 24.0,
      ),
    );
  }

  Text _buildSubtitle() {
    // Generate a Text() with variable escape
    // to update after selection using DataPicker
    return Text(
      "$subtitle",
      style: TextStyle(
        color: Colors.white70,
        fontSize: 18.0,
      ),
    );
  }
}

Upvotes: 1

Views: 285

Answers (1)

Aldy Yuan
Aldy Yuan

Reputation: 2055

You can try put setState((){}) inside your onTap to actually rebuild the UI. Like this :

SetState((){ 
        super.subtitle = value;
        isValueChanged = true; });

What setState do is : Notify the framework that the internal state of this object has changed

Upvotes: 2

Related Questions