Generate bullet points in flutter

user_13829291 0
Viewed 2197

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.

flutter-layout dart flutter textfield
3 Answers

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.

user_138408640

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
              ),
            ),
user_140464150
user_141242760
Related