How do I add a bullet or create a bulleted list in flutter - flutter

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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',
]),
),
),

Answer 4

I used the ascii character E.G.
...your widget hierarchy
Text(String.fromCharCode(0x2022)),
...

Answer 5

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

Answer 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!

Answer 7

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

Answer 8

You can use CircleAvatar something like below
ListTile(
leading: CircleAvatar(
radius: 6.0,
backgroundColor: Colors.black,
),
title : Text("Timestamp: C0238 - Wheel Speed Mismatch")
),

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

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

Answer 13

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