wuqiyang312/flutter_opencode_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve UI. Rounded Card.

Browse Source
This commit is contained in:
Junyuan Feng
2022-02-04 18:52:35 +08:00
parent 026d203608
commit 1bd43829bb
16 changed files with 271 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
lib/view/page/server/detail.dart
View File

@@ -6,6 +6,7 @@ import 'package:toolbox/data/model/server/server_status.dart';
import 'package:toolbox/data/provider/server.dart';
import 'package:toolbox/data/res/color.dart';
import 'package:toolbox/data/res/icon/linux_icons.dart';
import 'package:toolbox/data/res/padding.dart';
import 'package:toolbox/view/widget/round_rect_card.dart';
const style11 = TextStyle(fontSize: 11);
@@ -44,7 +45,7 @@ class _ServerDetailPageState extends State<ServerDetailPage>
title: Text(si.info.name),
),
body: ListView(
padding: const EdgeInsets.all(17),
padding: const EdgeInsets.all(13),
children: [
_buildLinuxIcon(si.status.sysVer),
SizedBox(height: _media.size.height * 0.03),
@@ -68,7 +69,7 @@ class _ServerDetailPageState extends State<ServerDetailPage>
Widget _buildCPUView(ServerStatus ss) {
return RoundRectCard(
SizedBox(
Padding(padding: roundRectCardPadding, child: SizedBox(
height: 12 * ss.cpu2Status.coresCount + 67,
child: Column(children: [
SizedBox(
@@ -103,7 +104,7 @@ class _ServerDetailPageState extends State<ServerDetailPage>
),
_buildCPUProgress(ss)
]),
),
),),
);
}
@@ -158,7 +159,7 @@ class _ServerDetailPageState extends State<ServerDetailPage>
Widget _buildUpTimeAndSys(ServerStatus ss) {
return RoundRectCard(Padding(
padding: const EdgeInsets.symmetric(vertical: 13),
padding: const EdgeInsets.symmetric(vertical: 13, horizontal: 17),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
@@ -191,7 +192,7 @@ class _ServerDetailPageState extends State<ServerDetailPage>
final pColor = primaryColor;
final used = ss.memory.used / ss.memory.total;
final width = _media.size.width - 17 * 2 - 17 * 2;
return RoundRectCard(SizedBox(
return RoundRectCard(Padding(padding: roundRectCardPadding, child: SizedBox(
height: 47,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
@@ -233,7 +234,7 @@ class _ServerDetailPageState extends State<ServerDetailPage>
)
],
),
));
),));
}
Widget _buildMemExplain(String value, Color color) {
@@ -265,7 +266,7 @@ class _ServerDetailPageState extends State<ServerDetailPage>
return RoundRectCard(SizedBox(
height: 27 * clone.length + 25,
child: ListView.builder(
padding: const EdgeInsets.symmetric(vertical: 13),
padding: const EdgeInsets.symmetric(vertical: 13, horizontal: 17),
physics: const NeverScrollableScrollPhysics(),
itemCount: clone.length,
itemBuilder: (_, idx) {
@@ -302,7 +303,7 @@ class _ServerDetailPageState extends State<ServerDetailPage>
];
children.addAll(ns.devices.map((e) => _buildNetSpeedItem(ns, e)));
return RoundRectCard(Padding(
padding: const EdgeInsets.symmetric(vertical: 7),
padding: const EdgeInsets.symmetric(vertical: 7, horizontal: 17),
child: Column(
children: children,
),

218
lib/view/page/server/tab.dart
View File

@@ -1,5 +1,6 @@
import 'package:after_layout/after_layout.dart';
import 'package:circle_chart/circle_chart.dart';
import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'package:marquee/marquee.dart';
@@ -8,6 +9,7 @@ import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:toolbox/core/route.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';
import 'package:toolbox/data/model/server/server_status.dart';
import 'package:toolbox/data/provider/server.dart';
import 'package:toolbox/data/res/color.dart';
@@ -15,6 +17,8 @@ import 'package:toolbox/data/store/setting.dart';
import 'package:toolbox/locator.dart';
import 'package:toolbox/view/page/server/detail.dart';
import 'package:toolbox/view/page/server/edit.dart';
import 'package:toolbox/view/page/snippet/list.dart';
import 'package:toolbox/view/widget/round_rect_card.dart';
class ServerPage extends StatefulWidget {
final TabController tabController;
@@ -47,8 +51,8 @@ class _ServerPageState extends State<ServerPage>
_theme = Theme.of(context);
_primaryColor = primaryColor;
if (widget.tabController.index == 0) {
FocusScope.of(context).unfocus();
}
FocusScope.of(context).unfocus();
}
}
@override
@@ -65,15 +69,19 @@ class _ServerPageState extends State<ServerPage>
),
);
}
return SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 7),
child: Column(
children: [
const SizedBox(height: 13),
...pro.servers.map((e) => _buildEachServerCard(e)),
SizedBox(height: _media.padding.bottom),
],
));
return ListView.separated(
padding: const EdgeInsets.all(7),
itemBuilder: (ctx, idx) {
if (idx == pro.servers.length) {
return SizedBox(height: _media.padding.bottom);
}
return _buildEachServerCard(pro.servers[idx]);
},
itemCount: pro.servers.length + 1,
separatorBuilder: (_, __) => const SizedBox(
height: 3,
),
);
});
return Scaffold(
body: autoUpdate
@@ -98,8 +106,8 @@ class _ServerPageState extends State<ServerPage>
}
Widget _buildEachServerCard(ServerInfo si) {
return Card(
child: InkWell(
return RoundRectCard(
InkWell(
onLongPress: () => AppRoute(
ServerEditPage(
spi: si.info,
@@ -109,7 +117,7 @@ class _ServerPageState extends State<ServerPage>
child: Padding(
padding: const EdgeInsets.all(13),
child: _buildRealServerCard(
si.status, si.info.name, si.connectionState)),
si.status, si.info.name, si.connectionState, si.info)),
onTap: () => AppRoute(ServerDetailPage('${si.info.ip}:${si.info.port}'),
'server detail page')
.go(context),
@@ -117,8 +125,8 @@ class _ServerPageState extends State<ServerPage>
);
}
Widget _buildRealServerCard(
ServerStatus ss, String serverName, ServerConnectionState cs) {
Widget _buildRealServerCard(ServerStatus ss, String serverName,
ServerConnectionState cs, ServerPrivateInfo spi) {
final rootDisk =
ss.disk.firstWhere((element) => element.mountLocation == '/');
@@ -132,29 +140,112 @@ class _ServerPageState extends State<ServerPage>
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
serverName,
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
textScaleFactor: 1.0,
),
hasError
? ConstrainedBox(
constraints: BoxConstraints(
maxWidth: _media.size.width * 0.57, maxHeight: 15),
child: Marquee(
accelerationDuration: const Duration(seconds: 3),
accelerationCurve: Curves.linear,
decelerationDuration: const Duration(seconds: 3),
decelerationCurve: Curves.linear,
text: topRightStr,
textScaleFactor: 1.0,
style: style),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 11),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Text(
serverName,
style: const TextStyle(
fontWeight: FontWeight.bold, fontSize: 12),
textScaleFactor: 1.0,
),
const Icon(
Icons.keyboard_arrow_right,
size: 17,
color: Colors.grey,
)
: Text(topRightStr, style: style, textScaleFactor: 1.0),
],
],
),
Row(
children: [
hasError
? ConstrainedBox(
constraints: BoxConstraints(
maxWidth: _media.size.width * 0.57,
maxHeight: 15),
child: Marquee(
accelerationDuration: const Duration(seconds: 3),
accelerationCurve: Curves.linear,
decelerationDuration: const Duration(seconds: 3),
decelerationCurve: Curves.linear,
text: topRightStr,
textScaleFactor: 1.0,
style: style),
)
: Text(topRightStr, style: style, textScaleFactor: 1.0),
const SizedBox(
width: 13,
),
DropdownButtonHideUnderline(
child: DropdownButton2(
customButton: const Icon(
Icons.list_alt,
size: 19,
),
customItemsIndexes: const [3],
customItemsHeight: 8,
items: [
...MenuItems.firstItems.map(
(item) => DropdownMenuItem<MenuItem>(
value: item,
child: MenuItems.buildItem(item),
),
),
const DropdownMenuItem<Divider>(
enabled: false, child: Divider()),
...MenuItems.secondItems.map(
(item) => DropdownMenuItem<MenuItem>(
value: item,
child: MenuItems.buildItem(item),
),
),
],
onChanged: (value) {
final item = value as MenuItem;
switch (item) {
case MenuItems.sftp:
//Do something
break;
case MenuItems.apt:
//Do something
break;
case MenuItems.snippet:
AppRoute(
SnippetListPage(
spi: spi,
),
'snippet list')
.go(context);
break;
case MenuItems.edit:
AppRoute(
ServerEditPage(
spi: spi,
),
'Edit server info page')
.go(context);
break;
}
},
itemHeight: 37,
itemPadding: const EdgeInsets.only(left: 17, right: 17),
dropdownWidth: 160,
dropdownPadding: const EdgeInsets.symmetric(vertical: 7),
dropdownDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(7),
),
dropdownElevation: 8,
offset: const Offset(0, 8),
),
),
],
)
],
),
),
const SizedBox(
height: 17,
@@ -286,3 +377,54 @@ class _ServerPageState extends State<ServerPage>
_serverProvider.startAutoRefresh();
}
}
class MenuItem {
final String text;
final IconData icon;
const MenuItem({
required this.text,
required this.icon,
});
}
class MenuItems {
static const List<MenuItem> firstItems = [sftp, snippet, apt];
static const List<MenuItem> secondItems = [edit];
static const sftp = MenuItem(text: 'SFTP', icon: Icons.home);
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);
static Widget buildItem(MenuItem item) {
return Row(
children: [
Icon(item.icon),
const SizedBox(
width: 10,
),
Text(
item.text,
),
],
);
}
static onChanged(BuildContext context, MenuItem item) {
switch (item) {
case MenuItems.sftp:
//Do something
break;
case MenuItems.apt:
//Do something
break;
case MenuItems.snippet:
//Do something
break;
case MenuItems.edit:
//Do something
break;
}
}
}