《Flutter篇第一章》基于GetX 和 Binding、Dio 实现的 Flutter UI 架构

基于GetX等实现的Flutter UI架构

原创

已于 2025-07-25 15:21:50 修改 · 488 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #ui #架构

于 2025-07-24 14:59:40 首次发布

架构流程图

lib/
├── app/
│   ├── bindings/           # 依赖注入绑定
│   │   ├── auth_binding.dart
│   │   └── main_binding.dart
│   ├── modules/            # 功能模块
│   │   ├── auth/           # 登录模块
│   │   │   ├── auth_controller.dart
│   │   │   └── auth_page.dart
│   │   └── main/           # 主模块
│   │       ├── tabs/       # 四个Tab页
│   │       │   ├── home/
│   │       │   ├── explore/
│   │       │   ├── cart/
│   │       │   └── profile/
│   │       ├── main_controller.dart
│   │       └── main_page.dart
│   └── routes/             # 路由管理
│       ├── app_pages.dart
│       └── app_routes.dart
├── data/                   # 数据层
│   ├── local/              # 本地存储
│   │   └── storage_service.dart
│   ├── network/            # 网络请求
│   │   ├── api_service.dart
│   │   ├── base_provider.dart
│   │   └── interceptors.dart
│   └── repositories/       # 仓库
│       └── auth_repository.dart
├── core/                   # 核心工具
│   ├── constants/          # 常量
│   │   └── strings.dart
│   └── utils/              # 工具类
│       └── extensions.dart
└── splash_page.dart        # 启动页

架构特点

框架特点

    分层架构:

        视图层: 负责UI展示

        控制器层: 处理业务逻辑

        仓库层: 聚合数据源

        服务层: 提供基础能力(网络、存储)

    状态管理:

        使用GetX的响应式编程(.obs + Obx())

        自动内存管理，无需手动dispose

        细粒度状态更新

    依赖管理:

        GetX Binding自动管理依赖生命周期

        全局服务使用permanent: true保持常驻

        页面级控制器按需创建

    路由管理:

        命名路由系统

        中间件支持(如登录验证)

        平滑的页面过渡动画

    网络模块:

        Dio封装+拦截器

        Token自动管理

        统一错误处理

    本地存储:

        GetStorage轻量级键值存储

        支持对象存储

        自动序列化/反序列化

实现

1、pubspec.yaml 中配置需要的组件库

  cupertino_icons: ^1.0.2
  get: ^4.6.5
  dio: ^5.0.0
  get_storage: ^2.1.1
  shared_preferences: ^2.2.1

2、主入口 - lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';

import 'app/bindings/initial_binding.dart';
import 'app/routes/app_pages.dart';
import 'app/routes/app_routes.dart';

void main() async {
   
   
  WidgetsFlutterBinding.ensureInitialized();
  await GetStorage.init();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(

    systemNavigationBarColor: Colors.transparent,
  ));
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
   
   
  const MyApp({
   
   super.key});

  @override
  Widget build(BuildContext context) {
   
   
    return GetMaterialApp(
      title: 'Flutter GetX Template',
      initialBinding: InitialBinding(),
      initialRoute: Routes.SPLASH,
      getPages: AppPages.routes,
      theme: ThemeData(primarySwatch: Colors.blue),
      debugShowCheckedModeBanner: false,
    );
  }
}

3、lib/splash_page.dart 注释部分可以加入登录判断，也就是token 或者是其他auth

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'app/routes/app_routes.dart';
import 'data/local/storage_service.dart';

class SplashPage extends StatelessWidget {
   
   
  const SplashPage({
   
   super.key});

  @override
  Widget build(BuildContext context) {
   
   
    Future.delayed(const Duration(seconds: 2), () {
   
   
      final storage = Get.find<StorageService>();
      // if (storage.token != null) {
   
   
      //   Get.offNamed(Routes.MAIN);
      // } else {
   
   
      //   Get.offNamed(Routes.LOGIN);
      // }
      Get.offNamed(Routes.MAIN);
    });

    return const Scaffold(
      body: Center(
        child: FlutterLogo(size: 100),
      ),
    );
  }
}