web-dev-qa-db-fra.com

Comment puis-je écrire un paragraphe avec des puces en utilisant Flutter?

En utilisant HTML, je peux ajouter des puces à un paragraphe comme celui-ci:

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

Comment puis-je écrire un formulaire à puces dans Flutter?

new Text(''),
10
lesego finger

J'ai essayé d'utiliser flutter_markdown et cela semble fonctionner. Et bien sûr, vous pouvez le changer en liste numérotée/ordonnée ou non ordonnée comme vous le souhaitez.

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

Je ferais mieux d'utiliser le code utf. Pour la liste, je pense que plus confortablement sera quelque chose comme:

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

Utiliser le démarque pour cela est exagéré. En utilisant le caractère est de loin plus facile.

Si vous êtes trop paresseux pour copier coller le personnage, voici un Text personnalisé qui le fait pour vous:

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

Vous pouvez utiliser LineSplitter, Row, Column et la puce ASCII. Tout ce dont vous avez besoin est une chaîne avec des sauts de ligne.

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

Exemple dans un 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