CODEWITHSUNDEEP
flutterdart
Leena Marie
Leena Marie

Reputation: 347

How to make a bullet point for every new line in a TextField?

I want to make every new line start with a bullet point when the user presses return on the keyboard when using a TextField.

tried to edit this answer to work for a TextField but couldn't get it to work

and then there's this but I don't know how to implement it

enter image description here

Upvotes: 0

Views: 1442

Answers (2)

Siddharth Sogani
Siddharth Sogani

Reputation: 349

This is how you can do it

class _EditHealthEventDialogState extends State<EditHealthEventDialog> {
  TextEditingController notesController = TextEditingController();
  bool newLine = false;
  @override
  void initState() {
    //notesController.text = widget.healthEvent['text'];
    notesController.addListener(() {
      print('___${notesController.text}');
      String note = notesController.text;
      if (note.isNotEmpty && note.substring(note.length - 1) == '\u2022') {
        print('newline');
        setState(() {
          newLine = true;
        });
      } else {
        setState(() {
          newLine = false;
        });
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      maxLines: 3,
      autovalidateMode: AutovalidateMode.always,
      controller: notesController,
      onChanged: (value) {
        Future.delayed(const Duration(milliseconds: 1000), () {
          if (newLine) {
            return;
          }
          String note = notesController.text;
          if (note.isEmpty) {
            notesController.text = notesController.text + '\u2022';
            notesController.selection = TextSelection.fromPosition(
                TextPosition(offset: notesController.text.length));
          }
          if (note.isNotEmpty && note.substring(note.length - 1) == '\n') {
            notesController.text = notesController.text + '\u2022';
            notesController.selection = TextSelection.fromPosition(
                TextPosition(offset: notesController.text.length));
          }
        });
      },
      decoration: const InputDecoration(labelText: 'Notes', hintText: ''),
    );
  }
}

Upvotes: 1

manhtuan21
manhtuan21

Reputation: 3455

if you want it inside the TextField, you could set prefixIcon for TextField like this:

TextField(
   decoration: InputDecoration(
      fillColor: kGray08Color,
      prefixIconConstraints: BoxConstraints(
         minWidth: 20,
         minHeight: 10,
         maxHeight: 10,
         maxWidth: 20,
         ),
      prefixIcon: Padding(padding: EdgeInsets.only(left: 10), child: ClipOval(child: Container( color: Colors.black, width: 5, height: 5)))
      isDense: true,
      ),
)

maybe you can adjust padding/ margin for your requirement

Upvotes: 0

Related Questions