flutter 3.7.x woo 课件代码升级说明

前言

flutter sdk 3.7.x 已经在广大开发者中流行，woo 的课程代码也在维护迭代，这次升级变化还是很大的，并且还修复了一个之前的 bug ，切换主题功能。

flutter 环境

❯ flutter --version                                                                                                                   ─╯
Flutter 3.7.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 9944297138 (5 周前) • 2023-02-08 15:46:04 -0800
Engine • revision 248290d6d5
Tools • Dart 2.19.2 • DevTools 2.20.1

pubspec.yaml 设置

environment:
  sdk: ">=2.19.0 <3.0.0"
  flutter: ">=3.7.0"

Badge 冲突

问题

The name 'Badge' is defined in the libraries 'package:badges/src/badge.dart (via package:badges/badges.dart)' and 'package:flutter/src/material/badge.dart (via package:flutter/material.dart)'.

Try using 'as prefix' for one of the import directives, or hiding the name from all but one of the

处理

import 'package:flutter/material.dart' hide Badge;

隐藏 material 导包的 Badge 组件，当然也可以通过改别名方式。

modal_bottom_sheet 冲突

问题

Error (Xcode): ../../../../.pub-cache/hosted/pub.flutter-io.cn/modal_bottom_sheet-2.1.2/lib/src/material_with_modal_page_route.dart:4:1: 

Error: 'ModalBottomSheetRoute' is imported from both 'package:flutter/src/material/bottom_sheet.dart' and 'package:modal_bottom_sheet/src/bottom_sheet_route.dart'.

处理

这个问题是 modal_bottom_sheet 三方包的 material_with_modal_page_route.dart 文件报出的，我们可以clone他的2.1.2版本进行自行修复，或者升级一个版本看看。

modal_bottom_sheet: 3.0.0-pre

pinput 报错

问题

Error (Xcode): ../../../../.pub-cache/hosted/pub.flutter-io.cn/pinput-2.2.12/lib/src/pinput_state.dart:337:14: Error: The method 'FocusTrapArea' isn't defined for the class '_PinputState'.

处理

pinput: 2.2.31

dio 5 版本升级

lib/common/services/wp_http.dart

  @override
  void onInit() {
    super.onInit();

    // 初始 dio
    var options = BaseOptions(
      baseUrl: Constants.wpApiBaseUrl,
      connectTimeout: const Duration(seconds: 10), // 10000, // 10秒
      receiveTimeout: const Duration(seconds: 5), // 5000, // 5秒
      headers: {},
      contentType: 'application/json; charset=utf-8',
      responseType: ResponseType.json,
    );
    _dio = Dio(options);

    // 拦截器
    _dio.interceptors.add(RequestInterceptors());
  }

connectTimeout, receiveTimeout , 参数类型 Duration

  @override
  void onResponse(Response response, ResponseInterceptorHandler handler) {
    // 200 请求成功, 201 添加成功
    if (response.statusCode != 200 && response.statusCode != 201) {
      handler.reject(
        DioError(
          requestOptions: response.requestOptions,
          response: response,
          type: DioErrorType.badResponse,
        ),
        true,
      );
    } else {
      handler.next(response);
    }
  }

type: DioErrorType.badResponse, 指定错误类型


  @override
  Future<void> onError(DioError err, ErrorInterceptorHandler handler) async {
    final exception = HttpException(err.message ?? "error message");
    switch (err.type) {
      case DioErrorType.badResponse: // 服务端自定义错误体处理
        {
          final response = err.response;
          final errorMessage = ErrorMessageModel.fromJson(response?.data);
          switch (errorMessage.statusCode) {
            // 401 未登录
            case 401:
              // 注销 并跳转到登录页面
              _errorNoAuthLogout();
              break;
            case 404:
              break;
            case 500:
              break;
            case 502:
              break;
            default:
              break;
          }
          Loading.error(errorMessage.message);
        }
        break;
      case DioErrorType.unknown:
        break;
      case DioErrorType.cancel:
        break;
      case DioErrorType.connectionTimeout:
        break;
      default:
        break;
    }
    DioError errNext = err.copyWith(
      error: exception,
    );
    handler.next(errNext);
  }

使用 err.copyWith 方式自定义错误体返回

changeThemeMode 修改明亮暗色模式

lib/common/services/config.dart

  // 切换 theme
  Future<void> switchThemeModel() async {
    _isDarkModel.value = !_isDarkModel.value;
    Get.changeThemeMode(
      _isDarkModel.value == true ? ThemeMode.dark : ThemeMode.light,
    );
    await Storage().setString(Constants.storageThemeCode,
        _isDarkModel.value == true ? "dark" : "light");
    Get.offAllNamed(RouteNames.systemSplash);
  }

  // 初始 theme
  void initTheme() {
    var themeCode = Storage().getString(Constants.storageThemeCode);
    _isDarkModel.value = themeCode == "dark" ? true : false;
  }

lib/main.dart

...GetMaterialApp(
  ...
  
  // 样式
  theme: AppTheme.light,
  darkTheme: AppTheme.dark,

  // 主题
  themeMode: ConfigService.to.isDarkModel ? ThemeMode.dark : ThemeMode.light,

  ...

升级到最新三方包

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  flutter_localizations:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.5

  # getx 框架
  get: 4.6.5
  intl: 0.17.0
  package_info_plus: 3.0.3
  shared_preferences: 2.0.18
  dio: 5.0.2
  flutter_svg: 1.1.4
  badges: 3.0.2
  extended_image: 7.0.2
  flutter_screenutil: 5.7.0
  flutter_native_splash: 2.2.16
  carousel_slider: 4.2.1
  validatorless: 1.2.3
  pinput: 2.2.31
  flutter_easyloading: 3.0.5
  encrypt: 5.0.1
  pull_to_refresh: 2.0.0
  photo_view: 0.14.0
  dropdown_button2: 1.7.2
  another_xlider: 1.1.2
  # picker 选择器
  flutter_picker: 2.1.0
  # 底部弹出
  modal_bottom_sheet: 3.0.0-pre
  # permission 权限
  permission_handler: 10.2.0
  # 媒体选择
  wechat_assets_picker: 8.4.0
  wechat_camera_picker: 3.7.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^2.0.0

  # 图标生成
  flutter_launcher_icons_maker: 0.10.2

end