feat: segmented checklist progress bar (#3770)

* feat: added segments to the checklist progress bar

* chore: display empty progress bar in checklist editor when no tasks added

* refactor: used Container to represent segments

* refactor: implemented segments using Flexible and generated them using List.generate

frontend/appflowy_flutter/lib/plugins/database_view/widgets/card/cells/checklist_card_cell.dart

@@ -38,7 +38,10 @@ class _ChecklistCellState extends State<ChecklistCardCell> {
           }
           return Padding(
             padding: const EdgeInsets.symmetric(vertical: 4),
-            child: ChecklistProgressBar(percent: state.percent),
+            child: ChecklistProgressBar(
+              tasks: state.tasks,
+              percent: state.percent,
+            ),
           );
         },
       ),

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell.dart

@@ -94,7 +94,10 @@ class GridChecklistCellState extends GridCellState<GridChecklistCell> {
                         mainAxisSize: MainAxisSize.min,
                         children: [
                           Flexible(
-                            child: ChecklistProgressBar(percent: state.percent),
+                            child: ChecklistProgressBar(
+                              tasks: state.tasks,
+                              percent: state.percent,
+                            ),
                           ),
                           const HSpace(6.0),
                           FlowyIconButton(
@@ -154,7 +157,10 @@ class GridChecklistCellState extends GridCellState<GridChecklistCell> {
                         widget.cellStyle.placeholder,
                         color: Theme.of(context).hintColor,
                       )
-                    : ChecklistProgressBar(percent: state.percent),
+                    : ChecklistProgressBar(
+                        tasks: state.tasks,
+                        percent: state.percent,
+                      ),
               ),
             ),
           );

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_cell_editor.dart

@@ -69,6 +69,7 @@ class _GridChecklistCellState extends State<GridChecklistCellEditor> {
                     : Padding(
                         padding: const EdgeInsets.fromLTRB(16, 16, 16, 4),
                         child: ChecklistProgressBar(
+                          tasks: state.tasks,
                           percent: state.percent,
                         ),
                       ),

frontend/appflowy_flutter/lib/plugins/database_view/widgets/row/cells/checklist_cell/checklist_progress_bar.dart

@@ -2,11 +2,18 @@ import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:percent_indicator/percent_indicator.dart';
+import 'checklist_cell_bloc.dart';
 
 class ChecklistProgressBar extends StatefulWidget {
+  final List<ChecklistSelectOption> tasks;
   final double percent;
-  const ChecklistProgressBar({required this.percent, Key? key})
+  final int segmentLimit = 5;
-      : super(key: key);
+
+  const ChecklistProgressBar({
+    required this.tasks,
+    required this.percent,
+    Key? key,
+  }) : super(key: key);
 
   @override
   State<ChecklistProgressBar> createState() => _ChecklistProgressBarState();
@@ -15,16 +22,45 @@ class ChecklistProgressBar extends StatefulWidget {
 class _ChecklistProgressBarState extends State<ChecklistProgressBar> {
   @override
   Widget build(BuildContext context) {
+    final int finishedTasks = widget.tasks.where((e) => e.isSelected).length;
+
     return Row(
       children: [
         Expanded(
-          child: LinearPercentIndicator(
+          child: Row(
-            lineHeight: 4.0,
+            children: [
-            percent: widget.percent,
+              if (widget.tasks.isNotEmpty &&
-            padding: EdgeInsets.zero,
+                  widget.tasks.length <= widget.segmentLimit)
-            progressColor: Theme.of(context).colorScheme.primary,
+                ...List<Widget>.generate(
-            backgroundColor: AFThemeExtension.of(context).progressBarBGColor,
+                  widget.tasks.length,
-            barRadius: const Radius.circular(5),
+                  (index) => Flexible(
+                    child: Container(
+                      decoration: BoxDecoration(
+                        borderRadius:
+                            const BorderRadius.all(Radius.circular(5)),
+                        color: index < finishedTasks
+                            ? Theme.of(context).colorScheme.primary
+                            : AFThemeExtension.of(context).progressBarBGColor,
+                      ),
+                      margin: const EdgeInsets.symmetric(horizontal: 1),
+                      height: 4.0,
+                    ),
+                  ),
+                )
+              else ...[
+                Expanded(
+                  child: LinearPercentIndicator(
+                    lineHeight: 4.0,
+                    percent: widget.percent,
+                    padding: EdgeInsets.zero,
+                    progressColor: Theme.of(context).colorScheme.primary,
+                    backgroundColor:
+                        AFThemeExtension.of(context).progressBarBGColor,
+                    barRadius: const Radius.circular(5),
+                  ),
+                ),
+              ]
+            ],
           ),
         ),
         SizedBox(