Improve performance, provide more config options, and update example

Author: davigmacode

CHANGELOG.md

@@ -1,3 +1,11 @@
+## [1.1.0] - 2020-03-07
+
+* Improve performance, since `Theme.of(context)` in default choice widget is moved outside, so this only fired once
+* `ChipsChoiceBuilder` parameter `select` function now only need one parameter `bool selected`
+* Add `meta` to `ChipsChoiceOption`, this useful with custom choice widget
+* Add more option to `ChipsChoiceItemConfig`
+* Add more usage example
+
 ## [1.0.0] - 2020-01-24
 
 * Initial release

LICENSE

@@ -1 +1,19 @@
-TODO: Add your license here.
+Copyright (c) 2019 Irfan Vigma Taufik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -17,8 +17,8 @@ Lite version of [smart_select](https://pub.dev/packages/smart_select) package, z
 
 * Select single or multiple choice
 * Display in scrollable or wrapped List
-* Customizable choice input
 * Build choice option from any List
+* Customizable choice widget
 
 ## Usage
 
@@ -81,10 +81,10 @@ ChipsChoice<String>.multiple(
 ChipsChoice<T>.single/multiple(
   ...,
   ...,
-  options: <ChipsChoiceOption<int>>[
-    ChipsChoiceOption<int>(value: 1, label: 'Entertainment'),
-    ChipsChoiceOption<int>(value: 2, label: 'Education'),
-    ChipsChoiceOption<int>(value: 3, label: 'Fashion'),
+  options: <ChipsChoiceOption<T>>[
+    ChipsChoiceOption<T>(value: 1, label: 'Entertainment'),
+    ChipsChoiceOption<T>(value: 2, label: 'Education'),
+    ChipsChoiceOption<T>(value: 3, label: 'Fashion'),
   ],
 );
 ```

example/android/app/src/main/AndroidManifest.xml

@@ -5,6 +5,7 @@
          In most cases you can leave this as-is, but you if you want to provide
          additional functionality it is fine to subclass or reimplement
          FlutterApplication and put your custom class here. -->
+    <uses-permission android:name="android.permission.INTERNET"/>
     <application
         android:name="io.flutter.app.FlutterApplication"
         android:label="ChipsChoice"

example/art/ChipsChoice.apk

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:chips_choice/chips_choice.dart';
+import 'package:async/async.dart';
+import 'package:dio/dio.dart';
 
 void main() => runApp(MyApp());
 
@@ -34,6 +36,22 @@ class _MyHomePageState extends State<MyHomePage> {
     'Science',
   ];
 
+  String user;
+  final usersMemoizer = AsyncMemoizer<List<ChipsChoiceOption<String>>>();
+
+  Future<List<ChipsChoiceOption<String>>> getUsers() async {
+    String url = "https://randomuser.me/api/?inc=gender,name,nat,picture,email&results=25";
+    Response res = await Dio().get(url);
+    return ChipsChoiceOption.listFrom<String, dynamic>(
+      source: res.data['results'],
+      value: (index, item) => item['email'],
+      label: (index, item) => item['name']['first'] + ' ' + item['name']['last'],
+      avatar: (index, item) => CircleAvatar(
+        backgroundImage: NetworkImage(item['picture']['thumbnail']),
+      ),
+    )..insert(0, ChipsChoiceOption<String>(value: 'all', label: 'All'));
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -100,7 +118,7 @@ class _MyHomePageState extends State<MyHomePage> {
             ),
           ),
           Content(
-            title: 'Disabled Choice item',
+            title: 'Disabled Choice Item',
             child: ChipsChoice<int>.single(
               value: tag,
               options: ChipsChoiceOption.listFrom<int, String>(
@@ -114,7 +132,7 @@ class _MyHomePageState extends State<MyHomePage> {
             ),
           ),
           Content(
-            title: 'Hidden Choice item',
+            title: 'Hidden Choice Item',
             child: ChipsChoice<String>.multiple(
               value: tags,
               options: ChipsChoiceOption.listFrom<String, String>(
@@ -128,19 +146,146 @@ class _MyHomePageState extends State<MyHomePage> {
             ),
           ),
           Content(
-            title: 'Custom Choice item',
+            title: 'Append an Item to Options',
+            child: ChipsChoice<int>.single(
+              value: tag,
+              options: ChipsChoiceOption.listFrom<int, String>(
+                source: options,
+                value: (i, v) => i,
+                label: (i, v) => v,
+              )..insert(0, ChipsChoiceOption<int>(value: -1, label: 'All')),
+              onChanged: (val) => setState(() => tag = val),
+            ),
+          ),
+          Content(
+            title: 'Selected without Checkmark and Brightness Dark',
+            child: ChipsChoice<int>.single(
+              value: tag,
+              onChanged: (val) => setState(() => tag = val),
+              options: ChipsChoiceOption.listFrom<int, String>(
+                source: options,
+                value: (i, v) => i,
+                label: (i, v) => v,
+              )..insert(0, ChipsChoiceOption<int>(value: -1, label: 'All')),
+              itemConfig: const ChipsChoiceItemConfig(
+                showCheckmark: false,
+                selectedBrightness: Brightness.dark,
+                // unselectedBrightness: Brightness.dark,
+              ),
+            ),
+          ),
+          Content(
+            title: 'Async Options and Brightness Dark',
+            child: FutureBuilder<List<ChipsChoiceOption<String>>>(
+              initialData: [],
+              future: usersMemoizer.runOnce(getUsers),
+              builder: (context, snapshot) {
+                if (snapshot.connectionState == ConnectionState.waiting) {
+                  return Padding(
+                    padding: const EdgeInsets.all(20),
+                    child: Center(
+                      child: SizedBox(
+                        width: 20,
+                        height: 20,
+                        child: CircularProgressIndicator(
+                          strokeWidth: 2,
+                        )
+                      ),
+                    ),
+                  );
+                } else {
+                  if (!snapshot.hasError) {
+                    return ChipsChoice<String>.single(
+                      value: user,
+                      options: snapshot.data,
+                      onChanged: (val) => setState(() => user = val),
+                      itemConfig: ChipsChoiceItemConfig(
+                        selectedColor: Colors.green,
+                        unselectedColor: Colors.blueGrey,
+                        selectedBrightness: Brightness.dark,
+                        unselectedBrightness: Brightness.dark,
+                        showCheckmark: false,
+                      ),
+                    );
+                  } else {
+                    return Container(
+                      padding: const EdgeInsets.all(25),
+                      child: Text(
+                        snapshot.error.toString(),
+                        style: const TextStyle(color: Colors.red),
+                      ),
+                    );
+                  }
+                }
+              },
+            ),
+          ),
+          Content(
+            title: 'Works with FormField and Validator',
+            child: FormField<List<String>>(
+              autovalidate: true,
+              initialValue: tags,
+              validator: (value) {
+                if (value.isEmpty) {
+                  return 'Please select some categories';
+                }
+                if (value.length > 5) {
+                  return "Can't select more than 5 categories";
+                }
+                return null;
+              },
+              builder: (state) {
+                return Column(
+                  children: <Widget>[
+                    Container(
+                      alignment: Alignment.centerLeft,
+                      child: ChipsChoice<String>.multiple(
+                        value: state.value,
+                        options: ChipsChoiceOption.listFrom<String, String>(
+                          source: options,
+                          value: (i, v) => v,
+                          label: (i, v) => v,
+                        ),
+                        onChanged: (val) => state.didChange(val),
+                        itemConfig: ChipsChoiceItemConfig(
+                          selectedColor: Colors.indigo,
+                          selectedBrightness: Brightness.dark,
+                          unselectedColor: Colors.indigo,
+                          unselectedBorderOpacity: .3,
+                        ),
+                        isWrapped: true,
+                      ),
+                    ),
+                    Container(
+                      padding: EdgeInsets.fromLTRB(15, 0, 15, 15),
+                      alignment: Alignment.centerLeft,
+                      child: Text(
+                        state.errorText ?? state.value.length.toString() + '/5 selected',
+                        style: TextStyle(
+                          color: state.hasError
+                            ? Colors.redAccent
+                            : Colors.green
+                        ),
+                      )
+                    )
+                  ],
+                );
+              },
+            ),
+          ),
+          Content(
+            title: 'Custom Choice Widget',
             child: ChipsChoice<String>.multiple(
               value: tags,
               options: ChipsChoiceOption.listFrom<String, String>(
                 source: options,
                 value: (i, v) => v,
                 label: (i, v) => v,
               ),
-              itemBuilder: (item, selected, onSelect) {
-                return CustomChip(item.value, item.label, selected, onSelect);
+              itemBuilder: (item, selected, select) {
+                return CustomChip(item.label, selected, select);
               },
               onChanged: (val) => setState(() => tags = val),
-              isWrapped: true,
             ),
           ),
         ],
@@ -149,15 +294,13 @@ class _MyHomePageState extends State<MyHomePage> {
   }
 }
 
-class CustomChip<T> extends StatelessWidget {
+class CustomChip extends StatelessWidget {
 
-  final T value;
   final String label;
   final bool selected;
-  final Function(T value, bool selected) onSelect;
+  final Function(bool selected) onSelect;
 
   CustomChip(
-    this.value,
     this.label,
     this.selected,
     this.onSelect,
@@ -167,28 +310,50 @@ class CustomChip<T> extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return AnimatedContainer(
-      margin: EdgeInsets.symmetric(vertical: 5),
+      height: 100,
+      width: 70,
+      margin: EdgeInsets.symmetric(
+        vertical: 15,
+        horizontal: 5,
+      ),
       duration: Duration(milliseconds: 300),
       decoration: BoxDecoration(
         color: selected ? Colors.green : Colors.transparent,
+        borderRadius: BorderRadius.circular(15),
         border: Border.all(
           color: selected ? Colors.green : Colors.grey,
           width: 1,
         ),
       ),
       child: InkWell(
-        onTap: () => onSelect(value, !selected),
-        child: Padding(
-          padding: EdgeInsets.symmetric(
-            vertical: 7,
-            horizontal: 9,
-          ),
-          child: Text(
-            label,
-            style: TextStyle(
-              color: selected ? Colors.white : Colors.black45,
+        onTap: () => onSelect(!selected),
+        child: Stack(
+          alignment: Alignment.center,
+          children: <Widget>[
+            Visibility(
+              visible: selected,
+              child: Icon(
+                Icons.check_circle_outline,
+                color: Colors.white,
+                size: 32,
+              )
             ),
-          ),
+            Positioned(
+              left: 9,
+              right: 9,
+              bottom: 7,
+              child: Container(
+                child: Text(
+                  label,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: TextStyle(
+                    color: selected ? Colors.white : Colors.black45,
+                  ),
+                ),
+              ),
+            ),
+          ],
         ),
       ),
     );
@@ -244,7 +409,7 @@ void _about(BuildContext context) {
           ListTile(
             title: Text(
               'chips_choice',
-              style: Theme.of(context).textTheme.headline.merge(TextStyle(color: Colors.black87)),
+              style: Theme.of(context).textTheme.headline.copyWith(color: Colors.black87),
             ),
             subtitle: Text('by davigmacode'),
             trailing: IconButton(
@@ -261,13 +426,13 @@ void _about(BuildContext context) {
                 children: <Widget>[
                   Text(
                     'Easy way to provide a single or multiple choice chips.',
-                    style: Theme.of(context).textTheme.body1.merge(TextStyle(color: Colors.black54)),
+                    style: Theme.of(context).textTheme.body1.copyWith(color: Colors.black54),
                   ),
                   Container(height: 15),
                 ],
               ),
             ),
-          )
+          ),
         ],
       ),
     ),