web-dev-qa-db-ja.com

Flutterを使用して箇条書きの段落を作成するにはどうすればよいですか？

HTMLを使用して、次のように箇条書きを段落に追加できます。

<ul>
   <li> example </li>
   <li> example </li>
   <li> example </li>
<ul>

Flutterで箇条書きフォームを作成するにはどうすればよいですか？

new Text(''),
textflutterbulletedlist
10
lesego finger

flutter_markdown を使用してみましたが、動作するようです。そしてもちろん、あなたはそれをあなたが望むように番号付き/番号付きまたは番号なしリストに変更することができます。

enter image description here

import 'package:flutter_markdown/flutter_markdown.Dart';
import 'package:flutter/material.Dart';
void main() => runApp(Demo());


class Demo extends StatelessWidget {
  final testData = ["Example1", "Example2", "Example3", "Example100"];



  @override
  Widget build(BuildContext context) {
    final _markDownData = testData.map((x) => "- $x\n").reduce((x, y) => "$x$y");

    return MaterialApp(
        home: Scaffold(
      body: Container(
        margin: EdgeInsets.all(40.0),
        child: Markdown(data: _markDownData)),
    ));
  }
}
6
stt106

私はutf-codeを使用する方がよいでしょう。リストについては、私はより快適に次のようなものになると思います：

class DottedText extends Text {
  const DottedText(String data, {
    Key key,
    TextStyle style,
    TextAlign textAlign,
    TextDirection textDirection,
    Locale locale,
    bool softWrap,
    TextOverflow overflow,
    double textScaleFactor,
    int maxLines,
    String semanticsLabel,
  }) : super(
    '\u2022 $data',
    key: key,
    style: style,
    textAlign: textAlign,
    textDirection: textDirection,
    locale: locale,
    softWrap: softWrap,
    overflow: overflow,
    textScaleFactor: textScaleFactor,
    maxLines: maxLines,
    semanticsLabel: semanticsLabel,);
}
5
Andrey Turkovsky

これにマークダウンを使用するのはやりすぎです。 •文字の使用ははるかに簡単です。

文字をコピーして貼り付けるのが面倒な場合は、次のカスタムTextを使用してください。

class Bullet extends Text {
  const Bullet(
    String data, {
    Key key,
    TextStyle style,
    TextAlign textAlign,
    TextDirection textDirection,
    Locale locale,
    bool softWrap,
    TextOverflow overflow,
    double textScaleFactor,
    int maxLines,
    String semanticsLabel,
  }) : super(
          '• ${data}',
          key: key,
          style: style,
          textAlign: textAlign,
          textDirection: textDirection,
          locale: locale,
          softWrap: softWrap,
          overflow: overflow,
          textScaleFactor: textScaleFactor,
          maxLines: maxLines,
          semanticsLabel: semanticsLabel,
        );
}
2
Rémi Rousselet

LineSplitter、Row、Column、およびASCII箇条書き）を使用できます。必要なのは、改行付きの文字列だけです。

String myStringWithLinebreaks = "Line 1\nLine 2\nLine 3";

ListTileの例

 ListTile(
                  title: Text("Title Text"),
                  subtitle: 
                    Column(
                      children: LineSplitter.split(myStringWithLinebreaks).map((o) {
                    return Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text("• "),
                        Expanded(
                          child: Text(o),
                        )
                      ],
                    );
                  }).toList())),
0
Raegtime