samedi 15 février 2020

CheckBox animation doesn't work when inside a ReorderableListView

I'm trying to make a simple task list, which contains text and a checkbox and allows you to reorder tasks. All the logic of reordering them is working, but when selecting a task the checkbox updates without running the animation.

I've had a problem similar to a simple list (ListView), where by placing an ObjectKey the problem was solved. In this example, as you can see, there is also a Key, but the animation does not work. Any suggestion?

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: 'Flutter To Do',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomePage(),
    ));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List myItems = [];

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 10; i++) {
      Map<String, dynamic> newTask = Map();
      newTask['task'] = 'Task #$i';
      newTask['done'] = false;
      myItems.add(newTask);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter To Do'),
        ),
        body: ReorderableListView(
          children: [
            for (final item in myItems)
              Card(
                key: ObjectKey(item),
                margin: EdgeInsets.all(0),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(0)
                ),
                child: Container(
                  height: 56,
                  child: Row(
                    children: <Widget>[
                      IconButton(icon: Icon(Icons.reorder), onPressed: null),
                      Expanded(
                        child: Text(item['task']),
                      ),
                      Checkbox(
                        value: item['done'],
                        onChanged: (value) {
                          setState(() {
                            item['done'] = value;
                          });
                        },
                      )
                    ],
                  ),
                ),
              )
          ],
          onReorder: (oldIndex, newIndex) {
            setState(() {
              if (newIndex > oldIndex) {
                newIndex -= 1;
              }

              final item = myItems.removeAt(oldIndex);
              myItems.insert(newIndex, item);
            });
          },
        ));
  }
}




Aucun commentaire:

Enregistrer un commentaire