一些flutter自用/好用的库推荐+记录

如果文章中的图片加载不出来, 请您考虑使用代理软件.

此文章使用 CC-BY-NC 协议.

目录

前言

自学 flutter 近一年半载, 踩了许多坑, 也得到了不少经验.

其实早就知道 flutter 及其好用程度了, 但是一直找不到很好的教程, 也静不下来, 很难达到 心流 境界.

还记得最先是用 flet. 因为那时 唯一会&熟悉 的编程语言是 python.

flet 是一个用 python 写的包裹 flutter 的框架, 也就是说用 python 的语法来写 flutter 应用. 仓库: https://github.com/flet-dev/flet .

flet 毋庸置疑地是我这一年多来所有项目的启蒙老师 (因为这一年多以来我都没写过 基于 flet/flutter 以外的项目), 也毋庸置疑地好用.

用 flet 写过一个记账软件 记易, 源代码: https://github.com/wzk0/jiyi .

不过毕竟是打包 python 还有一堆库, flet 的缺点也很明显: 启动 app 总会卡顿, 安装包体积也挺大. 这两点让我决心学会 flutter.

功夫不负有心人. 用 flet 半年后, 我找到了三个安静的夜, 也找到了一个极好的教程:

视频在 YouTube 上.

五个小时下来, dart 的语法, 以及 flutter 常用的组件竟都 学会&记住 了.

之后的一年摸索, 总算是确定了自己的一套 开发流程以及常用 库.

分享给有需要的读者, 同时也是自己的记录.

shared_preferences (本地变量储存)

• 类型: 函数型

• 说明:

先定义一个 prefs.

final prefs = await SharedPreferences.getInstance();

随后就可以 prefs.setBool(‘key’, true); (储存一个布尔类型的变量, 其值为 true), prefs.getBool(‘key’); (获取名为 key 的值).

或者其他操作.

change_app_package_name (一键修改应用包名)

• 类型: 指令型

• 说明:

在终端运行:

dart run change_app_package_name:main a.b.c

即可一键将 Android 和 iOS 的应用包名进行修改.

a.b.c 为自己的应用包名.

flutter_launcher_icons (一键修改应用图标, 支持动态取色)

• 类型: 指令型

• 说明:

在 pubspec.yaml 的末尾添加:

flutter_launcher_icons:
    android: true
    image_path: "icon 路径"
    adaptive_icon_background: "#ffffff"
    adaptive_icon_foreground: "icon 路径"

随后运行:

dart run flutter_launcher_icons

即可一键修改应用图标.

flutter_inappwebview (webview 组件)

• 类型: 组件型

• 说明:

InAppWebView(
        initialUrlRequest: URLRequest(url: WebUri('此处为 URL')),
        onProgressChanged: (controller, progress) {},
        // 还有许多其他丰富的监听方法
),

fluttertoast (弹出一个 toast)

• 类型: 函数型

• 说明:

Fluttertoast.showToast(msg: '此处为 toast 内容');

package_info_plus (获取 pubspec.yaml 中的版本号)

• 类型: 函数型

• 说明:

先在 state 中定义一个 _currentVersion.

String _currentVersion = "v0.0.0";

写一个函数, 然后在 initState 中调用.

  @override
  void initState() {
    super.initState();
    _loadVersion();
  }

  Future<void> _loadVersion() async {
    try {
      final PackageInfo packageInfo = await PackageInfo.fromPlatform();
      if (mounted) {
        setState(() {
          _currentVersion = "v${packageInfo.version}";
        });
      }
    } catch (e) {
      debugPrint("获取版本号失败: $e");
    }
  }

之后就可以用 _currentVersion 来 检测版本号 或者 展示版本号 或者其他了.