Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

flutter

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.

like image 450
atreeon Avatar asked Apr 03 '18 08:04

atreeon


People also ask

How do you make bullets in flutter?

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.

How do I add bullet points to a list?

Place your cursor where you want a bulleted list. Click Home> Paragraph, and then click the arrow next to Bullets. Choose a bullet style and start typing.

Which tag can creates list as a bullet point?

You create an unordered list using the ul tag. Then, you use the li tag to list each and every one of the items you want your list to include.


2 Answers

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

String bullet = "\u2022 "

like image 55
jhgju77 Avatar answered Sep 30 '22 15:09

jhgju77


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

like image 33
Tushar Pol Avatar answered Sep 30 '22 15:09

Tushar Pol