20 个 Flutter 开发技巧，助你节省开发时间

前言

原文 Flutter 开发者必看：20 个节省时间的技巧

本文介绍 20 个实用的 Flutter 开发技巧，帮助开发者提升效率，节省宝贵的开发时间。无论你是新手还是经验丰富的开发者，这些技巧都能让你的工作事半功倍。

正文

任何可以使用的地方都使用 `const`

如果某个组件不会发生变化，就将其设为 const。为什么？

减少重建
提升性能
使你的代码更整洁

const Text('Hello Flutter');

使用 `.copyWith()` 包裹组件以复用样式

使用 copyWith() 方法在不重写的情况下调整文本或主题样式：

Text(
  'Hello',
  style: Theme.of(context).textTheme.headlineSmall?.copyWith(color: Colors.red),
);

使用 `MediaQuery` 创建响应式 UI

避免硬编码尺寸。动态使用屏幕尺寸：

final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;

使用 `LayoutBuilder` 实现真正自适应的布局

想构建能根据屏幕尺寸变化的 UI 吗？

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return WideScreenLayout();
    } else {
      return MobileLayout();
    }
  },
);

使用 `flutter_lints` 或 `very_good_analysis`

Linting 可以自动改进你的代码。安装严格的 lint 规则，以便及早发现不良实践。

flutter pub add --dev flutter_lints

使用 `flutter pub upgrade --major-versions`

需要安全地将所有包升级到最新版本吗？

flutter pub upgrade --major-versions

你将获得最新兼容版本——冲突更少。

使用 `flutter_hooks` 编写更清晰的有状态代码

讨厌写 initState、dispose 等代码？使用 flutter_hooks 在函数式组件中简化有状态逻辑。

final counter = useState(0);

使用 `Freezed` 实现不可变模型 + 密封类

厌倦了编写模型样板代码？

dependencies:
  freezed_annotation:
dev_dependencies:
  build_runner:
  freezed:

现在使用：

@freezed
class User with _$User {
  const factory User({required String name, required int age}) = _User;
}

使用 `Riverpod` 进行简单且可扩展的状态管理

Provider 很好，但 Riverpod 是新一代的状态管理方案：无状态、可测试且更不易出错。

final counterProvider = StateProvider<int>((ref) => 0);

使用 `flutter_native_splash` 自动生成启动屏幕

手动启动屏幕已经过时了。

flutter pub add flutter_native_splash

然后只需用图片和背景颜色更新你的 pubspec.yaml。

将 `build_runner` 与 `json_serializable` 一起使用

不要手动转换 JSON。要自动化处理。

flutter pub run build_runner build --delete-conflicting-outputs

创建可重用的自定义组件

停止重复复制相同的样式按钮10次。

class CustomButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  const CustomButton({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(text),
    );
  }
}

使用 `AnimatedContainer` 实现平滑过渡效果

不必手动编写动画代码：

AnimatedContainer(
  duration: Duration(milliseconds: 300),
  width: isExpanded ? 200 : 100,
  color: isExpanded ? Colors.blue : Colors.grey,
);

使用 `cached_network_image` 缓存图片

避免每次重新加载图片：

CachedNetworkImage(
  imageUrl: 'https://yourimage.com/img.jpg',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
);

使用 `intl` 格式化日期和货币

final f = NumberFormat.currency(locale: 'en_IN', symbol: '₹');
f.format(100000); // ₹1,00,000.00

使用 `GestureDetector` 添加点击任意位置功能

将任意小部件包裹以使其具有交互性：

GestureDetector(
  onTap: () => print('Tapped!'),
  child: Container(
    color: Colors.red,
    child: Text('Tap me'),
  ),
);

使用 `WidgetsBinding.instance.addPostFrameCallback()` 实现构建后逻辑

非常适合在首个帧渲染完成后调用 API。

WidgetsBinding.instance.addPostFrameCallback((_) {
  fetchData();
});

使用 `flutter_screenutil` 实现像素级精确的尺寸适配

想让你的应用在每个屏幕上都完美呈现吗？

flutter_screenutil: ^5.5.4

然后在 main.dart 中初始化，并使用 20.w、30.h 进行缩放。

在 API 调用中优先使用 `Dio` 而不是 `http`

dio 支持拦截器、错误处理，并且更加灵活。

final dio = Dio();
final response = await dio.get('https://api.example.com');

使用 `auto_route` 实现类型安全的嵌套导航

停止以字符串形式传递路由。

flutter pub add auto_route

然后像这样定义路由：

@MaterialAutoRouter(
  routes: <AutoRoute>[
    AutoRoute(page: HomePage, initial: true),
    AutoRoute(page: DetailsPage),
  ],
)

总结

通过掌握这20个超实用的Flutter开发技巧，开发者可以显著提升开发效率，节省数小时的开发时间。这些技巧涵盖了从基础到进阶的多种方法，适合各个水平的开发者使用。无论你是Flutter新手还是经验丰富的开发者，本文提供的建议都将帮助你在项目中事半功倍。

感谢阅读本文

如果有什么建议，请在评论中让我知道。我很乐意改进。

猫哥 APP

flutter 学习路径

end