mercredi 23 août 2023

How to change the value of "checkbox" in "DataRow" widget that build on "showModalBottomSheet" in flutter?

I builded this simple screen. After the user clicks on the button, he gets the "showModalBottomSheet" widget that opens on the screen.

In this "showModalBottomSheet" widget, there is a list of data that allows the user to change the value at the "checkbox" to true or false.

The problem is, because of this data inside the "showModalBottomSheet" widget.

When the user changes the value, there is no effect on the screen.

So, how should I refresh the screen to view the changes at the same time the user changes the value?

**Here is my code: **

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/src/widgets/placeholder.dart';

class showModalBottomSheetTester extends StatefulWidget {
  const showModalBottomSheetTester({super.key});

  @override
  State<showModalBottomSheetTester> createState() =>
      _showModalBottomSheetTesterState();
}

class Welcome {
  final String welcome;
  final String purple;
  final String empty;

  Welcome(this.welcome, this.purple, this.empty);
}

class _showModalBottomSheetTesterState
    extends State<showModalBottomSheetTester> {
  bool _isChecked = false;

  void _updateCheckbox(bool newValue) {
    setState(() {
      _isChecked = newValue;
    });
  }

  List<Welcome> countries = [
    Welcome('Country A', 'purple A', 'empty A'),
    Welcome('Country A', 'purple A', 'empty A'),
    Welcome('Country A', 'purple A', 'empty A'),
  ];
  List<Welcome> seletedCountries = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('showModalBottomSheetTester'),
      ),
      body: ElevatedButton(
          onPressed: () {
            showModalBottomSheet(
                context: context,
                builder: (BuildContext context) {
                  return SizedBox(
                    height: 500,
                    child: Column(
                      children: [
                        const Padding(
                          padding: EdgeInsets.only(top: 30.0),
                          child: Text('Head'),
                        ),
                        DataTable(
                          columns: const [
                            DataColumn(label: Text('Welcome')),
                            DataColumn(label: Text('Purple')),
                            DataColumn(label: Text('Empty')),
                          ],
                          rows: getRows(countries),
                        )
                      ],
                    ),
                  );
                });
          },
          child: const Text('press')),
    );
  }

  List<DataRow> getRows(List<Welcome> countries) => countries
      .map((country) => DataRow(
              selected: seletedCountries.contains(country),
              onSelectChanged: (isSelected) {
                setState(() {
                  if (isSelected != null && isSelected) {
                    seletedCountries.add(country);
                  } else {
                    seletedCountries.remove(country);
                  }
                });
              },
              cells: [
                DataCell(Text(country.welcome)),
                DataCell(Text(country.purple)),
                DataCell(Text(country.empty)),
              ]))
      .toList();
}



Aucun commentaire:

Enregistrer un commentaire