Genera viñetas en flutter

Question

Estoy tratando de tomar la entrada del usuario usando un textField en flutter, pero quiero tomarlo como una lista de viñetas. Pensé que podría tener que usar un paquete llamado flutter_markdown, pero todavía no sé cómo puedo hacerlo. Como cada última línea, debería comenzar automáticamente con una viñeta.

Answer 1

Una forma de hacer esto es algo como esto.

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;
      }
    );
  }
}

Nota: esta no es una solución perfecta. Como no pondrá viñetas si comienza a editar el texto en el medio del texto existente. Pero tal vez esto pueda darle un comienzo en una dirección.

Answer 2

Si desea tener una lista de campos de texto con viñetas, es posible que flutter_markdown no sea adecuado para usted. Dado que muestra un texto de rebaja.

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

Answer 3

Si desea tener un campo de texto que tenga la función de viñetas, este paquete puede ser adecuado para usted:

https://pub.dev/packages/zefyr

Es complicado si lo escribes por tu cuenta.

Mire su código de ejemplo para aprender a usarlo:

https://github.com/memspace/zefyr/tree/master/packages/zefyr/example/lib