How to Create Bullet List in Flutter

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. 

No any Comments on this Article


Please Wait...