Genera punti elenco in flutter

Aug 18 2020

Sto cercando di prendere l'input dell'utente utilizzando un textField in flutter, ma voglio prendere come un elenco puntato. Pensavo di dover usare un pacchetto chiamato flutter_markdown, ma ancora non so come posso farlo. Come ogni ultima riga dovrebbe iniziare automaticamente con un punto elenco.

Risposte

1 JigarPatel Aug 18 2020 at 18:47

Un modo per farlo è qualcosa del genere.

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: questa non è una soluzione perfetta. Poiché non inserirà punti elenco se inizi a modificare il testo nel mezzo del testo esistente. Ma forse questo può darti un inizio in una direzione.

2 JupiterChan Aug 18 2020 at 15:46

Se vuoi avere un elenco puntato di campi di testo, flutter_markdown potrebbe non essere adatto a te. Poiché mostra un testo di markdown.

TextFormField(
              decoration: InputDecoration(
                border: InputBorder.none, prefix: Text("."), // Or a Dot image
              ),
            ),
sleepingkit Aug 19 2020 at 12:09

Se vuoi avere un campo di testo che abbia la funzione di punti elenco, questo pacchetto potrebbe essere adatto a te:

https://pub.dev/packages/zefyr

È complicato se lo scrivi da solo.

Guarda il suo codice di esempio per imparare a usare:

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