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

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

微信 flutter 研修群 ducafecat

我的项目地址

https://github.com/ducafecat/...

界面

代码剖析

外围代码 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/...

新闻客户端

https://github.com/ducafecat/...

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat