Flutter項(xiàng)目標(biāo)準(zhǔn)規(guī)范.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響應(yīng)式識別設(shè)備類型

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

  // 多端設(shè)備定義移動(dòng)、平板、桌面

  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;
    }
    // 否則為移動(dòng)端
    else {
      return mobile;
    }
  }
}