feat: show editing option name in bottom bar for easier access

Author: SirusCodes

lib/image_builder/layers/background.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:heartry/image_builder/widgets/editing_option.dart';
 
 import '../../widgets/color_picker_dialog.dart';
 import '../../widgets/gradient_palette_selector.dart';
@@ -36,7 +37,8 @@ class SolidBackgroundLayer extends ImageLayer {
   @override
   List<Widget> getEditingOptions(BuildContext context) {
     return [
-      IconButton(
+      EditingOption(
+        option: "Background",
         icon: Icon(Icons.texture_rounded),
         tooltip: "Background Color",
         onPressed: () {
@@ -101,7 +103,8 @@ class GradientBackgroundLayer extends ImageLayer {
   @override
   List<Widget> getEditingOptions(BuildContext context) {
     return [
-      IconButton(
+      EditingOption(
+        option: "Background",
         icon: Icon(Icons.gradient_rounded),
         tooltip: "Background Gradient",
         onPressed: () {

lib/image_builder/layers/text.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:heartry/image_builder/widgets/editing_option.dart';
 import '../core/font_family.dart';
 import 'package:material_symbols_icons/symbols.dart';
 
@@ -45,7 +46,8 @@ class TextLayer extends ImageLayer {
     final colorScheme = Theme.of(context).colorScheme;
 
     return [
-      IconButton(
+      EditingOption(
+        option: "Text Color",
         icon: Icon(Icons.format_color_text_rounded),
         tooltip: "Text Color",
         onPressed: () {
@@ -68,7 +70,8 @@ class TextLayer extends ImageLayer {
           );
         },
       ),
-      IconButton(
+      EditingOption(
+        option: "Text Size",
         icon: Icon(Icons.format_size_rounded),
         tooltip: "Text Size",
         onPressed: () {
@@ -89,7 +92,8 @@ class TextLayer extends ImageLayer {
           );
         },
       ),
-      IconButton(
+      EditingOption(
+        option: "Font Family",
         icon: Icon(Symbols.font_download_rounded),
         tooltip: "Font Family",
         onPressed: () {

lib/image_builder/widgets/editing_option.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+
+class EditingOption extends StatelessWidget {
+  const EditingOption({
+    super.key,
+    required this.option,
+    required this.icon,
+    required this.onPressed,
+    required this.tooltip,
+  });
+
+  final String option, tooltip;
+  final Widget icon;
+  final VoidCallback onPressed;
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      borderRadius: BorderRadius.circular(8.0),
+      onTap: onPressed,
+      child: Tooltip(
+        message: tooltip,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 4.0),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            mainAxisAlignment: MainAxisAlignment.center,
+            spacing: 5,
+            children: [
+              icon,
+              Text(
+                option,
+                style: Theme.of(context).textTheme.bodySmall,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/screens/image_screen/image_screen.dart

@@ -9,6 +9,7 @@ import 'package:share_plus/share_plus.dart';
 
 import '../../image_builder/core/image_controller.dart';
 import '../../image_builder/templates/template.dart';
+import '../../image_builder/widgets/editing_option.dart';
 import '../../image_builder/widgets/page_details.dart';
 import '../share_images_screen/share_images_screen.dart';
 
@@ -101,8 +102,9 @@ class _ImageScreenState extends State<ImageScreen> {
         child: Row(
           children: [
             Padding(
-              padding: const EdgeInsets.all(8.0),
-              child: IconButton(
+              padding: const EdgeInsets.symmetric(horizontal: 8.0),
+              child: EditingOption(
+                option: "Templates",
                 tooltip: "Change Template",
                 icon: const Icon(Symbols.stacks),
                 onPressed: () {