このチュートリアルでは、Flutter で箇条書きリストを追加または作成する方法を学びます。HTML では箇条書きリストを作成するために「<ul>」、「<Li>」、「<ol>」タグを使用したことがありますが、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(),
),
)
);
}
}
ここには文字列のリストがあり、この文字列の配列リストを使用して項目を箇条書きリストに入力しています。