Update widgets UI as per the latest Material 3 colors

2025-05-20 15:56:34 +08:00 · 2025-03-01 19:45:40 +05:30
parent b4827dc2c5
commit 32210e60cc
16 changed files with 30 additions and 76 deletions
--- a/lib/widgets/card_history_request.dart
+++ b/lib/widgets/card_history_request.dart
@ -21,8 +21,7 @@ class HistoryRequestCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Color color = Theme.of(context).colorScheme.surface;
-    final Color colorVariant =
-        Theme.of(context).colorScheme.surfaceContainerHighest.withOpacity(0.5);
+    final Color colorVariant = Theme.of(context).colorScheme.surfaceContainer;
    final Color surfaceTint = Theme.of(context).colorScheme.primary;
    return Card(
      shape: const ContinuousRectangleBorder(borderRadius: kBorderRadius12),
@ -38,7 +37,6 @@ class HistoryRequestCard extends StatelessWidget {
        onTap: onTap,
        borderRadius: kBorderRadius6,
        hoverColor: colorVariant,
-        focusColor: colorVariant.withOpacity(0.5),
        child: Padding(
          padding: kPv6 + kPh8,
          child: SizedBox(
--- a/lib/widgets/card_sidebar_environment.dart
+++ b/lib/widgets/card_sidebar_environment.dart
@ -43,8 +43,7 @@ class SidebarEnvironmentCard extends StatelessWidget {
    final colorScheme = Theme.of(context).colorScheme;
    final Color color =
        isGlobal ? colorScheme.secondaryContainer : colorScheme.surface;
-    final Color colorVariant =
-        colorScheme.surfaceContainerHighest.withOpacity(0.5);
+    final Color colorVariant = colorScheme.surfaceContainer;
    final Color surfaceTint = colorScheme.primary;
    bool isSelected = selectedId == id;
    bool inEditMode = editRequestId == id;
@ -68,7 +67,7 @@ class SidebarEnvironmentCard extends StatelessWidget {
        child: InkWell(
          borderRadius: kBorderRadius8,
          hoverColor: colorVariant,
-          focusColor: colorVariant.withOpacity(0.5),
+          focusColor: colorVariant,
          onTap: inEditMode ? null : onTap,
          // onSecondaryTap: onSecondaryTap,
          onSecondaryTapUp: (isGlobal)
--- a/lib/widgets/card_sidebar_history.dart
+++ b/lib/widgets/card_sidebar_history.dart
@ -28,8 +28,7 @@ class SidebarHistoryCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Color color = Theme.of(context).colorScheme.surface;
-    final Color colorVariant =
-        Theme.of(context).colorScheme.surfaceContainerHighest.withOpacity(0.5);
+    final Color colorVariant = Theme.of(context).colorScheme.surfaceContainer;
    final model = models.first;
    final Color surfaceTint = Theme.of(context).colorScheme.primary;
    final String name = getHistoryRequestName(model);
@ -53,7 +52,6 @@ class SidebarHistoryCard extends StatelessWidget {
          onTap: onTap,
          borderRadius: kBorderRadius8,
          hoverColor: colorVariant,
-          focusColor: colorVariant.withOpacity(0.5),
          child: Padding(
            padding: const EdgeInsets.only(
              left: 6,
--- a/lib/widgets/card_sidebar_request.dart
+++ b/lib/widgets/card_sidebar_request.dart
@ -45,8 +45,7 @@ class SidebarRequestCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Color color = Theme.of(context).colorScheme.surface;
-    final Color colorVariant =
-        Theme.of(context).colorScheme.surfaceContainerHighest.withOpacity(0.5);
+    final Color colorVariant = Theme.of(context).colorScheme.surfaceContainer;
    final Color surfaceTint = Theme.of(context).colorScheme.primary;
    bool isSelected = selectedId == id;
    bool inEditMode = editRequestId == id;
@ -72,7 +71,7 @@ class SidebarRequestCard extends StatelessWidget {
        child: InkWell(
          borderRadius: kBorderRadius8,
          hoverColor: colorVariant,
-          focusColor: colorVariant.withOpacity(0.5),
+          focusColor: colorVariant,
          onTap: inEditMode ? null : onTap,
          // onDoubleTap: inEditMode ? null : onDoubleTap,
          onSecondaryTapUp: (details) {
--- a/lib/widgets/codegen_previewer.dart
+++ b/lib/widgets/codegen_previewer.dart
@ -118,12 +118,7 @@ class ViewCodePane extends StatelessWidget {
        ? kLightCodeTheme
        : kDarkCodeTheme;
    final textContainerdecoration = BoxDecoration(
-      color: Color.alphaBlend(
-          (Theme.of(context).brightness == Brightness.dark
-                  ? Theme.of(context).colorScheme.onPrimaryContainer
-                  : Theme.of(context).colorScheme.primaryContainer)
-              .withOpacity(kForegroundOpacity),
-          Theme.of(context).colorScheme.surface),
+      color: Theme.of(context).colorScheme.surfaceContainerLow,
      border: Border.all(
          color: Theme.of(context).colorScheme.surfaceContainerHighest),
      borderRadius: kBorderRadius8,
--- a/lib/widgets/dialog_history_retention.dart
+++ b/lib/widgets/dialog_history_retention.dart
@ -29,10 +29,7 @@ showHistoryRetentionDialog(
                child: Text(
                  "Select the duration for which you want to retain your request history",
                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                        color: Theme.of(context)
-                            .colorScheme
-                            .onSurface
-                            .withOpacity(0.8),
+                        color: Theme.of(context).colorScheme.outline,
                      ),
                ),
              ),
@ -49,10 +46,7 @@ showHistoryRetentionDialog(
                        secondary: Icon(e.icon,
                            color: selectedRetentionPeriod == e
                                ? Theme.of(context).colorScheme.primary
-                                : Theme.of(context)
-                                    .colorScheme
-                                    .onSurface
-                                    .withOpacity(0.6)),
+                                : Theme.of(context).colorScheme.outline),
                        value: e,
                        groupValue: selectedRetentionPeriod,
                        onChanged: (value) {
--- a/lib/widgets/editor.dart
+++ b/lib/widgets/editor.dart
@ -86,16 +86,12 @@ class _TextFieldEditorState extends State<TextFieldEditor> {
        decoration: InputDecoration(
          hintText: widget.hintText ?? kHintContent,
          hintStyle: TextStyle(
-            color: Theme.of(context).colorScheme.outline.withOpacity(
-                  kHintOpacity,
-                ),
+            color: Theme.of(context).colorScheme.outlineVariant,
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: kBorderRadius8,
            borderSide: BorderSide(
-              color: Theme.of(context).colorScheme.primary.withOpacity(
-                    kHintOpacity,
-                  ),
+              color: Theme.of(context).colorScheme.outlineVariant,
            ),
          ),
          enabledBorder: OutlineInputBorder(
@ -106,12 +102,7 @@ class _TextFieldEditorState extends State<TextFieldEditor> {
          ),
          filled: true,
          hoverColor: kColorTransparent,
-          fillColor: Color.alphaBlend(
-              (Theme.of(context).brightness == Brightness.dark
-                      ? Theme.of(context).colorScheme.onPrimaryContainer
-                      : Theme.of(context).colorScheme.primaryContainer)
-                  .withOpacity(kForegroundOpacity),
-              Theme.of(context).colorScheme.surface),
+          fillColor: Theme.of(context).colorScheme.surfaceContainerLow,
        ),
      ),
    );
--- a/lib/widgets/field_header.dart
+++ b/lib/widgets/field_header.dart
@ -80,15 +80,12 @@ class _HeaderFieldState extends State<HeaderField> {
          color: colorScheme.onSurface,
        ),
        decoration: InputDecoration(
-          hintStyle: kCodeStyle.copyWith(
-              color: colorScheme.outline.withOpacity(kHintOpacity)),
+          hintStyle: kCodeStyle.copyWith(color: colorScheme.outlineVariant),
          hintText: widget.hintText,
          contentPadding: const EdgeInsets.only(bottom: 12),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(
-              color: colorScheme.primary.withOpacity(
-                kHintOpacity,
-              ),
+              color: colorScheme.outline,
            ),
          ),
          enabledBorder: UnderlineInputBorder(
--- a/lib/widgets/field_url.dart
+++ b/lib/widgets/field_url.dart
@ -25,9 +25,7 @@ class URLField extends StatelessWidget {
      decoration: InputDecoration(
        hintText: kHintTextUrlCard,
        hintStyle: kCodeStyle.copyWith(
-          color: Theme.of(context).colorScheme.outline.withOpacity(
-                kHintOpacity,
-              ),
+          color: Theme.of(context).colorScheme.outlineVariant,
        ),
        border: InputBorder.none,
      ),
--- a/lib/widgets/response_widgets.dart
+++ b/lib/widgets/response_widgets.dart
@ -405,14 +405,10 @@ class _BodySuccessState extends State<BodySuccess> {
        ? kLightCodeTheme
        : kDarkCodeTheme;
    final textContainerdecoration = BoxDecoration(
-      color: Color.alphaBlend(
-          (Theme.of(context).brightness == Brightness.dark
-                  ? Theme.of(context).colorScheme.onPrimaryContainer
-                  : Theme.of(context).colorScheme.primaryContainer)
-              .withOpacity(kForegroundOpacity),
-          Theme.of(context).colorScheme.surface),
+      color: Theme.of(context).colorScheme.surfaceContainerLow,
      border: Border.all(
-          color: Theme.of(context).colorScheme.surfaceContainerHighest),
+        color: Theme.of(context).colorScheme.surfaceContainerHighest,
+      ),
      borderRadius: kBorderRadius8,
    );

--- a/lib/widgets/splitview_dashboard.dart
+++ b/lib/widgets/splitview_dashboard.dart
@ -1,4 +1,3 @@
-import 'package:apidash_design_system/apidash_design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:multi_split_view/multi_split_view.dart';

@ -35,10 +34,9 @@ class DashboardSplitViewState extends State<DashboardSplitView> {
      data: MultiSplitViewThemeData(
        dividerThickness: 3,
        dividerPainter: DividerPainters.background(
-          color: Theme.of(context).colorScheme.surfaceContainerHighest,
-          highlightedColor: Theme.of(context).colorScheme.outline.withOpacity(
-                kHintOpacity,
-              ),
+          color: Theme.of(context).colorScheme.surfaceContainer,
+          highlightedColor:
+              Theme.of(context).colorScheme.surfaceContainerHighest,
          animationEnabled: false,
        ),
      ),
--- a/lib/widgets/splitview_equal.dart
+++ b/lib/widgets/splitview_equal.dart
@ -1,4 +1,3 @@
-import 'package:apidash_design_system/apidash_design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:multi_split_view/multi_split_view.dart';

@ -30,10 +29,9 @@ class EqualSplitView extends StatelessWidget {
      data: MultiSplitViewThemeData(
        dividerThickness: 3,
        dividerPainter: DividerPainters.background(
-          color: Theme.of(context).colorScheme.surfaceContainerHighest,
-          highlightedColor: Theme.of(context).colorScheme.outline.withOpacity(
-                kHintOpacity,
-              ),
+          color: Theme.of(context).colorScheme.surfaceContainer,
+          highlightedColor:
+              Theme.of(context).colorScheme.surfaceContainerHighest,
          animationEnabled: false,
        ),
      ),
--- a/lib/widgets/splitview_history.dart
+++ b/lib/widgets/splitview_history.dart
@ -1,4 +1,3 @@
-import 'package:apidash_design_system/apidash_design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:multi_split_view/multi_split_view.dart';

@ -35,10 +34,9 @@ class HistorySplitViewState extends State<HistorySplitView> {
      data: MultiSplitViewThemeData(
        dividerThickness: 3,
        dividerPainter: DividerPainters.background(
-          color: Theme.of(context).colorScheme.surfaceContainerHighest,
-          highlightedColor: Theme.of(context).colorScheme.outline.withOpacity(
-                kHintOpacity,
-              ),
+          color: Theme.of(context).colorScheme.surfaceContainer,
+          highlightedColor:
+              Theme.of(context).colorScheme.surfaceContainerHighest,
          animationEnabled: false,
        ),
      ),
--- a/lib/widgets/tabbar_segmented.dart
+++ b/lib/widgets/tabbar_segmented.dart
@ -35,8 +35,7 @@ class SegmentedTabbar extends StatelessWidget {
            dividerColor: Colors.transparent,
            indicatorWeight: 0.0,
            indicatorSize: TabBarIndicatorSize.tab,
-            unselectedLabelColor:
-                Theme.of(context).colorScheme.onSurface.withOpacity(0.4),
+            unselectedLabelColor: Theme.of(context).colorScheme.outline,
            labelStyle: kTextStyleTab.copyWith(
              fontWeight: FontWeight.bold,
              color: Theme.of(context).colorScheme.onPrimary,
--- a/lib/widgets/table_request.dart
+++ b/lib/widgets/table_request.dart
@ -45,9 +45,7 @@ class RequestDataTable extends StatelessWidget {
      contentPadding: const EdgeInsets.only(bottom: 12),
      focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(
-          color: clrScheme.primary.withOpacity(
-            kHintOpacity,
-          ),
+          color: clrScheme.outlineVariant,
        ),
      ),
      enabledBorder: UnderlineInputBorder(
--- a/lib/widgets/table_request_form.dart
+++ b/lib/widgets/table_request_form.dart
@ -47,9 +47,7 @@ class RequestFormDataTable extends StatelessWidget {
      contentPadding: const EdgeInsets.only(bottom: 12),
      focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(
-          color: clrScheme.primary.withOpacity(
-            kHintOpacity,
-          ),
+          color: clrScheme.outlineVariant,
        ),
      ),
      enabledBorder: UnderlineInputBorder(