3个易用技巧提升Flutter代码质量

简介: 在Flutter开发中,代码质量是至关重要的,但是写出高质量的代码并不总是容易的。本文将介绍三种易用技巧,帮助您提升Flutter代码质量:使用命名构造函数、构建器模式开发和工厂模式创建类。这些技巧可以使代码更易于理解、更加灵活和更具可维护性。

3个易用技巧提升Flutter代码质量

前言

在Flutter开发中,代码质量是至关重要的,但是写出高质量的代码并不总是容易的。本文将介绍三种易用技巧,帮助您提升Flutter代码质量:使用命名构造函数、构建器模式开发和工厂模式创建类。这些技巧可以使代码更易于理解、更加灵活和更具可维护性。

正文

使用命名构造函数

假设你正在开发一个在线课程应用程序,这个应用程序需要管理课程的数据。课程数据包括课程的名称、描述、作者、难度等信息。你可以使用命名构造函数来定义不同类型的课程数据对象,例如完整的课程数据对象、只包含部分信息的课程数据对象等。首先,你需要定义一个 CourseData 类,这个类表示课程的数据,它包含了课程的名称、描述、作者、难度等信息:

enum Difficulty {
   
   
  easy,
  medium,
  hard,
}

class CourseData {
   
   
  final String name;
  final String description;
  final String author;
  final Difficulty difficulty;

  CourseData(this.name, this.description, this.author, this.difficulty);
}

然后,你可以定义一个 PartialCourseData 类,它表示只包含部分课程数据的对象。例如,你可能只需要获取课程的名称和描述,而不需要获取课程的作者和难度。以下是一个使用命名构造函数的 PartialCourseData 示例:

class PartialCourseData {
   
   
  final String name;
  final String description;

  PartialCourseData(this.name, this.description);

  PartialCourseData.fromCourseData(CourseData courseData)
      : name = courseData.name,
        description = courseData.description;
}

在这个示例中,使用了一个 PartialCourseData.fromCourseData 的命名构造函数,这个构造函数将创建一个只包含部分课程数据的对象。PartialCourseData.fromCourseData 构造函数中,使用了 : 符号来调用默认构造函数,同时设置了 namedescription 属性为 CourseData 对象的对应属性值,这样就可以创建一个只包含部分课程数据的对象了。

最后,你可以使用 CourseData 类和 PartialCourseData 类来管理课程的数据。例如,你可以使用 CourseData 类来创建完整的课程数据对象,使用 PartialCourseData 类来创建只包含部分课程数据的对象。以下是一个示例代码:

CourseData course1 = CourseData(
  'Flutter 基础篇1 - Dart 语言学习', 
  '因为编写 flutter 用的 dart 语言,所以学习 dart 语言是你的开始点。', 
  '猫哥', 
  Difficulty.medium,
);

PartialCourseData course2 = PartialCourseData(
  'Flutter 实战1 - Getx Woo 电商APP', 
  '基于 Flutter 3 + Getx 框架的快速开发的 视频、代码、文档',
);

PartialCourseData course3 = PartialCourseData.fromCourseData(course1);

在这个示例中,使用 CourseData 类创建了一个完整的课程数据对象 course1,使用 PartialCourseData 类创建了一个只包含部分课程数据的对象 course2,使用 PartialCourseData.fromCourseData 命名构造函数创建了一个只包含部分课程数据的对象 course3,这个对象的属性值来自于 course1 对象。

使用命名构造函数可以让代码更加清晰,同时也可以方便地创建不同类型的对象。在 Flutter 中,命名构造函数经常用于创建可配置的对象,例如在线课程数据管理、配置管理等。

构建器模式开发

在 Flutter 中,构建器模式(Builder Pattern)可以用于构建复杂的对象,同时也可以让代码更加简洁清晰。以下是一个使用构建器模式开发的 Flutter 示例:

假设你正在开发一个应用程序,这个应用程序需要显示用户的个人资料。个人资料包括用户的姓名、性别、年龄等信息。为了构建这个用户资料对象,你可以使用构建器模式。

首先,你需要定义一个 UserProfile 类,这个类表示用户的个人资料,它包含了用户的姓名、性别、年龄等信息:

class UserProfile {
   
   
  final String name;
  final String gender;
  final int age;

  UserProfile(this.name, this.gender, this.age);
}

然后,你可以定义一个 UserProfileBuilder 类,用于构建 UserProfile 对象。UserProfileBuilder 类包含了和 UserProfile 类相同的属性,同时还有一些构建方法,用于设置用户的姓名、性别、年龄等信息:

class UserProfileBuilder {
   
   
  String name;
  String gender;
  int age;

  UserProfileBuilder();

  UserProfileBuilder setName(String name) {
   
   
    this.name = name;
    return this;
  }

  UserProfileBuilder setGender(String gender) {
   
   
    this.gender = gender;
    return this;
  }

  UserProfileBuilder setAge(int age) {
   
   
    this.age = age;
    return this;
  }

  UserProfile build() {
   
   
    return UserProfile(name, gender, age);
  }
}

在这个示例中,UserProfileBuilder 类包含了一个默认的构造方法和三个设置方法(setNamesetGendersetAge),同时还有一个 build 方法,用于构建 UserProfile 对象。

最后,你可以使用 UserProfileBuilder 类来构建 UserProfile 对象。以下是一个示例代码:

UserProfile userProfile = UserProfileBuilder()
    .setName('张三')
    .setGender('男')
    .setAge(25)
    .build();

在这个示例中,使用 UserProfileBuilder 类构建了一个 UserProfile 对象,设置了用户的姓名、性别、年龄等信息。

使用构建器模式可以让代码更加清晰,同时也可以方便地构建复杂的对象。在 Flutter 中,构建器模式经常用于构建复杂的 UI 组件,例如自定义的对话框、列表项等。

例如,考虑以下代码:

Widget _buildSubtotal(BuildContext context) {
   
   
  return Row(
    children: [
      Text('11 小时'),
      Text('3 章节'),
      Text('16 节数'),
    ],
    ... // 其它修饰配置
  );
}

这段代码有效,但不是很灵活。如果您想添加其他 UI 元素或更改布局,则需要大量修改代码。通过使用构建器模式,您可以将 UI 构造与布局和样式分开:

Widget _buildSubtotal(BuildContext context) {
   
   
  return RowBuilder()
    .add(TextBuilder().setNum(11).setName('小时').build())
    .add(TextBuilder().setNum(3).setName('章节').build())
    .add(TextBuilder().setNum(16).setName('节数').build())
    .build();
}

在这段代码中,我们使用 RowBuilderTextBuilder 两个构建器来构建 RowText 控件。这样做的好处是,我们可以轻松地添加和删除 UI 元素,并且可以通过修改构建器来更改 UI 元素的布局和样式。

工厂模式创建类

假设你正在开发一个在线课程应用程序,这个应用程序需要管理课程的数据。你可以使用工厂模式来创建不同类型的课程数据对象,例如基础课程、进阶课程等。首先,你需要定义一个抽象的 Course 类,这个类表示课程,它包含了课程的名称、描述、作者、难度等信息:

enum Difficulty {
   
   
  easy,
  medium,
  hard,
}

abstract class Course {
   
   
  String get name;
  String get description;
  String get author;
  Difficulty get difficulty;
}

然后,你可以定义不同类型的课程,例如基础课程、进阶课程等。以下是一个基础课程的示例:

class BasicCourse implements Course {
   
   
  final String name;
  final String description;
  final String author;
  final Difficulty difficulty;

  BasicCourse(this.name, this.description, this.author, this.difficulty);

  factory BasicCourse.fromJson(Map<String, dynamic> json) {
   
   
    if (json['name'].isEmpty) {
   
   
      throw Error('课程名称不能为空');
    }

    return BasicCourse(
      json['name'],
      json['description'],
      json['author'],
      Difficulty.values[json['difficulty']],
    );
  }
}

在这个示例中,使用了一个 BasicCourse.fromJson 的工厂构造函数,这个构造函数将根据传入的 JSON 数据来创建一个基础课程对象。BasicCourse.fromJson 工厂构造函数中,使用了 return 语句来返回一个 BasicCourse 对象,同时根据传入的 JSON 数据设置了 namedescriptionauthordifficulty 属性值。在设置 difficulty 属性值时,使用了 Difficulty.values 来根据传入的 JSON 数据获取对应的枚举值。

类似地,你还可以定义其他类型的课程,例如进阶课程。以下是一个进阶课程的示例:

class AdvancedCourse implements Course {
   
   
  final String name;
  final String description;
  final String author;
  final Difficulty difficulty;
  final int level;

  AdvancedCourse(this.name, this.description, this.author, this.difficulty, this.level);

  factory AdvancedCourse.fromJson(Map<String, dynamic> json) {
   
   
    if (json['name'].isEmpty) {
   
   
      throw Error('课程名称不能为空');
    }

    return AdvancedCourse(
      json['name'],
      json['description'],
      json['author'],
      Difficulty.values[json['difficulty']],
      json['level'],
    );
  }
}

在这个示例中,除了基础课程的属性外,还增加了一个 level 属性,表示进阶课程的等级。在 AdvancedCourse.fromJson 工厂构造函数中,根据传入的 JSON 数据设置了 level 属性值。

最后,你可以使用工厂模式来创建不同类型的课程数据对象。例如,你可以使用 BasicCourse.fromJson 工厂构造函数来创建一个基础课程对象,使用 AdvancedCourse.fromJson 工厂构造函数来创建一个进阶课程对象。以下是一个示例代码:

Map<String, dynamic> basicCourseJson = {
   
   
  'name': 'Flutter 基础篇1 - Dart 语言学习',
  'description': '因为编写 flutter 用的 dart 语言,所以学习 dart 语言是你的开始点。',
  'author': '猫哥',
  'difficulty': 1,
};

Course basicCourse = BasicCourse.fromJson(basicCourseJson);
Map<String, dynamic> advancedCourseJson = {
   
   
  'name': 'Flutter 实战1 - Getx Woo 电商APP',
  'description': '基于 Flutter 3 + Getx 框架的快速开发的 视频、代码、文档',
  'author': '猫哥',
  'difficulty': 2,
  'level': 2,
};

Course advancedCourse = AdvancedCourse.fromJson(advancedCourseJson);

在这个示例中,根据传入的 JSON 数据,使用 BasicCourse.fromJson 工厂构造函数创建了一个基础课程对象 basicCourse,使用 AdvancedCourse.fromJson 工厂构造函数创建了一个进阶课程对象 advancedCourse

使用工厂模式可以让代码更加灵活,同时也可以方便地创建不同类型的对象。在 Flutter 中,工厂模式经常用于从网络或本地数据源中创建对象,例如在线课程数据管理、配置管理等。

小结

本文介绍了三种易用技巧,可以帮助您提升Flutter代码质量。当您编写Flutter代码时,考虑使用这些技巧来提高代码的质量,带来更好的用户体验和更高的开发效率。


© 猫哥
ducafecat.com

end

相关文章
|
8月前
|
Dart 监控 测试技术
在Flutter开发中,注重代码质量与重构实践显得尤为重要
【6月更文挑战第11天】随着Flutter在跨平台开发的普及,保持高质量代码成为开发者关注的重点。良好的代码质量关乎应用性能、稳定性和开发效率。为提升Flutter代码质量,开发者应遵循最佳实践,编写可读性高的代码,实施代码审查和自动化测试。重构实践在应对代码复杂性时也至关重要,包括识别重构时机、制定计划、逐步操作及利用重构工具。注重代码质量和重构是Flutter开发成功的关键。
101 3
|
9月前
|
Dart 前端开发 测试技术
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
【4月更文挑战第30天】随着Flutter在跨平台开发的普及,保证代码质量成为开发者关注的重点。优质代码能确保应用性能与稳定性,提高开发效率。关键策略包括遵循最佳实践,编写可读性强的代码,实施代码审查和自动化测试。重构实践在项目扩展时尤为重要,适时重构能优化结构,降低维护成本。开发者应重视代码质量和重构,以促进项目成功。
105 0
【Flutter前端技术开发专栏】Flutter开发中的代码质量与重构实践
|
27天前
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
18 1
|
12天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
144 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
28天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
116 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
17天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
124 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
25天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
75 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
15天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
38 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
1月前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
89 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
30天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
80 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 5
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 6
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
  • 7
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 9
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    28
  • 2
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    59
  • 3
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    42
  • 4
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    144
  • 5
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    38
  • 6
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    73
  • 7
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    124
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75
  • 9
    flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
    18
  • 10
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    29