In this example, we will show you how to add or create a bullet list in Flutter. In HTML you may have used "<ul>", "<Li>", "<ol>" tag to make bulleted list, but here in Flutter, you have no such widget. You have to make a custom bullet list. See the example below for more detail.
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
Here, we have a row where we have shown the bullet text at the leading, and after that, we have shown the text widget.
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(),
),
)
);
}
}
Here, we have the list of String, and we have used this array list of strings to populate items into a bullet list.
In this way, you can add a bullet list UI in Flutter.
Please Wait...
No any Comments on this Article