Replace header dropdown with buttons (#132)

* Replace header dropdown with buttons

* variable name fix and code format

Co-authored-by: Gagan <gaganyadav80@protonmail.com>

lib/widgets/toolbar.dart

@@ -370,8 +370,10 @@ Widget defaultToggleStyleButtonBuilder(
 
 class SelectHeaderStyleButton extends StatefulWidget {
   final QuillController controller;
+  final double headerFontSize;
 
-  const SelectHeaderStyleButton({required this.controller, Key? key})
+  const SelectHeaderStyleButton(
+      {required this.controller, this.headerFontSize = 18.0, Key? key})
       : super(key: key);
 
   @override
@@ -424,62 +426,59 @@ class _SelectHeaderStyleButtonState extends State<SelectHeaderStyleButton> {
 
   @override
   Widget build(BuildContext context) {
-    return _selectHeadingStyleButtonBuilder(context, _value, _selectAttribute);
+    return _selectHeadingStyleButtonBuilder(
+        context, _value, _selectAttribute, widget.headerFontSize);
   }
 }
 
 Widget _selectHeadingStyleButtonBuilder(BuildContext context, Attribute? value,
-    ValueChanged<Attribute?> onSelected) {
+    ValueChanged<Attribute?> onSelected, double headerFontSize) {
-  final style = const TextStyle(fontSize: 13);
-
   final Map<Attribute, String> _valueToText = {
-    Attribute.header: 'Normal text',
+    Attribute.header: 'N',
-    Attribute.h1: 'Heading 1',
+    Attribute.h1: 'H1',
-    Attribute.h2: 'Heading 2',
+    Attribute.h2: 'H2',
-    Attribute.h3: 'Heading 3',
+    Attribute.h3: 'H3',
   };
 
-  return QuillDropdownButton<Attribute?>(
+  List<Attribute> _valueAttribute = [
-    highlightElevation: 0,
+    Attribute.header,
-    hoverElevation: 0,
+    Attribute.h1,
-    height: iconSize * 1.77,
+    Attribute.h2,
-    fillColor: Theme.of(context).canvasColor,
+    Attribute.h3
-    initialValue: value,
+  ];
-    items: [
+  List<String> _valueString = ['N', 'H1', 'H2', 'H3'];
-      PopupMenuItem(
+
-        value: Attribute.header,
+  final theme = Theme.of(context);
-        height: iconSize * 1.77,
+  final style = theme.textTheme.caption?.copyWith(
-        child: Text(_valueToText[Attribute.header]!, style: style),
+    fontWeight: FontWeight.bold,
-      ),
+    fontSize: (15.0 / iconSize) * headerFontSize,
-      PopupMenuItem(
+  );
-        value: Attribute.h1,
+  final width = theme.buttonTheme.constraints.minHeight + 4.0;
-        height: iconSize * 1.77,
+  final constraints = theme.buttonTheme.constraints.copyWith(
-        child: Text(_valueToText[Attribute.h1]!, style: style),
+    minWidth: width,
-      ),
+    maxHeight: theme.buttonTheme.constraints.minHeight,
-      PopupMenuItem(
+  );
-        value: Attribute.h2,
+  final radius = const BorderRadius.all(Radius.circular(3.0));
-        height: iconSize * 1.77,
+
-        child: Text(_valueToText[Attribute.h2]!, style: style),
+  return Row(
-      ),
+    mainAxisSize: MainAxisSize.min,
-      PopupMenuItem(
+    children: List.generate(4, (index) {
-        value: Attribute.h3,
+      return Padding(
-        height: iconSize * 1.77,
+        padding: const EdgeInsets.symmetric(horizontal: 1.0, vertical: 6.0),
-        child: Text(_valueToText[Attribute.h3]!, style: style),
+        child: RawMaterialButton(
-      ),
+          shape: RoundedRectangleBorder(borderRadius: radius),
-    ],
+          elevation: 0.0,
-    onSelected: onSelected,
+          fillColor: _valueToText[value] == _valueString[index]
-    child: Text(
+              ? Theme.of(context).accentColor.withOpacity(0.4)
-      !kIsWeb
+              : Colors.white,
-          ? _valueToText[value!]!
+          constraints: constraints,
-          : _valueToText[value!.key == 'header'
+          onPressed: () {
-              ? Attribute.header
+            onSelected(_valueAttribute[index]);
-              : (value.key == 'h1')
+          },
-                  ? Attribute.h1
+          child: Text(_valueString[index], style: style),
-                  : (value.key == 'h2')
+        ),
-                      ? Attribute.h2
+      );
-                      : Attribute.h3]!,
+    }),
-      style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w600),
-    ),
   );
 }
 
@@ -1027,11 +1026,12 @@ class QuillToolbar extends StatefulWidget implements PreferredSizeWidget {
       Visibility(
           visible: showHeaderStyle,
           child: VerticalDivider(
-              indent: 16, endIndent: 16, color: Colors.grey.shade400)),
+              indent: 12, endIndent: 12, color: Colors.grey.shade400)),
       Visibility(
           visible: showHeaderStyle,
-          child: SelectHeaderStyleButton(controller: controller)),
+          child: SelectHeaderStyleButton(
-      VerticalDivider(indent: 16, endIndent: 16, color: Colors.grey.shade400),
+              controller: controller, headerFontSize: toolbarIconSize)),
+      VerticalDivider(indent: 12, endIndent: 12, color: Colors.grey.shade400),
       Visibility(
         visible: showListNumbers,
         child: ToggleStyleButton(
@@ -1070,7 +1070,7 @@ class QuillToolbar extends StatefulWidget implements PreferredSizeWidget {
               !showListCheck &&
               !showCodeBlock,
           child: VerticalDivider(
-              indent: 16, endIndent: 16, color: Colors.grey.shade400)),
+              indent: 12, endIndent: 12, color: Colors.grey.shade400)),
       Visibility(
         visible: showQuote,
         child: ToggleStyleButton(
@@ -1098,7 +1098,7 @@ class QuillToolbar extends StatefulWidget implements PreferredSizeWidget {
       Visibility(
           visible: showQuote,
           child: VerticalDivider(
-              indent: 16, endIndent: 16, color: Colors.grey.shade400)),
+              indent: 12, endIndent: 12, color: Colors.grey.shade400)),
       Visibility(
           visible: showLink, child: LinkStyleButton(controller: controller)),
       Visibility(