Flutter开源项目 - 响应式后台管理面板界面

Posted 2021-06-09 会煮咖啡的猫咪

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

微信 flutter 研修群 ducafecat

项目地址

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

界面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KzIkPJb1-1620778176102)(https://ducafecat.tech/2021/05/12/flutter-opensource/flutter-responsive-admin-panel-or-dashboard/2021-05-12-07-33-10.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hNRg3PVS-1620778176104)(https://ducafecat.tech/2021/05/12/flutter-opensource/flutter-responsive-admin-panel-or-dashboard/2021-05-12-07-33-28.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZhZVIB0t-1620778176105)(https://ducafecat.tech/2021/05/12/flutter-opensource/flutter-responsive-admin-panel-or-dashboard/2021-05-12-07-33-50.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9M2E0WhJ-1620778176106)(https://ducafecat.tech/2021/05/12/flutter-opensource/flutter-responsive-admin-panel-or-dashboard/2021-05-12-07-34-24.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W59NMgaO-1620778176107)(https://ducafecat.tech/2021/05/12/flutter-opensource/flutter-responsive-admin-panel-or-dashboard/2021-05-12-07-38-08.png)]

代码分析

核心代码 lib/responsive.dart

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

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

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

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