Genera punti elenco in flutter
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
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.
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
),
),
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