Flutter项目向BLoC/Cubit架构重构的优化建议咨询

我正在对一款Flutter应用进行重构，尝试采用BLoC/Cubit架构。当前重构代码可正常运行，但在全面推进项目重构前，希望依据BLoC原则获取优化建议，核心目标是提升代码可读性，便于其他开发者切换至该新架构。

原始代码（spot_widget.dart） #

import 'package:project/models/latlon.dart';
import 'package:project/models/spot_info.dart';
import 'package:project/models/spot_review.dart';
import 'package:flutter/widgets.dart';

class SpotWidget extends StatefulWidget {
  final LatLon location;
  const SpotWidget({super.key, required this.location});

  @override
  State<SpotWidget> createState() => _SpotWidgetState();
}

class _SpotWidgetState extends State<SpotWidget> {
  SpotInfo? info;
  List<SpotReview> reviews = [];

  Future<void> _loadInfo() async {
    final infos = await SpotInfo.get(widget.location);
    info = infos.first;
    setState(() {});
  }

  Future<void> _loadReviews() async {
    reviews = await SpotReview.get(widget.location);
    setState(() {});
  }

  @override
  void initState() {
    _loadInfo();
    _loadReviews();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(widget.location.toString()),
        // TODO: 展示地点详情的Widget
        if (info != null) Text(info!.isPublic.toString()),
        // TODO: 展示评论列表的Widget
        if (reviews.isNotEmpty) Text(reviews.length.toString()),
      ],
    );
  }
}

当前重构代码 #

spot_repository.dart #

import 'package:project/models/latlon.dart';
import 'package:project/models/spot_info.dart';
import 'package:project/models/spot_review.dart';

class SpotRepository {
  Future<SpotInfo> getSpotInfo(LatLon location) async {
    final infos = await SpotInfo.get(location);
    return infos.first;
  }

  Future<List<SpotReview>> getSpotReviews(LatLon location) async {
    return await SpotReview.get(location);
  }
}

spot_cubit.dart #

import 'package:project/models/latlon.dart';
import 'package:project/spot/spot_repository.dart';
import 'package:project/spot/spot_state.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class SpotCubit extends Cubit<SpotState> {
  final SpotRepository _repository;

  SpotCubit(this._repository) : super(SpotInitial());

  Future<void> loadSpotInfoAndReviews(LatLon location) async {
    emit(SpotLoading());
    try {
      final info = await _repository.getSpotInfo(location);
      final reviews = await _repository.getSpotReviews(location);
      emit(SpotLoaded(info, reviews));
    } catch (e) {
      emit(SpotError("加载地点信息和评论失败"));
    }
  }
}

spot_state.dart #

import 'package:project/models/spot_info.dart';
import 'package:project/models/spot_review.dart';
import 'package:flutter/material.dart';

@immutable
abstract class SpotState {}

class SpotInitial extends SpotState {}

class SpotLoading extends SpotState {}

class SpotLoaded extends SpotState {
  final SpotInfo info;
  final List<SpotReview> reviews;

  SpotLoaded(this.info, this.reviews);
}

class SpotError extends SpotState {
  final String message;

  SpotError(this.message);
}

spot_widget.dart #

import 'package:project/models/latlon.dart';
import 'package:project/spot/spot_cubit.dart';
import 'package:project/spot/spot_repository.dart';
import 'package:project/spot/spot_state.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class SpotBlocWidget extends StatelessWidget {
  final LatLon location;

  const SpotBlocWidget({super.key, required this.location});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) =>
          SpotCubit(SpotRepository())..loadSpotInfoAndReviews(location),
      child: BlocBuilder<SpotCubit, SpotState>(
        builder: (context, state) {
          if (state is SpotLoading) {
            return const CircularProgressIndicator();
          } else if (state is SpotLoaded) {
            return Column(
              children: [
                Text(location.toString()),
                Text(state.info.isPublic.toString()),
                Text(state.reviews.length.toString()),
              ],
            );
          } else if (state is SpotError) {
            return Text(state.message);
          } else {
            return const Text('出现未知错误');
          }
        },
      ),
    );
  }
}

优化建议 #

1. 强化状态的不可变性与可维护性 #

当前状态类仅标记@immutable，未严格保证不可变约束。建议手动完善不可变逻辑，或使用freezed库自动生成，避免意外数据修改：

@immutable
abstract class SpotState {
  const SpotState();
}

class SpotInitial extends SpotState {
  const SpotInitial();
}

class SpotLoading extends SpotState {
  const SpotLoading();
}

class SpotLoaded extends SpotState {
  final SpotInfo info;
  final List<SpotReview> reviews;

  const SpotLoaded(this.info, this.reviews);

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is SpotLoaded &&
          runtimeType == other.runtimeType &&
          info == other.info &&
          reviews == other.reviews;

  @override
  int get hashCode => info.hashCode ^ reviews.hashCode;
}

class SpotError extends SpotState {
  final String message;
  final Object? error; // 保留原始异常，便于调试

  const SpotError(this.message, [this.error]);

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is SpotError &&
          runtimeType == other.runtimeType &&
          message == other.message &&
          error == other.error;

  @override
  int get hashCode => message.hashCode ^ error.hashCode;
}

2. 拆分Cubit方法，遵循单一职责 #

原始代码中地点信息和评论是独立加载逻辑，当前Cubit合并为一个方法限制了灵活性。建议拆分方法，支持单独/批量加载：

class SpotCubit extends Cubit<SpotState> {
  final SpotRepository _repository;
  LatLon? _currentLocation;

  SpotCubit(this._repository) : super(SpotInitial());

  // 单独加载地点信息
  Future<void> loadSpotInfo(LatLon location) async {
    if (_currentLocation == location && state is SpotLoaded) return;
    emit(SpotLoading());
    try {
      final info = await _repository.getSpotInfo(location);
      final reviews = (state is SpotLoaded) ? (state as SpotLoaded).reviews : [];
      emit(SpotLoaded(info, reviews));
      _currentLocation = location;
    } catch (e) {
      emit(SpotError("加载地点信息失败", e));
    }
  }

  // 单独加载评论
  Future<void> loadSpotReviews(LatLon location) async {
    if (_currentLocation == location && state is SpotLoaded) return;
    emit(SpotLoading());
    try {
      final reviews = await _repository.getSpotReviews(location);
      final info = (state is SpotLoaded) ? (state as SpotLoaded).info : null;
      if (info != null) {
        emit(SpotLoaded(info, reviews));
      } else {
        emit(SpotError("请先加载地点信息"));
      }
      _currentLocation = location;
    } catch (e) {
      emit(SpotError("加载评论失败", e));
    }
  }

  // 并行加载两者，提升性能
  Future<void> loadSpotInfoAndReviews(LatLon location) async {
    if (_currentLocation == location && state is SpotLoaded) return;
    emit(SpotLoading());
    try {
      final infoFuture = _repository.getSpotInfo(location);
      final reviewsFuture = _repository.getSpotReviews(location);
      emit(SpotLoaded(await infoFuture, await reviewsFuture));
      _currentLocation = location;
    } catch (e) {
      emit(SpotError("加载地点信息和评论失败", e));
    }
  }
}

3. 优化依赖注入，提升可测试性 #

避免在Widget中硬编码实例化SpotRepository，通过上层依赖注入或容器（如get_it）传递：

class SpotBlocWidget extends StatefulWidget {
  final LatLon location;

  const SpotBlocWidget({super.key, required this.location});

  @override
  State<SpotBlocWidget> createState() => _SpotBlocWidgetState();
}

class _SpotBlocWidgetState extends State<SpotBlocWidget> {
  late SpotCubit _cubit;

  @override
  void initState() {
    super.initState();
    // 从上层获取Repository
    final repository = context.read<SpotRepository>();
    _cubit = SpotCubit(repository)..loadSpotInfoAndReviews(widget.location);
  }

  @override
  void didUpdateWidget(covariant SpotBlocWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 地点变化时自动重新加载
    if (oldWidget.location != widget.location) {
      _cubit.loadSpotInfoAndReviews(widget.location);
    }
  }

  @override
  void dispose() {
    _cubit.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider.value(
      value: _cubit,
      child: BlocBuilder<SpotCubit, SpotState>(
        builder: (context, state) => _buildContent(state),
      ),
    );
  }

  Widget _buildContent(SpotState state) {
    switch (state) {
      case SpotLoading():
        return const CircularProgressIndicator();
      case SpotLoaded(:final info, :final reviews):
        return SpotContentWidget(
          location: widget.location,
          info: info,
          reviews: reviews,
        );
      case SpotError(:final message):
        return Column(
          children: [
            Text(message),
            ElevatedButton(
              onPressed: () => _cubit.loadSpotInfoAndReviews(widget.location),
              child: const Text("重试"),
            ),
          ],
        );
      default:
        return const Text('出现未知错误');
    }
  }
}

// 拆分UI组件，专注于数据展示
class SpotContentWidget extends StatelessWidget {
  final LatLon location;
  final SpotInfo info;
  final List<SpotReview> reviews;

  const SpotContentWidget({
    super.key,
    required this.location,
    required this.info,
    required this.reviews,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(location.toString()),
        Text(info.isPublic.toString()),
        Text(reviews.length.toString()),
        // TODO: 替换为实际的详情和评论列表Widget
      ],
    );
  }
}

4. 优化状态判断可读性 #

使用Dart 3.0模式匹配的switch-case替代多个if-else，代码更简洁易读，如上述_buildContent方法所示。

5. 新增重试逻辑 #

在错误状态下添加重试按钮，直接调用Cubit加载方法，提升用户体验。

6. 支持地点更新 #

将Widget改为Stateful，在didUpdateWidget中监听地点变化，自动触发重新加载，比原始代码更完善。

内容的提问来源于stack exchange，提问作者ethicnology