Flutterで箇条書きリストを追加する方法

このチュートリアルでは、Flutter で箇条書きリストを追加または作成する方法を学びます。HTML では箇条書きリストを作成するために「<ul>」、「<Li>」、「<ol>」タグを使用したことがありますが、Flutter にはそのようなウィジェットはありません。カスタムの箇条書きリストを作成する必要があります。詳細については、以下の例を参照してください。

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

ここでは先頭に箇条書きテキストを表示し、その後にテキスト ウィジェットを表示している行があります。 

完全なアプリの例:

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

ここには文字列のリストがあり、この文字列の配列リストを使用して項目を箇条書きリストに入力しています。