Replace header dropdown with buttons

lib/widgets/toolbar.dart

@@ -370,8 +370,9 @@ 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 +425,46 @@ 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 = [Attribute.header, Attribute.h1, Attribute.h2, Attribute.h3];
-    highlightElevation: 0,
+  List<String> _valueString = ['N','H1','H2','H3'];
-    hoverElevation: 0,
+
-    height: iconSize * 1.77,
+  final theme = Theme.of(context);
-    fillColor: Theme.of(context).canvasColor,
+  final style = theme.textTheme.caption?.copyWith(fontWeight: FontWeight.bold, fontSize: (15.0/iconSize)*headerfontSize);
-    initialValue: value,
+  final width = theme.buttonTheme.constraints.minHeight + 4.0;
-    items: [
+  final constraints = theme.buttonTheme.constraints.copyWith(
-      PopupMenuItem(
+        minWidth: width, maxHeight: theme.buttonTheme.constraints.minHeight);
-        value: Attribute.header,
+  final radius = const BorderRadius.all(Radius.circular(3.0));
-        height: iconSize * 1.77,
+
-        child: Text(_valueToText[Attribute.header]!, style: style),
+  return Row(
-      ),
+    mainAxisSize: MainAxisSize.min,
-      PopupMenuItem(
+    children: List.generate(4, (index) {
-        value: Attribute.h1,
+      return Padding(
-        height: iconSize * 1.77,
+      padding: const EdgeInsets.symmetric(horizontal: 1.0, vertical: 6.0),
-        child: Text(_valueToText[Attribute.h1]!, style: style),
+      child: RawMaterialButton(
-      ),
+        shape: RoundedRectangleBorder(borderRadius: radius),
-      PopupMenuItem(
+        elevation: 0.0,
-        value: Attribute.h2,
+        fillColor: _valueToText[value] == _valueString[index] ? Theme.of(context).accentColor.withOpacity(0.4) : Colors.white,
-        height: iconSize * 1.77,
+        constraints: constraints,
-        child: Text(_valueToText[Attribute.h2]!, style: style),
+        onPressed: () {
-      ),
+          onSelected(_valueAttribute[index]);
-      PopupMenuItem(
+        },
-        value: Attribute.h3,
+        child: Text(_valueString[index], style: style),
-        height: iconSize * 1.77,
-        child: Text(_valueToText[Attribute.h3]!, style: style),
       ),
-    ],
+    );
-    onSelected: onSelected,
+    }),
-    child: Text(
-      !kIsWeb
-          ? _valueToText[value!]!
-          : _valueToText[value!.key == 'header'
-              ? Attribute.header
-              : (value.key == 'h1')
-                  ? Attribute.h1
-                  : (value.key == 'h2')
-                      ? Attribute.h2
-                      : Attribute.h3]!,
-      style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w600),
-    ),
   );
 }
 
@@ -1027,11 +1012,11 @@ 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(controller: controller, headerfontSize: toolbarIconSize)),
-      VerticalDivider(indent: 16, endIndent: 16, color: Colors.grey.shade400),
+      VerticalDivider(indent: 12, endIndent: 12, color: Colors.grey.shade400),
       Visibility(
         visible: showListNumbers,
         child: ToggleStyleButton(
@@ -1070,7 +1055,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 +1083,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(