Question 78384 in Flutter Question posted in
The official Flutter documentation can be found here.

How to automatically select all items above the selected one flutter

I have a custom list view with selectable items.And I am trying to select all items automatically present above the one I selected. For Ex: Suppose there is 10 items in the list view and i selected 5th then it should select all the items available above 5th. i.e(1,2,3,4) and when i deselect 3rd item 1,2,3 items should deselected automatically

return CheckboxListTile(
  activeColor: const Color.fromARGB(
      255, 243, 243, 243),
  checkColor: UIGuide.light_Purple,
  selectedTileColor:
  UIGuide.light_Purple,
  value: value.selecteCategorys
      .contains(value.feeList[index]
      .installmentName ??
      '--'),
  onChanged: (bool? selected) async {
    
    value.onFeeSelected(
        selected!,
        value.feeList[index]
            .installmentName,
        index,
        value.feeList[index].netDue);
  },
  title: Text(
    value.feeList[index].netDue ==
        null
        ? '--'
        : value.feeList[index].netDue
        .toString(),
    textAlign: TextAlign.end,
  ),
  secondary: Text(
    value.feeList[index]
        .installmentName ??
        '--',
  ),
);
Tags:

2

Answers


  1. 0

    Note, this example isn’t perfect, but it’s a working example that can get you thinking, as I don’t know the bigger picture

    Here’s my approach:

    1. get the widget and index of the currently selected value using .indexOf()

    2. loop over all the widgets until the previously gotten index

    for (var i = 0; i < _data.indexOf(item); i++) {
                    _data[i].isChecked = value!;
                  }
    Code example

    create a class called CheckBoxModel:

    class CheckBoxModel {
  bool isChecked = false;
  String text = "";
  CheckBoxModel({required this.isChecked, required this.text});
}

    and then, generated 30 widgets:

    final _data = List.generate(
    30, (index) => CheckBoxModel(isChecked: false, text: "Item $index"));

    and used it correspondingly:

    Column(
        children: [
          for (var item in _data)
            CheckboxListTile(
              value: item.isChecked,
              onChanged: (value) {
                setState(() {
                  for (var i = 0; i < _data.indexOf(item); i++) {
                    _data[i].isChecked = value!;
                  }
                });
              },
              title: Text(item.text),
            ),
        ],
      )

    Here’s a complete runnable snipppet:

    import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class CheckBoxModel {
  bool isChecked = false;
  String text = "";
  CheckBoxModel({required this.isChecked, required this.text});
}

final _data = List.generate(
    30, (index) => CheckBoxModel(isChecked: false, text: "Item $index"));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Testing(),
        ),
      ),
    );
  }
}

class Testing extends StatefulWidget {
  const Testing({Key? key}) : super(key: key);

  @override
  State<Testing> createState() => _TestingState();
}

class _TestingState extends State<Testing> {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          for (var item in _data)
            CheckboxListTile(
              value: item.isChecked,
              onChanged: (value) {
                setState(() {
                  for (var i = 0; i < _data.indexOf(item); i++) {
                    _data[i].isChecked = value!;
                  }
                });
              },
              title: Text(item.text),
            ),
        ],
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    do something like this :

    1 – get index of selected item

    2 – in the callback fun of checkbox do

    let say we have list of items named by items

    List<Item> items = [];    



foo() {
    final upperlist = items.getRange(0, index).toList();

    upperlist.forEach((item) {item.selected =true });


    items.replaceRange(0, index, upperlist);

     setState((){});


      }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search