Create Check List Like iPhone Notes-CodePudding

Is this possible to make checklist like iPhone Notes? If user press delete/backspace button keyboard on empty textfield is also delete the checklist and if user press return button on keyboard that will add new checklist?

What I have done is still stuck in how to implement that. I have created class for textfield with checkbox and make an object from them to form class.

class SubTaskItem extends StatefulWidget {
  TextEditingController? textEditingController =
      TextEditingController(text: '');
  SubTaskItem({Key? key, this.textEditingController}) : super(key: key);

  @override
  _SubTaskItemState createState() => _SubTaskItemState();
}

class _SubTaskItemState extends State<SubTaskItem> {
  bool checkboxValue = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    widget.textEditingController = TextEditingController(text: '');
  }

  @override
  Widget build(BuildContext context) {
    return CheckboxListTile(
      value: checkboxValue,
      onChanged: (val) {
        setState(() => checkboxValue = val!);
      },
      title: TextFormField(
        controller: widget.textEditingController,
        style: TextStyle(fontSize: 14.0),
      ),
      controlAffinity: ListTileControlAffinity.leading,
      activeColor: Colors.green,
    );
  }
}

on Class Form I add object for subTaskItem with this

List<SubTaskItem> listSubTaskItem = [];

  addSubTaskItem() {
    SubTaskItem subTaskItem = SubTaskItem();

    listSubTaskItem.add(subTaskItem);

    setState(() {});
  }

Do I need to implement getx for state management or is there any simply way to do that? Thanks

CodePudding user response：

You can try to listen to the pressed keyboard key and if it is the right key run the right logic. This can be done in different ways for example check this LogicalKeyboardKey

So you check if it's the backspace key and the selected todo is empty remove it. If it's, for example, enter key create a new task, if the current task is empty.

Or you can use onkeyPress listener. check this How to detect key presses in flutter without a RawKeyboardListener

CodePudding user response：

just add this widget to your project and wrap your textField with that.

        import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class FocusWidget extends StatefulWidget {
  final Widget child;
  final Function(EscIntent) onEscTap;

  const FocusWidget({
    required this.child,
    required this.onEscTap,
    super.key,
  });

  @override
  State<FocusWidget> createState() => _FocusWidgetState();
}

class _FocusWidgetState extends State<FocusWidget> {
  @override
  Widget build(final BuildContext context) => FocusableActionDetector(
        actions: _initActions(),
        shortcuts: _initShortcuts,
        child: widget.child,
      );

  final _initShortcuts = <LogicalKeySet, Intent>{
    LogicalKeySet(LogicalKeyboardKey.escape): EscIntent(),
  };

  Map<Type, Action<Intent>> _initActions() => <Type, Action<Intent>>{
        EscIntent: CallbackAction<EscIntent>(
          onInvoke: widget.onEscTap,
        ),
      };
}

class EscIntent extends Intent {}

like this:

FocusWidget(
      onEscTap: (final _) => print('escape tapped'),
      child: TextFormField(),
    ),