🐛 Fix custom filter updates in the example

Author: AlexV525

example/lib/page/custom_filter/advance_filter_page.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:photo_manager/photo_manager.dart';
-import 'package:photo_manager_example/page/custom_filter/order_by_action.dart';
+
+import 'order_by_action.dart';
+import 'where_action.dart';
 
 class AdvancedCustomFilterPage extends StatefulWidget {
   const AdvancedCustomFilterPage({
@@ -16,15 +18,14 @@ class AdvancedCustomFilterPage extends StatefulWidget {
 }
 
 class _AdvancedCustomFilterPageState extends State<AdvancedCustomFilterPage> {
-  final List<OrderByItem> _orderBy = [
+  List<WhereConditionItem> _where = [];
+  List<OrderByItem> _orderBy = [
     OrderByItem.named(
       column: CustomColumns.base.createDate,
       isAsc: false,
     ),
   ];
 
-  final List<WhereConditionItem> _where = [];
-
   late CustomFilter filter;
 
   @override
@@ -48,14 +49,14 @@ class _AdvancedCustomFilterPageState extends State<AdvancedCustomFilterPage> {
         title: const Text('Advanced Custom Filter Example'),
         actions: [
           WhereAction(
-            where: _where,
+            items: _where,
             onChanged: (value) {
               if (!mounted) {
                 return;
               }
               setState(() {
-                _where.clear();
-                _where.addAll(value);
+                _where = value;
+                filter = _createFilter();
               });
             },
           ),
@@ -66,8 +67,8 @@ class _AdvancedCustomFilterPageState extends State<AdvancedCustomFilterPage> {
                 return;
               }
               setState(() {
-                _orderBy.clear();
-                _orderBy.addAll(values);
+                _orderBy = values;
+                filter = _createFilter();
               });
             },
           ),
@@ -83,271 +84,3 @@ class _AdvancedCustomFilterPageState extends State<AdvancedCustomFilterPage> {
     );
   }
 }
-
-class WhereAction extends StatelessWidget {
-  const WhereAction({
-    super.key,
-    required this.where,
-    required this.onChanged,
-    // required this
-  });
-
-  final List<WhereConditionItem> where;
-  final ValueChanged<List<WhereConditionItem>> onChanged;
-
-  @override
-  Widget build(BuildContext context) {
-    return IconButton(
-      icon: const Icon(Icons.filter_alt),
-      onPressed: () {
-        _WhereConditionPage._saveItems = null;
-        Navigator.push<List<WhereConditionItem>>(
-          context,
-          MaterialPageRoute(
-            builder: (context) => _WhereConditionPage(where: where),
-          ),
-        ).then((value) {
-          value ??= _WhereConditionPage._saveItems;
-          if (value != null) {
-            onChanged(value);
-          }
-        });
-      },
-    );
-  }
-}
-
-class _WhereConditionPage extends StatefulWidget {
-  const _WhereConditionPage({
-    required this.where,
-  });
-
-  final List<WhereConditionItem> where;
-
-  static List<WhereConditionItem>? _saveItems;
-
-  @override
-  State<_WhereConditionPage> createState() => _WhereConditionPageState();
-}
-
-class _WhereConditionPageState extends State<_WhereConditionPage> {
-  final List<WhereConditionItem> _where = [];
-
-  bool isChanged = false;
-
-  @override
-  void initState() {
-    super.initState();
-    _where.addAll(widget.where);
-    _WhereConditionPage._saveItems = _where;
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text('Where Condition'),
-        actions: [
-          IconButton(
-            icon: const Icon(Icons.add),
-            onPressed: _createNew,
-          ),
-        ],
-      ),
-      body: buildList(context),
-      floatingActionButton: FloatingActionButton(
-        child: const Icon(Icons.done),
-        onPressed: () {
-          Navigator.of(context).pop(_where);
-        },
-      ),
-    );
-  }
-
-  Future<void> _createNew() async {
-    final result = await showDialog<WhereConditionItem>(
-      context: context,
-      builder: (context) {
-        return const _CreateWhereDialog();
-      },
-    );
-    if (result != null) {
-      setState(() {
-        isChanged = true;
-        _where.add(result);
-      });
-    }
-  }
-
-  Widget buildList(BuildContext context) {
-    return ListView.builder(
-      itemCount: _where.length,
-      itemBuilder: (context, index) {
-        final item = _where[index];
-        return ListTile(
-          title: Text(item.display()),
-          trailing: IconButton(
-            icon: const Icon(Icons.delete),
-            onPressed: () {
-              setState(() {
-                isChanged = true;
-                _where.removeAt(index);
-              });
-            },
-          ),
-        );
-      },
-    );
-  }
-}
-
-class _CreateWhereDialog extends StatefulWidget {
-  const _CreateWhereDialog();
-
-  @override
-  State<_CreateWhereDialog> createState() => _CreateWhereDialogState();
-}
-
-class _CreateWhereDialogState extends State<_CreateWhereDialog> {
-  List<String> keys() {
-    return CustomColumns.platformValues();
-  }
-
-  late String column = keys().first;
-  String condition = '==';
-  TextEditingController textValueController = TextEditingController();
-
-  DateTime _date = DateTime.now();
-
-  WhereConditionItem createItem() {
-    final cond = condition;
-
-    if (isDateColumn()) {
-      return DateColumnWhereCondition(
-        column: column,
-        operator: condition,
-        value: _date,
-      );
-    }
-
-    final value = '$column $cond ${textValueController.text}';
-    final item = WhereConditionItem.text(value);
-    return item;
-  }
-
-  bool isDateColumn() {
-    final dateColumns = CustomColumns.dateColumns();
-    return dateColumns.contains(column);
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return AlertDialog(
-      title: const Text('Create Where Condition'),
-      content: Container(
-        width: double.maxFinite,
-        padding: const EdgeInsets.all(16.0),
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            DropdownButton<String>(
-              items: keys().map((e) {
-                return DropdownMenuItem(
-                  value: e,
-                  child: Text(e),
-                );
-              }).toList(),
-              onChanged: (value) {
-                if (value == null) {
-                  return;
-                }
-                setState(() {
-                  column = value;
-                });
-              },
-              value: column,
-            ),
-            DropdownButton<String>(
-              hint: const Text('Condition'),
-              items: WhereConditionItem.platformConditions.map((e) {
-                return DropdownMenuItem(
-                  value: e,
-                  child: Text(e),
-                );
-              }).toList(),
-              onChanged: (value) {
-                if (value == null) {
-                  return;
-                }
-                setState(() {
-                  condition = value;
-                });
-              },
-              value: condition,
-            ),
-            if (!isDateColumn())
-              TextField(
-                controller: textValueController,
-                decoration: const InputDecoration(
-                  hintText: 'Input condition',
-                ),
-                onChanged: (value) {
-                  setState(() {});
-                },
-              )
-            else
-              _datePicker(),
-            const SizedBox(
-              height: 16,
-            ),
-            Text(
-              createItem().text,
-              style: TextStyle(
-                color: Theme.of(context).primaryColor,
-                fontSize: 20,
-              ),
-            ),
-          ],
-        ),
-      ),
-      actions: [
-        TextButton(
-          onPressed: () {
-            Navigator.of(context).pop();
-          },
-          child: const Text('Cancel'),
-        ),
-        TextButton(
-          onPressed: () {
-            Navigator.of(context).pop(createItem());
-          },
-          child: const Text('OK'),
-        ),
-      ],
-    );
-  }
-
-  Widget _datePicker() {
-    return Column(
-      children: [
-        TextButton(
-          onPressed: () async {
-            final date = await showDatePicker(
-              context: context,
-              initialDate: _date,
-              firstDate: DateTime(1970),
-              lastDate: DateTime(2100),
-            );
-            if (date == null) {
-              return;
-            }
-            setState(() {
-              _date = date;
-            });
-          },
-          child: Text(_date.toIso8601String()),
-        ),
-      ],
-    );
-  }
-}

example/lib/page/custom_filter/order_by_action.dart

@@ -38,36 +38,34 @@ class OrderByAction extends StatelessWidget {
   Widget build(BuildContext context) {
     return Stack(
       children: [
-        Align(
-          alignment: Alignment.center,
-          child: IconButton(
-            onPressed: () async {
-              await changeOrderBy(context, items, onChanged);
-            },
-            icon: const Icon(Icons.sort),
-          ),
+        IconButton(
+          onPressed: () async {
+            await changeOrderBy(context, items, onChanged);
+          },
+          icon: const Icon(Icons.sort),
         ),
-        Positioned(
-          right: 5,
-          top: 5,
-          child: Container(
-            width: 15,
-            height: 15,
-            decoration: const BoxDecoration(
-              color: Colors.red,
-              shape: BoxShape.circle,
-            ),
-            child: Center(
-              child: Text(
-                items.length.toString(),
-                style: const TextStyle(
-                  color: Colors.white,
-                  fontSize: 8,
+        if (items.isNotEmpty)
+          Positioned(
+            right: 5,
+            top: 5,
+            child: Container(
+              width: 15,
+              height: 15,
+              decoration: const BoxDecoration(
+                color: Colors.red,
+                shape: BoxShape.circle,
+              ),
+              child: Center(
+                child: Text(
+                  items.length.toString(),
+                  style: const TextStyle(
+                    color: Colors.white,
+                    fontSize: 8,
+                  ),
                 ),
               ),
             ),
           ),
-        ),
       ],
     );
   }
@@ -81,6 +79,7 @@ class OrderByActionPage extends StatefulWidget {
 
   final List<OrderByItem> items;
   static List<OrderByItem>? _saveItems;
+
   @override
   State<OrderByActionPage> createState() => _OrderByActionPageState();
 }