Flutter学习之项目多端开发思想规范

Flutter项目标准规范.png

• Controllers
• Models
• Pages

Controllers/Models/Pages文件夹

• Main.dart:

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     title: 'Flutter Admin Panel',
     theme: ThemeData.dark().copyWith(
       scaffoldBackgroundColor: bgColor,
       textTheme: GoogleFonts.poppinsTextTheme(Theme.of(context).textTheme)
           .apply(bodyColor: Colors.white),
       canvasColor: secondaryColor,
     ),
     home: MultiProvider(
       providers: [
         ChangeNotifierProvider(
           create: (context) => MenuController(),
         ),
       ],
       child: MainScreen(),
     ),
   );
 }
}

Constants常用常量定义

import 'package:flutter/material.dart';

const primaryColor = Color(0xFF2697FF);
const secondaryColor = Color(0xFF2A2D3E);
const bgColor = Color(0xFF212332);

const defaultPadding = 16.0;

Responsive响应式识别设备类型

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);

  // 多端设备定义移动、平板、桌面

  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;
    // 屏幕宽度大于1100px定义为桌面
    if (_size.width >= 1100) {
      return desktop;
    }
    // 屏幕宽度大于850定义为平板
    else if (_size.width >= 850 && tablet != null) {
      return tablet;
    }
    // 否则为移动端
    else {
      return mobile;
    }
  }
}