56

I have a list and I want to add a bullet to each item (I'm using new Column because I don't want to implement scrolling). How would I create a bulleted list?

I'm thinking maybe an icon but possibly there is a way with the decoration class used in the text style.

13 Answers 13

74

To make it as simple as possible, you can use UTF-code. This's going to be a bullet

String bullet = "\u2022 "

1
  • 2
    space needs to be removed Commented Jun 15, 2021 at 10:57
31

Simple Answer

If you looking for just a symbol, then use Text('\u2022 Bullet Text')


Detailed Answer

I have created a custom widget for Bullet List of Strings. I am sharing the code so that anyone would find it helpful.

Output:

Code For BulletList Widget

(You can paste this in a separate file like 'bullet_widget.dart' and later import to your screen.)

import 'package:flutter/material.dart';

class BulletList extends StatelessWidget {
  final List<String> strings;

  BulletList(this.strings);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.fromLTRB(16, 15, 16, 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: strings.map((str) {
          return Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                '\u2022',
                style: TextStyle(
                  fontSize: 16,
                  height: 1.55,
                ),
              ),
              SizedBox(
                width: 5,
              ),
              Expanded(
                child: Container(
                  child: Text(
                    str,
                    textAlign: TextAlign.left,
                    softWrap: true,
                    style: TextStyle(
                      fontSize: 16,
                      color: Colors.black.withOpacity(0.6),
                      height: 1.55,
                    ),
                  ),
                ),
              ),
            ],
          );
        }).toList(),
      ),
    );
  }
}

This will Take List of Strings and Output with Bullets. Like This example.

         Container(
            height: 327,
            decoration: BoxDecoration(
                color: Constants.agreementBG,
                borderRadius: BorderRadius.circular(14)),
            child: SingleChildScrollView(
              
              child: BulletList([
                 'Text 1',
                 'Text 2', 
                 'Text 3',
              ]),
            ),
          ),
0
26

Following widget will create a filled circle shape, So you can call this widget for every item in your column.

class MyBullet extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Container(
  decoration: new BoxDecoration(
    color: Colors.black,
    shape: BoxShape.circle,
  ),
  );
  }
}

Hope this is what you want !

EDIT :

class MyList extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new ListTile(
          leading: new MyBullet(),
          title: new Text('My first line'),
        ),
        new ListTile(
          leading: new MyBullet(),
          title: new Text('My second line'),
        )
      ],
    );
  }
}
class MyBullet extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Container(
    height: 20.0,
    width: 20.0,
    decoration: new BoxDecoration(
    color: Colors.black,
    shape: BoxShape.circle,
  ),
  );
  }
}

enter image description here

4
  • 1
    Thanks Tushar, I'll try this. Ideally I was looking for something a little bit more built in...ie something that would react with the size of the font...align properly to the middle etc but thank you
    – atreeon
    Commented Apr 3, 2018 at 9:42
  • Ohhh ! Updated it, Can you check with edited solution
    – Tushar Pol
    Commented Apr 3, 2018 at 10:04
  • 14
    You could use as your bullet an actual character. There's one. It's . Commented Apr 3, 2018 at 15:19
  • Bullet '\u2022' Commented Sep 3, 2020 at 21:09
14

I used the ascii character E.G.

...your widget hierarchy Text(String.fromCharCode(0x2022)), ...

11

You can just add an icon.

class MyList extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new ListTile(
          leading: Icon(Icons.fiber_manual_record),
          title: new Text('My first line'),
        ),
        new ListTile(
          leading: Icon(Icons.fiber_manual_record),
          title: new Text('My second line'),
        )
      ],
    );
  }
}
6

I might be late to answer this question, but it might be of help to someone who is looking for how to use bullet in a text. It can be done using RichText.

            RichText(
                text: TextSpan(
                  text: '• ',
                  style: TextStyle(color: Colors.lightBlue, fontSize: 18),
                  children: <TextSpan>[
                    TextSpan(text: 'Software Developer',style: 
                  GoogleFonts.ptSansNarrow(textStyle: TextStyle(fontSize: 18))),
                  ],
                ),
              )

So, in this case, the color of the bullet can also be changed as you wish!

6

Here you have the class for bullet text

import 'package:flutter/cupertino.dart';

class BulletText extends StatelessWidget {
    late String txt;
    BulletText(String t){
        txt = t;
    }

    Widget build(BuildContext context) {
        return Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
                Text('\u2022'),
                SizedBox(width: 5),
                Expanded(
                  child: Text(txt)
                )
            ],
        );
    }
}
5

You can use CircleAvatar something like below

ListTile(
              leading: CircleAvatar(
                radius: 6.0,
                backgroundColor: Colors.black,
              ),
              title : Text("Timestamp: C0238 - Wheel Speed Mismatch")
          ),
2

I got the idea from Tushar Pol. In case you want to display a number on the bullet then you can refer to my code.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class AppBullet extends StatelessWidget {
  AppBullet({
    @required this.width,
    @required this.height,
    this.order,
  })  : assert(width != null),
        assert(height != null);

  final double width;
  final double height;
  final int order;

  @override
  Widget build(BuildContext context) {
    return order == null
        ? _buildBullet(context)
        : _buildBulletWithOrder(context);
  }

  Widget _buildBullet(BuildContext context) {
    return new Container(
      height: height,
      width: width,
      decoration: new BoxDecoration(
        color: Colors.black,
        shape: BoxShape.circle,
      ),
    );
  }

  Widget _buildBulletWithOrder(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        _buildBullet(context),
        Text(
          '$order',
          style: GoogleFonts.lato(fontSize: 12.0, color: Colors.white),
        ),
      ],
    );
  }
}
1

Entypo.dot_single from Flutter vector Icons library

import 'package:flutter/material.dart';
import 'package:flutter_vector_icons/flutter_vector_icons.dart';

class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        MyListItem(title: 'First Item'),
        MyListItem(title: 'Second Item'),
      ],
    );
  }
}

class MyListItem extends StatelessWidget {
  final String title;

  MyListItem({this.title});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Icon(Entypo.dot_single),
        Text(title),
      ],
    );
  }
}

Screenshot

0

May be this does not answer this question. I think, this answer can be helpful to other developers.

I use this code to draw a circle of solid color:

CircleAvatar(
  radius: 5.0,
  backgroundColor: Colors.black,
)

to add extra padding at top, I use Container:

Container(
  padding: EdgeInsets.only(top: 3),
  child: CircleAvatar(
    radius: 5.0,
    backgroundColor: Colors.black,
  )
)

Also you can use other backgroundColor in CircleAvatar.

Thanks to: @NBM

0

The solution using flutter widget is to either use the Icon Icon(Icons.circle) or Container or CirleAvatar. There are different solutions. but the one with Icons is easier I think.

You can create a separate class to generate the bullet item that you can further easily modify as per your design. i.e you can use different bullet styles like instead of circle rectangle, triangle, any other icon.

I have just added the option to add the custom padding.

Code:

class MyBulletList extends StatelessWidget {
  final String text;
  final double vpad;
  final double hpad;

  MyBulletList({
    required this.text,
    this.hpad = 24.0,
    this.vpad = 8.0,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: hpad, vertical: vpad),
      child: Row(
        children: [
          Icon(
            Icons.circle,
            size: 6,
            color: Colors.grey,
          ),
          SizedBox(
            width: 5,
          ),
          Text(
            text,
          )
        ],
      ),
    );
  }
}
0
class UL extends StatelessWidget {
  final String text;

  const UL(this.text, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 3),
      child: Row(

        children: [
          Padding(
            padding: const EdgeInsets.only(right: 14),
            child: Icon(
              Icons.circle,
              size: Theme.of(context).textTheme.bodyText1?.fontSize,
            ),
          ),
          Text(text, style: Theme.of(context).textTheme.bodyText1),
        ],
      ),
    );
    // return ListTile(
    //   contentPadding: EdgeInsets.zero,
    //   minVerticalPadding: 0,
    //   dense: true,
    //   visualDensity: VisualDensity(vertical: -4, horizontal: 0),
    //   leading: Container(
    //     height: double.infinity,
    //     child: Icon(
    //       Icons.circle,
    //       size: Theme.of(context).textTheme.bodyText1?.fontSize,
    //     ),
    //   ),
    //   title: Text(text, style: Theme.of(context).textTheme.bodyText1),
    // );
  }
}

You can also pass in padding as an optional parameter to this widget if needed to customize padding

Not the answer you're looking for? Browse other questions tagged or ask your own question.