Filled elevated button

Author: FeodorFitsner

client/lib/controls/elevated_button.dart

@@ -30,6 +30,8 @@ class ElevatedButtonControl extends StatelessWidget {
         HexColor.fromString(context, control.attrString("iconColor", "")!);
     var contentCtrls = children.where((c) => c.name == "content");
     bool autofocus = control.attrBool("autofocus", false)!;
+    bool filled = control.attrBool("filled", false)!;
+    bool filledTonal = control.attrBool("filledTonal", false)!;
     bool disabled = control.isDisabled || parentDisabled;
 
     Function()? onPressed = disabled
@@ -43,9 +45,27 @@ class ElevatedButtonControl extends StatelessWidget {
           };
 
     ElevatedButton? button;
+    ButtonStyle? style;
+
+    if (filled) {
+      style = ElevatedButton.styleFrom(
+        // Foreground color
+        onPrimary: Theme.of(context).colorScheme.onPrimary,
+        // Background color
+        primary: Theme.of(context).colorScheme.primary,
+      ).copyWith(elevation: ButtonStyleButton.allOrNull(0.0));
+    } else if (filledTonal) {
+      style = ElevatedButton.styleFrom(
+        // Foreground color
+        onPrimary: Theme.of(context).colorScheme.onSecondaryContainer,
+        // Background color
+        primary: Theme.of(context).colorScheme.secondaryContainer,
+      ).copyWith(elevation: ButtonStyleButton.allOrNull(0.0));
+    }
 
     if (icon != null) {
       button = ElevatedButton.icon(
+          style: style,
           autofocus: autofocus,
           onPressed: onPressed,
           icon: Icon(
@@ -55,11 +75,13 @@ class ElevatedButtonControl extends StatelessWidget {
           label: Text(text));
     } else if (contentCtrls.isNotEmpty) {
       button = ElevatedButton(
+          style: style,
           autofocus: autofocus,
           onPressed: onPressed,
           child: createControl(control, contentCtrls.first.id, disabled));
     } else {
-      button = ElevatedButton(onPressed: onPressed, child: Text(text));
+      button =
+          ElevatedButton(style: style, onPressed: onPressed, child: Text(text));
     }
 
     return constrainedControl(button, parent, control);

client/lib/controls/page.dart

@@ -7,7 +7,6 @@ import '../models/app_state.dart';
 import '../models/control.dart';
 import '../models/control_children_view_model.dart';
 import '../utils/alignment.dart';
-import '../utils/color_theme.dart';
 import '../utils/colors.dart';
 import '../utils/edge_insets.dart';
 import '../utils/theme.dart';
@@ -72,7 +71,7 @@ class PageControl extends StatelessWidget {
     // theme
     var theme = parseTheme(control, "theme") ??
         ThemeData(
-            colorScheme: lightColorScheme,
+            colorSchemeSeed: Colors.blue,
             brightness: Brightness.light,
             useMaterial3: true,
             // fontFamily: kIsWeb && window.navigator.userAgent.contains('OS 15_')
@@ -82,7 +81,7 @@ class PageControl extends StatelessWidget {
 
     var darkTheme = parseTheme(control, "darkTheme") ??
         ThemeData(
-            colorScheme: darkColorScheme,
+            colorSchemeSeed: Colors.blue,
             brightness: Brightness.dark,
             useMaterial3: true,
             visualDensity: VisualDensity.adaptivePlatformDensity);

client/lib/utils/color_theme.dart

@@ -23,6 +23,8 @@ def __init__(
         #
         # Specific
         #
+        filled: bool = None,
+        filled_tonal: bool = None,
         icon: str = None,
         icon_color: str = None,
         content: Control = None,
@@ -43,6 +45,8 @@ def __init__(
         )
 
         self.text = text
+        self.filled = filled
+        self.filled_tonal = filled_tonal
         self.icon = icon
         self.icon_color = icon_color
         self.content = content
@@ -67,6 +71,26 @@ def text(self):
     def text(self, value):
         self._set_attr("text", value)
 
+    # filled
+    @property
+    def filled(self):
+        return self._get_attr("filled", data_type="bool", def_value=False)
+
+    @filled.setter
+    @beartype
+    def filled(self, value: Optional[bool]):
+        self._set_attr("filled", value)
+
+    # filled_tonal
+    @property
+    def filled_tonal(self):
+        return self._get_attr("filledTonal", data_type="bool", def_value=False)
+
+    @filled_tonal.setter
+    @beartype
+    def filled_tonal(self, value: Optional[bool]):
+        self._set_attr("filledTonal", value)
+
     # icon
     @property
     def icon(self):

sdk/python/flet/elevated_button.py

@@ -32,7 +32,7 @@ def main(page: Page):
             expand=1,
             scroll=True,
             controls=[
-                Text("Elevated buttons", style="headlineMedium"),
+                Text("Elevated button", style="headlineMedium"),
                 ElevatedButton("Normal button"),
                 ElevatedButton("Disabled button", disabled=True),
                 ElevatedButton(
@@ -56,6 +56,69 @@ def main(page: Page):
                         alignment="spaceAround",
                     ),
                 ),
+                #
+                #
+                #
+                Text("Elevated Filled button", style="headlineMedium"),
+                ElevatedButton("Filled button", filled=True),
+                ElevatedButton("Disabled button", filled=True, disabled=True),
+                ElevatedButton(
+                    "Button with icon and tooltip",
+                    filled=True,
+                    icon="chair_outlined",
+                    tooltip="Hey, click me!",
+                ),
+                ElevatedButton(
+                    "Button with colorful icon",
+                    filled=True,
+                    icon="park_rounded",
+                    icon_color="green400",
+                ),
+                ElevatedButton(
+                    width=150,
+                    filled=True,
+                    content=Row(
+                        [
+                            Icon(name="favorite", color="pink"),
+                            Icon(name="audiotrack", color="green"),
+                            Icon(name="beach_access", color="blue"),
+                        ],
+                        alignment="spaceAround",
+                    ),
+                ),
+                #
+                #
+                #
+                Text("Elevated Filled Tonal button", style="headlineMedium"),
+                ElevatedButton("Tonal button", filled_tonal=True),
+                ElevatedButton("Disabled button", filled_tonal=True, disabled=True),
+                ElevatedButton(
+                    "Button with icon and tooltip",
+                    filled_tonal=True,
+                    icon="chair_outlined",
+                    tooltip="Hey, click me!",
+                ),
+                ElevatedButton(
+                    "Button with colorful icon",
+                    filled_tonal=True,
+                    icon="park_rounded",
+                    icon_color="green400",
+                ),
+                ElevatedButton(
+                    width=150,
+                    filled_tonal=True,
+                    content=Row(
+                        [
+                            Icon(name="favorite", color="pink"),
+                            Icon(name="audiotrack", color="green"),
+                            Icon(name="beach_access", color="blue"),
+                        ],
+                        alignment="spaceAround",
+                    ),
+                ),
+                #
+                #
+                #
                 Text("Outlined buttons", style="headlineMedium"),
                 OutlinedButton("Normal button"),
                 OutlinedButton("Disabled button", disabled=True),