New UI.

2025-12-17 07:14:28 +01:00 · 2022-02-08 21:12:38 +08:00
parent 4636219b6a
commit d70cbb66d2
10 changed files with 187 additions and 64 deletions
--- a/README.md
+++ b/README.md
@@ -9,10 +9,10 @@ A new Flutter project which provide a chart view to display server status data a
 	    <img width="200px" src="https://raw.githubusercontent.com/LollipopKit/flutter_server_monitor_toolbox/main/screenshots/server.jpg">
    </td>
    <td>
-	    <img width="200px" src="https://raw.githubusercontent.com/LollipopKit/flutter_server_monitor_toolbox/main/screenshots/detail.jpg">
+	    <img width="200px" src="https://raw.githubusercontent.com/LollipopKit/flutter_server_monitor_toolbox/main/screenshots/server_detail.jpg">
    </td>
    <td>
-	    <img width="200px" src="https://raw.githubusercontent.com/LollipopKit/flutter_server_monitor_toolbox/main/screenshots/ping.jpg">
+	    <img width="200px" src="https://raw.githubusercontent.com/LollipopKit/flutter_server_monitor_toolbox/main/screenshots/server_edit.jpg">
    </td>
  </tr>
 </table>
@@ -22,13 +22,20 @@ A new Flutter project which provide a chart view to display server status data a
 	    <img width="200px" src="https://raw.githubusercontent.com/LollipopKit/flutter_server_monitor_toolbox/main/screenshots/convert.jpg">
    </td>
    <td>
-	    <img width="200px" src="https://raw.githubusercontent.com/LollipopKit/flutter_server_monitor_toolbox/main/screenshots/drawer.jpg">
+	    <img width="200px" src="https://raw.githubusercontent.com/LollipopKit/flutter_server_monitor_toolbox/main/screenshots/ping.jpg">
    </td>
    <td>
 	    <img width="200px" src="https://raw.githubusercontent.com/LollipopKit/flutter_server_monitor_toolbox/main/screenshots/setting.jpg">
    </td>
  </tr>
 </table>
+<table>
+  <tr>
+    <td>
+	    <img width="200px" src="https://raw.githubusercontent.com/LollipopKit/flutter_server_monitor_toolbox/main/screenshots/drawer.jpg">
+    </td>
+  </tr>
+</table>

 # Support
 Status|Platform 
--- a/lib/data/model/app/navigation_item.dart
+++ b/lib/data/model/app/navigation_item.dart
@@ -0,0 +1,8 @@
+import 'package:flutter/material.dart';
+
+class NavigationItem {
+  final IconData icon;
+  final String title;
+
+  NavigationItem(this.icon, this.title);
+}
--- a/lib/data/res/build_data.dart
+++ b/lib/data/res/build_data.dart
@@ -2,8 +2,9 @@

 class BuildData {
  static const String name = "ServerBox";
-  static const int build = 91;
-  static const String engine = "Flutter 2.10.0 • channel stable • https://github.com/flutter/flutter.git\nFramework • revision 5f105a6ca7 (7 days ago) • 2022-02-01 14:15:42 -0800\nEngine • revision 776efd2034\nTools • Dart 2.16.0 • DevTools 2.9.2\n";
-  static const String buildAt = "2022-02-08 19:01:55.450937";
-  static const int modifications = 3;
+  static const int build = 93;
+  static const String engine =
+      "Flutter 2.10.0 • channel stable • https://github.com/flutter/flutter.git\nFramework • revision 5f105a6ca7 (7 days ago) • 2022-02-01 14:15:42 -0800\nEngine • revision 776efd2034\nTools • Dart 2.16.0 • DevTools 2.9.2\n";
+  static const String buildAt = "2022-02-08 20:57:54.707031";
+  static const int modifications = 9;
 }
--- a/lib/data/res/tab.dart
+++ b/lib/data/res/tab.dart
@@ -1 +1,9 @@
+import 'package:flutter/material.dart';
+import 'package:toolbox/data/model/app/navigation_item.dart';
+
 final List<String> tabs = ['Servers', 'En/Decode', 'Ping'];
+final List<NavigationItem> tabItems = [
+    NavigationItem(Icons.computer, 'Server'),
+    NavigationItem(Icons.code, 'Convert'),
+    NavigationItem(Icons.network_check, 'Ping'),
+  ];
--- a/lib/view/page/debug.dart
+++ b/lib/view/page/debug.dart
@@ -14,7 +14,7 @@ class _DebugPageState extends State<DebugPage> {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:
-          AppBar(title: const Text('Terminal'), backgroundColor: Colors.black),
+          AppBar(title: const Text('App log'), backgroundColor: Colors.black),
      body: _buildTerminal(context),
      backgroundColor: Colors.black,
    );
--- a/lib/view/page/home.dart
+++ b/lib/view/page/home.dart
@@ -1,13 +1,16 @@
 import 'package:after_layout/after_layout.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_advanced_drawer/flutter_advanced_drawer.dart';
 import 'package:get_it/get_it.dart';
 import 'package:toolbox/core/analysis.dart';
 import 'package:toolbox/core/build_mode.dart';
 import 'package:toolbox/core/route.dart';
 import 'package:toolbox/core/update.dart';
 import 'package:toolbox/core/utils.dart';
+import 'package:toolbox/data/model/app/navigation_item.dart';
 import 'package:toolbox/data/provider/server.dart';
 import 'package:toolbox/data/res/build_data.dart';
+import 'package:toolbox/data/res/color.dart';
 import 'package:toolbox/data/res/icon/common.dart';
 import 'package:toolbox/data/res/tab.dart';
 import 'package:toolbox/data/res/url.dart';
@@ -36,23 +39,26 @@ class _MyHomePageState extends State<MyHomePage>
        SingleTickerProviderStateMixin,
        AfterLayoutMixin,
        WidgetsBindingObserver {
-  late final TabController _tabController;
  late final ServerProvider _serverProvider;
+  late final PageController _pageController;
+  late final AdvancedDrawerController _advancedDrawerController;
+  late int _selectIndex;
+  late double _width;

  @override
  void initState() {
    super.initState();
    _serverProvider = locator<ServerProvider>();
    WidgetsBinding.instance?.addObserver(this);
-    _tabController = TabController(
-        initialIndex: locator<SettingStore>().launchPage.fetch()!,
-        length: tabs.length,
-        vsync: this);
-    _tabController.addListener(() {
-      if (_tabController.index == 0) {
-        FocusScope.of(context).unfocus();
+    _selectIndex = locator<SettingStore>().launchPage.fetch()!;
+    _pageController = PageController(initialPage: _selectIndex);
+    _advancedDrawerController = AdvancedDrawerController();
  }
-    });
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    _width = MediaQuery.of(context).size.width;
  }

  @override
@@ -77,37 +83,123 @@ class _MyHomePageState extends State<MyHomePage>
  Widget build(BuildContext context) {
    setTransparentNavigationBar(context);
    super.build(context);
-    return Scaffold(
-      appBar: AppBar(
-        title: GestureDetector(
-          onLongPress: () =>
-              AppRoute(const DebugPage(), 'Debug Page').go(context),
-          child: const Text(BuildData.name),
-        ),
-        bottom: TabBar(
-          indicatorColor: widget.primaryColor,
-          tabs: tabs.map((e) => Tab(text: e)).toList(),
-          controller: _tabController,
+    return AdvancedDrawer(
+        controller: _advancedDrawerController,
+        animationCurve: Curves.easeInOutCirc,
+        animationDuration: const Duration(milliseconds: 300),
+        animateChildDecoration: true,
+        rtlOpening: false,
+        disabledGestures: true,
+        childDecoration: const BoxDecoration(
+          // NOTICE: Uncomment if you want to add shadow behind the page.
+          // Keep in mind that it may cause animation jerks.
+          boxShadow: <BoxShadow>[
+            BoxShadow(
+              color: Colors.black12,
+              blurRadius: 0.0,
            ),
+          ],
+          borderRadius: BorderRadius.all(Radius.circular(16)),
        ),
        drawer: _buildDrawer(),
-      body: TabBarView(controller: _tabController, children: [
-        ServerPage(_tabController),
-        const ConvertPage(),
-        const PingPage()
-      ]),
+        child: Scaffold(
+          appBar: AppBar(
+            title: Text(tabItems[_selectIndex].title),
+            actions: [
+              IconButton(
+                icon: const Icon(Icons.developer_mode, size: 23),
+                tooltip: 'Debug',
+                onPressed: () =>
+                    AppRoute(const DebugPage(), 'Debug Page').go(context),
+              ),
+            ],
+            leading: IconButton(
+              onPressed: () => _advancedDrawerController.showDrawer(),
+              icon: ValueListenableBuilder<AdvancedDrawerValue>(
+                valueListenable: _advancedDrawerController,
+                builder: (_, value, __) {
+                  return AnimatedSwitcher(
+                    duration: const Duration(milliseconds: 250),
+                    child: Icon(
+                      value.visible ? Icons.clear : Icons.menu,
+                      key: ValueKey<bool>(value.visible),
+                    ),
+                  );
+                },
+              ),
+            ),
+          ),
+          body: PageView(
+            physics: const ClampingScrollPhysics(),
+            controller: _pageController,
+            onPageChanged: (i) {
+              FocusScope.of(context).unfocus();
+              _selectIndex = i;
+              setState(() {});
+            },
+            children: const [ServerPage(), ConvertPage(), PingPage()],
+          ),
+          bottomNavigationBar: _buildBottom(context),
+        ));
+  }
+
+  Widget _buildItem(int idx, NavigationItem item, bool isSelected) {
+    bool isDarkMode = Theme.of(context).brightness == Brightness.dark;
+    final width = _width / tabItems.length;
+    return AnimatedContainer(
+      duration: const Duration(milliseconds: 377),
+      curve: Curves.fastOutSlowIn,
+      height: 50,
+      width: isSelected ? width : width - 17,
+      decoration: BoxDecoration(
+          color: isSelected
+              ? isDarkMode
+                  ? Colors.white12
+                  : Colors.black.withOpacity(0.07)
+              : Colors.transparent,
+          borderRadius: const BorderRadius.all(Radius.circular(50))),
+      child: IconButton(
+        icon: Icon(item.icon),
+        tooltip: item.title,
+        splashRadius: width / 3.3,
+        padding: const EdgeInsets.only(left: 17, right: 17),
+        onPressed: () {
+          setState(() {
+            _pageController.animateToPage(idx,
+                duration: const Duration(milliseconds: 677),
+                curve: Curves.fastLinearToSlowEaseIn);
+          });
+        },
+      ),
    );
  }

+  Widget _buildBottom(BuildContext context) {
+    return SafeArea(
+        child: Container(
+      height: 56,
+      padding: const EdgeInsets.only(left: 8, top: 4, bottom: 4, right: 8),
+      width: _width,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: tabItems.map((item) {
+          int itemIndex = tabItems.indexOf(item);
+          return _buildItem(itemIndex, item, _selectIndex == itemIndex);
+        }).toList(),
+      ),
+    ));
+  }
+
  Widget _buildDrawer() {
-    return Drawer(
-      child: ListView(
-        padding: EdgeInsets.zero,
+    return SafeArea(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
        children: [
-          UserAccountsDrawerHeader(
-            accountName: const Text(BuildData.name),
-            accountEmail: Text(_buildVersionStr()),
-            currentAccountPicture: _buildIcon(),
+          _buildIcon(),
+          const Text(BuildData.name),
+          Text(_buildVersionStr()),
+          SizedBox(
+            height: MediaQuery.of(context).size.height * 0.07,
          ),
          ListTile(
            leading: const Icon(Icons.settings),
@@ -149,9 +241,19 @@ class _MyHomePageState extends State<MyHomePage>
  }

  Widget _buildIcon() {
-    return ConstrainedBox(
-      constraints: const BoxConstraints(maxHeight: 60, maxWidth: 60),
+    return Stack(
+      alignment: Alignment.center,
+      children: [
+        ConstrainedBox(
+            constraints: const BoxConstraints(maxHeight: 53, maxWidth: 53),
+            child: Container(
+              color: primaryColor,
+            )),
+        ConstrainedBox(
+          constraints: const BoxConstraints(maxHeight: 83, maxWidth: 83),
          child: appIcon,
+        )
+      ],
    );
  }

--- a/lib/view/page/server/tab.dart
+++ b/lib/view/page/server/tab.dart
@@ -7,6 +7,7 @@ import 'package:marquee/marquee.dart';
 import 'package:provider/provider.dart';
 import 'package:pull_to_refresh/pull_to_refresh.dart';
 import 'package:toolbox/core/route.dart';
+import 'package:toolbox/core/utils.dart';
 import 'package:toolbox/data/model/server/server.dart';
 import 'package:toolbox/data/model/server/server_connection_state.dart';
 import 'package:toolbox/data/model/server/server_private_info.dart';
@@ -21,8 +22,7 @@ import 'package:toolbox/view/page/snippet/list.dart';
 import 'package:toolbox/view/widget/round_rect_card.dart';

 class ServerPage extends StatefulWidget {
-  final TabController tabController;
-  const ServerPage(this.tabController, {Key? key}) : super(key: key);
+  const ServerPage({Key? key}) : super(key: key);

  @override
  _ServerPageState createState() => _ServerPageState();
@@ -50,9 +50,6 @@ class _ServerPageState extends State<ServerPage>
    _media = MediaQuery.of(context);
    _theme = Theme.of(context);
    _primaryColor = primaryColor;
-    if (widget.tabController.index == 0) {
-      FocusScope.of(context).unfocus();
-    }
  }

  @override
@@ -207,11 +204,10 @@ class _ServerPageState extends State<ServerPage>
                      onChanged: (value) {
                        final item = value as MenuItem;
                        switch (item) {
-                          case MenuItems.sftp:
-                            //Do something
-                            break;
                          case MenuItems.apt:
-                            //Do something
+                          case MenuItems.sftp:
+                            showSnackBar(
+                                context, const Text('Now is not supported'));
                            break;
                          case MenuItems.snippet:
                            AppRoute(
@@ -404,7 +400,7 @@ class MenuItems {
  static const List<MenuItem> firstItems = [sftp, snippet, apt];
  static const List<MenuItem> secondItems = [edit];

-  static const sftp = MenuItem(text: 'SFTP', icon: Icons.hardware);
+  static const sftp = MenuItem(text: 'SFTP', icon: Icons.file_present);
  static const snippet = MenuItem(text: 'Snippet', icon: Icons.label);
  static const apt = MenuItem(text: 'Apt', icon: Icons.system_security_update);
  static const edit = MenuItem(text: 'Edit', icon: Icons.settings);
--- a/make.dart
+++ b/make.dart
@@ -68,7 +68,7 @@ Future<void> updateBuildData() async {
 }

 void dartFormat() {
-  final result = Process.runSync('dart', ['format', './*.dart']);
+  final result = Process.runSync('dart', ['format', '.']);
  print(result.stdout);
  if (result.exitCode != 0) {
    print(result.stderr);
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -199,6 +199,13 @@ packages:
    description: flutter
    source: sdk
    version: "0.0.0"
+  flutter_advanced_drawer:
+    dependency: "direct main"
+    description:
+      name: flutter_advanced_drawer
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.3.0"
  flutter_icmp_ping:
    dependency: transitive
    description:
@@ -328,13 +335,6 @@ packages:
      url: "https://pub.dartlang.org"
    source: hosted
    version: "0.12.11"
-  material_color_utilities:
-    dependency: transitive
-    description:
-      name: material_color_utilities
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "0.1.3"
  meta:
    dependency: transitive
    description:
@@ -521,7 +521,7 @@ packages:
      name: test_api
      url: "https://pub.dartlang.org"
    source: hosted
-    version: "0.4.8"
+    version: "0.4.3"
  typed_data:
    dependency: transitive
    description:
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -57,6 +57,7 @@ dependencies:
  dart_ping: ^6.1.1
  dart_ping_ios: ^1.0.0
  dropdown_button2: ^1.1.1
+  flutter_advanced_drawer: ^1.3.0


 dev_dependencies: