Merge pull request #30 from Dash-Kit/feature/29-add-material3-support

#29 Update light & dark themes support
Dash-Kit · Apr 20, 2024 · d209b85 · d209b85
2 parents 961589d + ac5e9a9
commit d209b85
Show file tree

Hide file tree

Showing 20 changed files with 257 additions and 213 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## [4.3.0]
+- Fix issues with light & dark themes support
+
 ## [4.2.0]
 - Updated dependencies
 - Added AGP 8.3 support to the example

diff --git a/example/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml
@@ -10,6 +10,7 @@
             android:theme="@style/LaunchTheme"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
             android:hardwareAccelerated="true"
+            android:enableOnBackInvokedCallback="true"
             android:windowSoftInputMode="adjustResize">
             <!-- Specifies an Android theme to apply to this Activity as soon as
                  the Android process has started. This theme is visible to the user

diff --git a/example/devtools_options.yaml b/example/devtools_options.yaml
@@ -0,0 +1 @@
+extensions:
diff --git a/example/lib/example_app.dart b/example/lib/example_app.dart
@@ -16,6 +16,7 @@ class ExampleApp extends StatelessWidget {
     return MaterialApp(
       title: 'Debug',
       navigatorKey: navigatorKey,
+      themeMode: ThemeMode.system,
       home: Container(
         decoration: const BoxDecoration(
           color: Colors.white,
@@ -25,9 +26,11 @@ class ExampleApp extends StatelessWidget {
           child: Column(
             mainAxisSize: MainAxisSize.min,
             children: <Widget>[
-              Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 36),
-                child: Image.asset('assets/images/png/dash_dart.png'),
+              Flexible(
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 36),
+                  child: Image.asset('assets/images/png/dash_dart.png'),
+                ),
               ),
               const SizedBox(height: 16),
               const ControlPanelGate(

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -5,10 +5,10 @@ packages:
     dependency: "direct main"
     description:
       name: alice_lightweight
-      sha256: cef2188ab0a272aeabd4824d924d354b70d627c9c7365e6ff168578b3b266a81
+      sha256: "44eca874655081dbfe48e01392ecf66c7fb2d3e98c315e9285bb7f4888efee61"
       url: "https://pub.dev"
     source: hosted
-    version: "3.6.0"
+    version: "3.7.0"
   async:
     dependency: transitive
     description:
@@ -63,7 +63,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "4.2.0"
+    version: "4.3.0"
   dash_kit_lints:
     dependency: transitive
     description:
@@ -259,18 +259,18 @@ packages:
     dependency: transitive
     description:
       name: path_provider
-      sha256: b27217933eeeba8ff24845c34003b003b2b22151de3c908d0e679e8fe1aa078b
+      sha256: c9e7d3a4cd1410877472158bee69963a4579f78b68c65a2b7d40d1a7a88bb161
       url: "https://pub.dev"
     source: hosted
-    version: "2.1.2"
+    version: "2.1.3"
   path_provider_android:
     dependency: transitive
     description:
       name: path_provider_android
-      sha256: "477184d672607c0a3bf68fbbf601805f92ef79c82b64b4d6eb318cbca4c48668"
+      sha256: a248d8146ee5983446bf03ed5ea8f6533129a12b11f12057ad1b4a67a2b3b41d
       url: "https://pub.dev"
     source: hosted
-    version: "2.2.2"
+    version: "2.2.4"
   path_provider_foundation:
     dependency: transitive
     description:
@@ -339,10 +339,10 @@ packages:
     dependency: transitive
     description:
       name: share_plus
-      sha256: "05ec043470319bfbabe0adbc90d3a84cbff0426b9d9f3a6e2ad3e131fa5fa629"
+      sha256: fb5319f3aab4c5dda5ebb92dca978179ba21f8c783ee4380910ef4c1c6824f51
       url: "https://pub.dev"
     source: hosted
-    version: "8.0.2"
+    version: "8.0.3"
   share_plus_platform_interface:
     dependency: transitive
     description:
@@ -472,10 +472,10 @@ packages:
     dependency: transitive
     description:
       name: url_launcher_web
-      sha256: "3692a459204a33e04bc94f5fb91158faf4f2c8903281ddd82915adecdb1a901d"
+      sha256: "8d9e750d8c9338601e709cd0885f95825086bd8b642547f26bda435aade95d8a"
       url: "https://pub.dev"
     source: hosted
-    version: "2.3.0"
+    version: "2.3.1"
   url_launcher_windows:
     dependency: transitive
     description:
@@ -488,10 +488,10 @@ packages:
     dependency: transitive
     description:
       name: uuid
-      sha256: cd210a09f7c18cbe5a02511718e0334de6559871052c90a90c0cca46a4aa81c8
+      sha256: "814e9e88f21a176ae1359149021870e87f7cddaf633ab678a5d2b0bff7fd1ba8"
       url: "https://pub.dev"
     source: hosted
-    version: "4.3.3"
+    version: "4.4.0"
   vector_math:
     dependency: transitive
     description:

diff --git a/example/pubspec.yaml b/example/pubspec.yaml
@@ -12,7 +12,7 @@ dependencies:
   dash_kit_control_panel:
     path: ../
   dio: ^5.4.2+1
-  alice_lightweight: ^3.6.0
+  alice_lightweight: ^3.7.0
   flutter:
     sdk: flutter
 

diff --git a/lib/src/ui/components/demo/demo_setting.dart b/lib/src/ui/components/demo/demo_setting.dart
@@ -1,6 +1,7 @@
 import 'package:dash_kit_control_panel/src/panel/control_panel_setting.dart';
 import 'package:dash_kit_control_panel/src/services/demo_mode.dart';
 import 'package:dash_kit_control_panel/src/ui/components/setting_group.dart';
+import 'package:dash_kit_control_panel/src/ui/theme/app_colors.dart';
 import 'package:flutter/material.dart';
 
 class DemoSetting extends StatefulWidget implements ControlPanelSetting {
@@ -42,7 +43,7 @@ class _DemoSettingState extends State<DemoSetting> {
             Text(
               'Demo mode',
               style: TextStyle(
-                color: Colors.white.withAlpha(240),
+                color: AppColors.of(context).text,
                 fontSize: 15,
               ),
             ),

diff --git a/lib/src/ui/components/device_preview/device_preview_setting.dart b/lib/src/ui/components/device_preview/device_preview_setting.dart
@@ -1,4 +1,5 @@
 import 'package:dash_kit_control_panel/dash_kit_control_panel.dart';
+import 'package:dash_kit_control_panel/src/ui/theme/app_colors.dart';
 import 'package:flutter/material.dart';
 
 class DevicePreviewSetting extends StatefulWidget
@@ -39,7 +40,7 @@ class _DevicePreviewSettingState extends State<DevicePreviewSetting> {
             Text(
               'Device Preview mode',
               style: TextStyle(
-                color: Colors.white.withAlpha(240),
+                color: AppColors.of(context).text,
                 fontSize: 15,
               ),
             ),

diff --git a/lib/src/ui/components/logger/log_console.dart b/lib/src/ui/components/logger/log_console.dart
@@ -8,12 +8,10 @@ import 'package:logger/logger.dart';
 // ignore_for_file: avoid-returning-widgets
 class LogConsole extends StatefulWidget {
   const LogConsole({
-    this.dark = false,
     this.showCloseButton = false,
     super.key,
   });
 
-  final bool dark;
   final bool showCloseButton;
 
   @override
@@ -84,30 +82,70 @@ class _LogConsoleState extends State<LogConsole> {
 
   @override
   Widget build(BuildContext context) {
-    final colorScheme = Theme.of(context).colorScheme;
+    final isDark = Theme.of(context).brightness == Brightness.dark;
 
     return MaterialApp(
       debugShowCheckedModeBanner: false,
-      theme: widget.dark
+      theme: isDark
           ? ThemeData(
-              brightness: Brightness.dark,
-              colorScheme: colorScheme.copyWith(secondary: Colors.blueGrey),
+              colorScheme: ColorScheme.fromSeed(
+                seedColor: Colors.blueGrey,
+                brightness: Brightness.dark,
+              ),
             )
           : ThemeData(
-              brightness: Brightness.light,
-              colorScheme:
-                  colorScheme.copyWith(secondary: Colors.lightBlueAccent),
+              colorScheme: ColorScheme.fromSeed(
+                seedColor: Colors.lightBlueAccent,
+              ),
             ),
       home: Scaffold(
+        appBar: AppBar(
+          shape: Border(
+            bottom: BorderSide(
+              color: Colors.black.withOpacity(0.12),
+            ),
+          ),
+          title: const Text(
+            'Log Console',
+            style: TextStyle(
+              fontSize: 20,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+          actions: [
+            IconButton(
+              icon: const Icon(Icons.add),
+              onPressed: () {
+                setState(() {
+                  _logFontSize++;
+                });
+              },
+            ),
+            IconButton(
+              icon: const Icon(Icons.remove),
+              onPressed: () {
+                setState(() {
+                  _logFontSize--;
+                });
+              },
+            ),
+            if (widget.showCloseButton)
+              IconButton(
+                icon: const Icon(Icons.close),
+                onPressed: () {
+                  Navigator.pop(context);
+                },
+              ),
+          ],
+        ),
         body: SafeArea(
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.stretch,
             children: <Widget>[
-              _buildTopBar(),
               Expanded(
-                child: _buildLogContent(),
+                child: _buildLogContent(isDark),
               ),
-              _buildBottomBar(),
+              _buildBottomBar(isDark),
             ],
           ),
         ),
@@ -122,7 +160,7 @@ class _LogConsoleState extends State<LogConsole> {
               onPressed: _scrollToBottom,
               child: Icon(
                 Icons.arrow_downward,
-                color: widget.dark ? Colors.white : Colors.lightBlue[900],
+                color: isDark ? Colors.white : Colors.lightBlue[900],
               ),
             ),
           ),
@@ -152,9 +190,9 @@ class _LogConsoleState extends State<LogConsole> {
     }
   }
 
-  Widget _buildLogContent() {
+  Widget _buildLogContent(bool isDark) {
     return Container(
-      color: widget.dark ? Colors.black : Colors.grey[150],
+      color: isDark ? Colors.black : Colors.grey[150],
       child: SingleChildScrollView(
         scrollDirection: Axis.horizontal,
         child: SizedBox(
@@ -178,51 +216,10 @@ class _LogConsoleState extends State<LogConsole> {
     );
   }
 
-  Widget _buildTopBar() {
-    return LogBar(
-      dark: widget.dark,
-      child: Row(
-        children: <Widget>[
-          const Text(
-            'Log Console',
-            style: TextStyle(
-              fontSize: 20,
-              fontWeight: FontWeight.bold,
-            ),
-          ),
-          const Spacer(),
-          IconButton(
-            icon: const Icon(Icons.add),
-            onPressed: () {
-              setState(() {
-                _logFontSize++;
-              });
-            },
-          ),
-          IconButton(
-            icon: const Icon(Icons.remove),
-            onPressed: () {
-              setState(() {
-                _logFontSize--;
-              });
-            },
-          ),
-          if (widget.showCloseButton)
-            IconButton(
-              icon: const Icon(Icons.close),
-              onPressed: () {
-                Navigator.pop(context);
-              },
-            ),
-        ],
-      ),
-    );
-  }
-
   // ignore: long-method
-  Widget _buildBottomBar() {
+  Widget _buildBottomBar(bool isDark) {
     return LogBar(
-      dark: widget.dark,
+      dark: isDark,
       child: Row(
         children: <Widget>[
           Expanded(
@@ -293,7 +290,8 @@ class _LogConsoleState extends State<LogConsole> {
   }
 
   RenderedEvent _renderEvent(OutputEvent event) {
-    final parser = AnsiParser(dark: widget.dark);
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+    final parser = AnsiParser(dark: isDark);
     final text = event.lines.join('\n');
     parser.parse(text);
 

diff --git a/lib/src/ui/components/logger/log_console_modal.dart b/lib/src/ui/components/logger/log_console_modal.dart
@@ -26,12 +26,7 @@ class LogConsoleModal extends ModalRoute<void> {
     Animation<double> animation,
     Animation<double> secondaryAnimation,
   ) {
-    return Scaffold(
-      body: LogConsole(
-        dark: Theme.of(context).brightness == Brightness.dark,
-        showCloseButton: true,
-      ),
-    );
+    return const Scaffold(body: LogConsole(showCloseButton: true));
   }
 
   @override

diff --git a/lib/src/ui/components/proxy/proxy_setting.dart b/lib/src/ui/components/proxy/proxy_setting.dart
@@ -1,6 +1,7 @@
 import 'package:dash_kit_control_panel/src/panel/control_panel_setting.dart';
 import 'package:dash_kit_control_panel/src/services/proxy_manager.dart';
 import 'package:dash_kit_control_panel/src/ui/components/setting_group.dart';
+import 'package:dash_kit_control_panel/src/ui/theme/app_colors.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
@@ -156,19 +157,19 @@ class _ProxySettingState extends State<ProxySetting> {
     return TextFormField(
       focusNode: proxyIpFieldFocusNode,
       controller: proxyIpController,
-      decoration: const InputDecoration(
+      decoration: InputDecoration(
         labelText: 'Proxy IP address:',
         labelStyle: TextStyle(
-          color: Colors.white70,
+          color: AppColors.of(context).text,
           fontSize: 14,
         ),
-        contentPadding: EdgeInsets.symmetric(vertical: 4),
-        focusedBorder: UnderlineInputBorder(
+        contentPadding: const EdgeInsets.symmetric(vertical: 4),
+        focusedBorder: const UnderlineInputBorder(
           borderSide: BorderSide(color: Colors.green),
         ),
       ),
       style: TextStyle(
-        color: Colors.white.withAlpha(210),
+        color: AppColors.of(context).text,
         fontSize: 15,
       ),
       keyboardType: TextInputType.text,