Comment ajouter une liste à puces dans Flutter

Dans ce tutoriel, nous apprendrons comment ajouter ou créer une liste à puces dans Flutter. En HTML, vous avez peut-être utilisé les balises "<ul>", "<Li>", "<ol>" pour créer une liste à puces, mais ici, dans Flutter, vous n'avez pas de tel widget. Vous devez créer une liste à puces personnalisée. Voir l'exemple ci-dessous pour plus de détails.

Comment ajouter une liste à puces dans Flutter :

Row(
  children:[
    Text("\u2022", style: TextStyle(fontSize: 30),), //bullet text
    SizedBox(width: 10,), //space between bullet and text
    Expanded( 
      child:Text("Hello World", style: TextStyle(fontSize: 30),), //text
    )
  ]
) //one bullet item

Ici, nous avons une ligne dans laquelle nous avons affiché le texte de la puce en début de page, et après cela, nous avons affiché le widget de texte. 

Exemple d'application complète :

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  List<String> str = [
                     "Hello World", 
                      "This is FlutterCampus", 
                      "Learn App Building.",
                       "Flutter is the Best"];
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("Bullet List in Flutter"),
            backgroundColor: Colors.redAccent,
          ),
          body: Container( 
            padding: EdgeInsets.all(20),
            child: Column(
               children: str.map((strone){
                   return Row(
                      children:[
                        Text("\u2022", style: TextStyle(fontSize: 30),), //bullet text
                        SizedBox(width: 10,), //space between bullet and text
                        Expanded( 
                          child:Text(strone, style: TextStyle(fontSize: 30),), //text
                        )
                      ]
                   );
               }).toList(),
            ),
          )
       );
  }
}

Ici, nous avons la liste des chaînes et nous avons utilisé cette liste de tableaux de chaînes pour remplir les éléments dans une liste à puces.