老铁记得 转发 ,猫哥会呈现更多 Flutter 好文~~~~

微信 flutter 研修群 ducafecat

前言

关于 Flutter V2 网络正式支持稳定的分支。今天我分享一个管理面板,或者你可以称它为仪表板 UI 。现在你可以使用 flutter 构建你的应用程序仪表板。这个仪表板包含几乎所有你需要的东西,如图表,表,显示信息的小卡片。它在网络、 macOS 应用程序、平板电脑以及安卓和 iOS 手机上都运行良好。是时候编写一次运行所有地方的代码了。是的,flutter 网络不是搜索引擎优化友好,但我们不需要搜索引擎优化的管理面板。

项目地址

https://github.com/ducafecat/Flutter-Responsive-Admin-Panel-or-Dashboard

界面

代码分析

核心代码 lib/responsive.dart

通过 MediaQuery 查询界面宽高尺寸,来决定你是那个布局方案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import 'package:flutter/material.dart';

class Responsive extends StatelessWidget {
final Widget mobile;
final Widget tablet;
final Widget desktop;

const Responsive({
Key key,
@required this.mobile,
this.tablet,
@required this.desktop,
}) : super(key: key);

// This size work fine on my design, maybe you need some customization depends on your design

// This isMobile, isTablet, isDesktop helep us later
static bool isMobile(BuildContext context) =>
MediaQuery.of(context).size.width < 850;

static bool isTablet(BuildContext context) =>
MediaQuery.of(context).size.width < 1100 &&
MediaQuery.of(context).size.width >= 850;

static bool isDesktop(BuildContext context) =>
MediaQuery.of(context).size.width >= 1100;

@override
Widget build(BuildContext context) {
final Size _size = MediaQuery.of(context).size;
// If our width is more than 1100 then we consider it a desktop
if (_size.width >= 1100) {
return desktop;
}
// If width it less then 1100 and more then 850 we consider it as tablet
else if (_size.width >= 850 && tablet != null) {
return tablet;
}
// Or less then that we called it mobile
else {
return mobile;
}
}
}

业务界面处理细节

通过 if (!Responsive.isMobile(context)) 这样的方式去判断执行

lib/screens/main/main_screen.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class MainScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
key: context.read<MenuController>().scaffoldKey,
drawer: SideMenu(),
body: SafeArea(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// We want this side menu only for large screen
if (Responsive.isDesktop(context))
Expanded(
// default flex = 1
// and it takes 1/6 part of the screen
child: SideMenu(),
),
Expanded(
// It takes 5/6 part of the screen
flex: 5,
child: DashboardScreen(),
),
],
),
),
);
}
}
  • lib/screens/dashboard/dashboard_screen.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
class DashboardScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: SingleChildScrollView(
padding: EdgeInsets.all(defaultPadding),
child: Column(
children: [
Header(),
SizedBox(height: defaultPadding),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 5,
child: Column(
children: [
MyFiels(),
SizedBox(height: defaultPadding),
RecentFiles(),
if (Responsive.isMobile(context))
SizedBox(height: defaultPadding),
if (Responsive.isMobile(context)) StarageDetails(),
],
),
),
if (!Responsive.isMobile(context))
SizedBox(width: defaultPadding),
// On Mobile means if the screen is less than 850 we dont want to show it
if (!Responsive.isMobile(context))
Expanded(
flex: 2,
child: StarageDetails(),
),
],
)
],
),
),
);
}
}

© 猫哥

https://ducafecat.tech/

https://github.com/ducafecat

往期

开源

GetX Quick Start

https://github.com/ducafecat/getx_quick_start

新闻客户端

https://github.com/ducafecat/flutter_learn_news

strapi 手册译文

https://getstrapi.cn

微信讨论群 ducafecat

系列集合

译文

https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/

Dart 编程语言基础

https://space.bilibili.com/404904528/channel/detail?cid=111585

Flutter 零基础入门

https://space.bilibili.com/404904528/channel/detail?cid=123470

Flutter 实战从零开始 新闻客户端

https://space.bilibili.com/404904528/channel/detail?cid=106755

Flutter 组件开发

https://space.bilibili.com/404904528/channel/detail?cid=144262

Flutter Bloc

https://space.bilibili.com/404904528/channel/detail?cid=177519

Flutter Getx4

https://space.bilibili.com/404904528/channel/detail?cid=177514

Docker Yapi

https://space.bilibili.com/404904528/channel/detail?cid=130578