Multiple Choice Chips

The widget is based on the fake state 3.0 methodology suggested by Gorgon Cyber. 

  
Pub.dev: https://pub.dev/packages/chips_choice
 ┄ 
Step 1: Create a chips choice widget [image.png]Dependency: chips_choice: ^2.0.1
import 'package:chips_choice/chips_choice.dart';
 
class Cchips extends StatefulWidget {
  const Cchips({
    Key key,
    this.width,
    this.height,
    this.llist,
    this.state,
    this.id,
  }) : super(key: key);
 
  final double width;
  final double height;
  final List llist;
  final dynamic state;
  final String id;
 
  @override
  _CchipsState createState() => _CchipsState();
}
 
class _CchipsState extends State {
  List tags = [];
  
  @override
  Widget build(BuildContext context) {
    return Container(
      width: widget.width,
      height: widget.height,
      child: Content(
        title: 'Scrollable List Multiple Choice',
        child: ChipsChoice.multiple(
          value: tags,
          choiceItems: C2Choice.listFrom(
            source: widget.llist,
            value: (i, v) => v,
            label: (i, v) => v,
            tooltip: (i, v) => v,
          ),
          onChanged: (val) {
            setState(() => tags = val);
            if (widget.state[widget.id] == null)
              widget.state[widget.id] = {};
            widget.state[widget.id]["chipsList"] = tags;
          },
        ),
      ),
    );
  }
}
 
class Content extends StatefulWidget {
  final String title;
  final Widget child;
 
  Content({
    Key key,
    @required this.title,
    @required this.child,
  }) : super(key: key);
 
  @override
  _ContentState createState() => _ContentState();
}
 
class _ContentState extends State
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;
 
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Card(
      elevation: 2,
      margin: const EdgeInsets.all(5),
      clipBehavior: Clip.antiAliasWithSaveLayer,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: double.infinity,
            padding: const EdgeInsets.all(15),
            color: Colors.blueGrey[50],
            child: Text(
              widget.title,
              style: const TextStyle(
                  color: Colors.blueGrey, fontWeight: FontWeight.w500),
            ),
          ),
          Flexible(fit: FlexFit.loose, child: widget.child),
        ],
      ),
    );
  }
}[image.png] ┄ 
Step 2:  Write a custom createAppState function 
[image.png]
import 'dart:math' as math;
 
dynamic createAppState() {
  dynamic state = {};
  return state;
} ┄ Step 3: Write a getChipsList custom function 
[image.png]
import 'dart:math' as math;
 
List getChipsLists(
  dynamic state,
  String id,
) {
  dynamic value = state[id];
  if (value == null) return ([]);
  return value["chipsList"];
} ┄ 
Step 4: Write a function to convert string to List. FF has a bug where it saves list to string. 
[image.png]
import 'dart:math' as math;
 
List string2List(String str) {
  // convert string to list
  var strs = str.replaceAll("\'", "'").replaceAll("[", "").replaceAll("]", "");
  List result = strs.split(",");
  return result;
} ┄ 

Step 5: Create a splash/home screen to setup application wide fake state.
[image.png] ┄ 
Step 6: Create a ‘chipsPage’ with Multiple choice chips page using widget in step 1. Add a button.

[image.png]Create a state parameter
[image.png]Set widget properties
[image.png]Use custom function in step 4 to convert string to list.
[image.png] ┄ 
Step 7: Create a ‘selectedchips’ page to show chip selection (optional)
Add a column and listtile
In Column, generate dynamic children 
[image.png] ┄ 
Step 8: On splash/home page. Add a navigation action passing state parameters

[image.png]Step 9: On ‘chipsPage’, add navigation action by passing state parameter
[image.png] ┄ Finally, 

Home Page
[image.png]
chipsPage[image.png]
selectedChips page[image.png]Enjoy!