Générer des puces en scintillement

Question

J'essaie de prendre les entrées de l'utilisateur à l'aide d'un textField en flutter, mais je veux prendre le comme une liste à puces. Je pensais que je devrais peut-être utiliser un package appelé flutter_markdown, mais je ne sais toujours pas comment puis-je faire cela. Comme chaque dernière ligne devrait automatiquement commencer par une puce.

Answer 1

Une façon de faire est quelque chose comme ça.

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

Remarque: ce n'est pas une solution parfaite. Comme il ne mettra pas de puces si vous commencez à éditer le texte au milieu du texte existant. Mais peut-être que cela peut vous donner un début dans une direction.

Answer 2

Si vous souhaitez avoir une liste à puces de champ de texte, flutter_markdown peut ne pas vous convenir. Puisqu'il affiche un texte de démarque.

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

Answer 3

Si vous souhaitez avoir un champ de texte avec une fonction de puces, ce package peut vous convenir:

https://pub.dev/packages/zefyr

C'est compliqué si vous l'écrivez vous-même.

Regardez son exemple de code pour apprendre à utiliser:

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