Home > Software engineering >  In Flutter, how to make single tab keystroke to tab through checklisttile?
In Flutter, how to make single tab keystroke to tab through checklisttile?

Time:03-10

At the moment, I have to tab twice (two tab keystrokes) to "tab through" the checkbox (checklisttile).

I want to enforce only one tab keystroke to tab through the checkbox like you would tab through textformfields. How do you achieve this ? I have tried wrapping the checklisttile with a focus widget, and inserted a focusnode into the checklisttile as well.

tabbing

CheckboxListTile(
              contentPadding: EdgeInsets.zero,
              title: new RichText(
                  text: new TextSpan(children: <InlineSpan>[
                TextSpan(
                    text: 'I understand and agree to the  ',
                    style: TextStyle(color: Colors.black87)),
                TextSpan(
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        Slideout(
                            context: context,
                            title: widget.slideOutTitle != null
                                ? widget.slideOutTitle
                                : "Terms and Conditions",
                            child: ListView(
                              shrinkWrap: true,
                              children: [
                                Padding(
                                  padding: const EdgeInsets.fromLTRB(30, 20, 30, 0),
                                  child: Column(children: [
                                    widget.dialogTextWidget,
                                    SizedBox(height: 20),
                                    ButtonWidget(
                                        labelText: "Agree",
                                        onPress: () {
                                          setState(() {
                                            consentCheckedValue = true;
                                            _isDisabled = false;
                                          });
                                          Navigator.pop(context);
                                        }),
                                  ]),
                                )
                              ],
                            ));
                      },
                    text: 'Terms and Conditions.',
                    style: TextStyle(
                        color: Theme.of(context).primaryColor, fontWeight: FontWeight.bold)),
              ])),
              value: consentCheckedValue,
              onChanged: (newValue) {
                setState(() {
                  consentCheckedValue = newValue!;
                  _isDisabled = !newValue;
                });
              },
              controlAffinity: ListTileControlAffinity.leading,
            )

CodePudding user response:

You can use a custom focusNode in your CheckboxListTile, with skipTraversal enabled:

CheckboxListTile(
  ...,
  focusNode: FocusNode(skipTraversal: true),
);
  • Related