tag: Flutter

前言 2018 年 2 月 27 日，Google 发布了 Flutter 的第一个 Beta 版本，由于自己是一个 Google 粉，所以很快就下载尝鲜了，之后还在简书上发过一篇博客《你好，Flutter》，是我的第一篇阅读量过 10w 的文章。在学习 flutter 期间也做过一些零散的笔记，但由于当时觉悟不高，并没整理成册，而且当时正准备保研，手头事情很多加上可学习的资料很少，中途便放弃了。 机缘巧合，最近阅读到了一篇谷歌开发者的文章《Flutter: a Portable UI Framework for Mobile, Web, Embedded, and Desktop》，说是现在的 Flutter 已经可以运行在 Android、ios、MacOS、Linux、Windows 和嵌入式设备上了。在好奇心的作祟下，我尝试着利用 Flutter 在一些平台上运行了一些 demo，本文便是记录我利用 Flutter 实现了移动端、桌面端和 Web 端的过程，由于移动端应用的 demo 网上教程很多，所以本文尽快略过，重点将放在桌面端和 web 端。 Flutter for Mobile 初次了解到 Flutter 的时候便是一个横跨 iOS 和 Android 两个平台的框架，无论是在 Mac/Linux 还是 Windows 上搭建 Flutter 的开发环境都很简单，Windows 上的环境搭建可以参考这篇文章 👉《安装搭建 Flutter 环境》，Mac/Linux 可以参考中文官网给出的教程 👉《安装和环境配置》 如果你在中国的网络环境下使用 Flutter，注意一定要按照要求设置好两个环境变量 export PUB_HOSTED_URL=https://pub....

本文示例代码可在微信公众号「01二进制」后台回复「WebView」查看下载 前言 我们知道在开发 Native App 时经常会有打开网页的需求，可供的选择通常只有两种： 在 App 内部打开网页 通过调用系统自带浏览器打开网页 以「微信」举例，我们在微信内阅读公众号的时候就是第一种情况，但是微信同时也提供了Open with Browser 这一选项，这就是第二种情况了。 简单的介绍下 Android 中的 WebView 想实现第一种效果，我们需要使用一个名为 WebView 的东西，先来看看在 Android 中如何实现一个 WebView 吧。 在 Android 中我们需要先在一个 Layout 中放入 WebView 这个控件，然后在对应的 Activity 或者 Fragment 或者各种 Custom View 中执行一个个的 findViewById…… 额，Android 开发者一定知道我在说什么（真的很麻烦） WebView in Flutter Flutter 的 WebView 出现已经有一段时间了，在 Flutter 插件社区官网搜索 WebView 即可搜索到比较流行的插件，如下图所示： 其中 webview_flutter 是官方维护的 WebView 插件，特性是基于原生和 Flutter SDK 封装，继承 StatefulWidget，因此支持内嵌于 flutter Widget 树中，这是比较灵活的；...

深色模式（Dark Mode），也被称为暗黑模式，是一种高对比度，或者反色模式的显示模式，开启之后在夜间可以缓解疲劳，更易于阅读，同时也能在一定程度上达到省电的效果。iOS 和安卓分别从 iOS 13 和 Android 10（不同厂商不尽相同，部分 Android 9 也支持） 开始加入深色模式的支持，各大浏览器纷纷开始支持深色模式，强如微信也终于在 iOS 客户端 7.0.12、Android 客户端 7.0.13 支持了深色模式，等网页端适配深色模式后将更进一步提高用户体验的一致性。 Flutter 作为一个先进的跨平台框架，自然也考虑到了深色模式的使用，我在上一篇文章《Flutter 主题切换——让你的 APP 也能一键换肤》的结尾提到了Brightness brightness属性可用于适配跟随系统的 DarkMode，我们可以直接在MaterialApp的darkTheme选项中使用 MaterialApp( theme: ThemeData( brightness: Brightness.light, primaryColor: Colors.blue, ), darkTheme: ThemeData( brightness: Brightness.dark, ), ); 也可以写成： darkTheme: ThemeData.dark() 这样写的好处是，用户无需单独设置深/浅色模式，完全根据系统设置来切换。 但白天不懂夜的黑，有的人就是喜欢一套深色主题用一天，这时就需要用户可以手动开启深色模式了。 我们先来看下实现的效果： 手动开启深色模式 其实思路和上一篇文章类似，通过shared_preferences保存用户设置，通过Provider实现状态管理，这两个依赖的使用我在上一篇文章中已经介绍了，这里就不多说了。详情点击 👉Flutter 主题切换——让你的 APP 也能一键换肤。 添加依赖 我们在pubspec.yaml文件中添加如下内容： provider:^4.0.5flustars:^0.2.6+1深色模式状态管理类 import 'package:flustars/flustars.dart'; import 'package:flutter/material.dart'; import 'package:flutterchallenge/constant.dart'; class DarkModeProvider with ChangeNotifier { /// 深色模式 0: 关闭 1: 开启 2: 随系统 int _darkMode; int get darkMode => _darkMode; void changeMode(int darkMode) async { _darkMode = darkMode; notifyListeners(); SpUtil....

如果你希望你的 APP 走出海外，那么就需要你在编写代码时考虑支持不同的语言环境，设置一些“本地化”的值，例如文本/布局。Flutter 本身是具备国际化的，在适配方面也较为简单，今天我将会介绍一个名为Flutter Intl的插件快速实现 Flutter 的语言国际化。 Flutter Intl 之前在学习适配国际化的时候，出现最多的一个组件叫做flutter_i18n，不过由于一些原因，这个插件已经停止维护了，后来无意中发现了一个名为Flutter Intl的插件，我们只需要在 VSCode/Android Studio 中安装他即可。 添加依赖 默认情况下，Flutter 仅提供美国英语本地化。要添加对其他语言的支持，应用程序必须指定其他 MaterialApp 属性，并包含一个名为的单独包-“flutter_localizations”。 在pubspec.yaml中添加flutter_localizations依赖并执行packages get # 国际化 flutter_localizations: sdk: flutter 如下图所示： 初始化项目 接下来我们选择Tools -> Flutter Intl -> Initialize for the Project就会对项目进行初始化 初始化结束后，pubspec.yaml中会自动增加以下字段 flutter_intl: enabled: true 表示国际化已经开启。与此同时，lib目录下会新增generated和l10n两个目录。 l10n目录下为 arb 文件 generated目录下为根据 arb 文件自动生成以下 dart 代码 ARB 文件 ARB 文件扩展名为：Application Resource Bundle 意为应用程序资源包，并得到 Google 的支持，每个.arb文件都包含一个 JSON 表，该表从资源 ID 映射到本地化值，文件名包含已为其转换值的语言环境。 所以，如果我们想新增一门语言支持的话，只需要通过插件添加相应的 arb 文件即可。...