From 81ef315f16fb274b655256f29485e1abde1306d7 Mon Sep 17 00:00:00 2001
From: Shu Chen <shu@zulip.com>
Date: Fri, 15 Dec 2023 14:40:34 +0000
Subject: [PATCH] add unordereditemwidget

---
 lib/widgets/content.dart | 35 ++++++++++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/lib/widgets/content.dart b/lib/widgets/content.dart
index a10c39e711..43b361cbee 100644
--- a/lib/widgets/content.dart
+++ b/lib/widgets/content.dart
@@ -191,21 +191,42 @@ class ListNodeWidget extends StatelessWidget {
         //   see:
         //     https://html.spec.whatwg.org/multipage/rendering.html#lists
         //     https://www.w3.org/TR/css-counter-styles-3/#simple-symbolic
-        // TODO proper alignment of unordered marker; should be "• ", one space,
-        //   but that comes out too close to item; not sure what's fixing that
-        //   in a browser
-        case ListStyle.unordered: marker = "•   "; break;
+        case ListStyle.unordered:
+          marker = "\u2022";
+          return ListUnorderedItemWidget(marker: marker, nodes: item);
         // TODO(#59) ordered lists starting not at 1
-        case ListStyle.ordered: marker = "${index+1}. "; break;
+        case ListStyle.ordered:
+          marker = "${index+1}. ";
+          return ListItemWidget(marker: marker, nodes: item);
       }
-      return ListItemWidget(marker: marker, nodes: item);
     });
     return Padding(
-      padding: const EdgeInsets.only(top: 2, bottom: 5),
+      padding: const EdgeInsets.only(bottom: 5),
       child: Column(children: items));
   }
 }
 
+class ListUnorderedItemWidget extends StatelessWidget {
+  const ListUnorderedItemWidget({super.key, required this.marker, required this.nodes});
+
+  final String marker;
+  final List<BlockContentNode> nodes;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.baseline,
+        textBaseline: TextBaseline.alphabetic,
+        children: [
+          SizedBox(
+            width: 20,
+            child: Text(marker, textAlign: TextAlign.center)),
+          Expanded(child: BlockContentList(nodes: nodes)),
+        ]);
+  }
+}
+
 class ListItemWidget extends StatelessWidget {
   const ListItemWidget({super.key, required this.marker, required this.nodes});