Generate bullet points in flutter

Question

I am trying to take user input using a textField in flutter, but I want to take the as a bullet point list. I thought I might have to use a package called flutter_markdown, but I still don't know how can I do that. Like every last line should automatically start with a bullet.

Solution 1

One way you can do this is something like this.

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  TextEditingController tc = TextEditingController();
  int currentTextLength = 0;
  
  @override
  Widget build(BuildContext context) {
    return TextField(
      maxLines: 4,
      controller: tc,
      onChanged: (String newText){
        if(newText[0] != '•'){
          newText = '• ' + newText;
          tc.text = newText;
          tc.selection = TextSelection.fromPosition(TextPosition(offset: tc.text.length));
        }
        if(newText[newText.length - 1] == '\n' && newText.length > currentTextLength){
          tc.text = newText + '• ';
          tc.selection = TextSelection.fromPosition(TextPosition(offset: tc.text.length));
        }
        currentTextLength = tc.text.length;
      }
    );
  }
}

Note: This is not a perfect solution. As it will not put bullet points if you start editing the text in the middle of the existing text. But maybe this can give you a start in a direction.

Solution 2

If you want to have a bullet point list of textfield, flutter_markdown may not suitable for you. Since it is showing a markdown text.

TextFormField(
              decoration: InputDecoration(
                border: InputBorder.none, prefix: Text("．"), // Or a Dot image
              ),
            ),

Comments

[Mayur Agarwal]

I want that bullet to be editable, that means the user should be able to delete the bullet anytime. And also new bullet points should be added to the new line as soon as the user moves to the next line.

[Mayur Agarwal]

Can you help me out solving that problem, because I have tried and still I am unable to solve this thing, where we aren't able to insert bullet points in between or at the starting.