フラッターで箇条書きを生成する

Question

フラッターでtextFieldを使用してユーザー入力を取得しようとしていますが、箇条書きとして取得したいと思います。flutter_markdownというパッケージを使用する必要があるかもしれないと思ったのですが、どうすればそれができるのかまだわかりません。すべての最後の行と同様に、自動的に箇条書きで始まる必要があります。

Answer 1

これを行う1つの方法は、次のようなものです。

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

注：これは完全な解決策ではありません。既存のテキストの途中でテキストの編集を開始すると、箇条書きが表示されないためです。しかし、おそらくこれはあなたに方向性のスタートを与えることができます。

Answer 2

テキストフィールドの箇条書きリストが必要な場合は、flutter_markdownが適切でない可能性があります。マークダウンテキストを表示しているので。

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

Answer 3

箇条書き機能を備えたテキストフィールドが必要な場合は、このパッケージが適している可能性があります。

https://pub.dev/packages/zefyr

自分で書くと複雑です。

使用方法については、サンプルコードをご覧ください。

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