谷歌开源跨平台UI框架——Flutter

Posted 2022-12-03 风雨田

Fluter特性介绍

Flutter官网介绍如下：

Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on ios and android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

这个说明告诉我们：Flutter是一款UI框架，可以制作跨平台（Android、IOS）的，高速的本地界面（不是H5）。Flutter可以跟现有的代码一起工作，并且可以被世界各地开发者使用，因为他是免费的、开源的！

学习这个跨平台的UI框架，也许有一天你能成为一个Android、IOS双端开发者，或者成为谷歌新系统Fuchsia开发者！不管怎么样，会让你的技能池更加丰富，让你变的更强大！

拥抱变化，才能把握机会！不学习就落后，落后就挨打！

我们已经知道Flutter是什么了，那么它有哪些特点呢？ 它能做什么呢？

• Fast development（快速开发）

Flutter’s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.

Flutter的热加载可以帮助你快速简单的尝试，构建UI，添加功能或者快速的修复BUG。你可以在任何具备IOS或Android的硬件的模拟器上体验不要一秒的重载时间，并且不会丢失任何状态！

• Expressive, beautiful UIs（漂亮的UI）

Delight your users with Flutter’s built-in beautiful Material Design and Cupertino (iOS-flavor) widgets, rich motion APIs, smooth natural scrolling, and platform awareness.

你的用户会感到高兴，因为Flutter内置的Material Design设计和Cupertino （iOS-flavor）控件，拥有丰富的api，能平滑滚动，并能保留了平台的特性

• Modern, reactive framework（时髦而高效）
  

  Easily compose your UI with Flutter’s modern reactive framework and rich set of platform, layout, and foundation widgets. Solve your tough UI challenges with powerful and flexible APIs for 2D, animation, gestures, effects, and more.

Flutter是个时髦而高效的UI框架，它有丰富的平台特性，布局，基础控件。它的2D，动画，手势，感应等强大的API，灵活使用，能解决你头疼的UI问题！

//官方示例代码
class CounterState extends State<Counter> 
  int counter = 0;

  void increment() 
    // Tells the Flutter framework that state has changed,
    // so the framework can run build() and update the display.
    setState(() 
      counter++;
    );
  

  Widget build(BuildContext context) 
    // This method is rerun every time setState is called.
    // The Flutter framework has been optimized to make rerunning
    // build methods fast, so that you can just rebuild anything that
    // needs updating rather than having to individually change
    // instances of widgets.
    return new Row(
      children: <Widget>[
        new RaisedButton(
          onPressed: increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $counter'),
      ],
    );
  

• Unified app development

Flutter has the tools and libraries to help you easily bring your ideas to life on iOS and Android. If you don’t have any mobile development experience, Flutter is an easy and fast way to build beautiful mobile apps. If you are an experienced iOS or Android developer, you can use Flutter for your views and leverage much of your existing Java/ObjC/Swift investment.

Flutter 的工具和库，可以帮助你在IOS和Android上轻松实现生活上的想法。如果你没有任何移动开发经验，你可以学习Flutter来简单、快捷的构建漂亮的移动端应用程序。如果你是一个有经验的iOS和Android开发人员，您可以使用Flutter利用你现有的代码（Java，ObJC、Swift）进行开发！

很厉害！为了让你好好使用这个框架，谷歌兼容了你现有的代码

想详细了解Flutter的特性你可以去官网逛逛

看了Fluter的特性之后，你是否对Flutter已经感兴趣？是否跃跃欲试！是的话请您继续看，我们开始配置环境！

---

Fluter环境配置

1、系统配置

• Windows 7 及以上并且 64位
• 除了Android Studio占用的空间，硬盘剩余空间必须大于40MB
• Flutter依赖命令行工具，所以你必须有GIT环境，并且有GIT命令面板可以使用

2、获取Flutter SDK

打开你的GIT命令面板，输入：

git clone -b beta https://github.com/flutter/flutter.git

通过镜像获取SDK
获取成功之后，需要配置环境变量，只需要把flutter\\bin 加入到path路径当中即可（请复制完整的路径）
然后在CMD命令中输入

flutter doctor

检查你的依赖是否已经下载成功。

• 这个命令不能在第三方的命令控制面板（shell）比如GIT上输入，请使用电脑自带的CMD面板

• 如果显示命令不存在，则说明环境没配置成功，需要重新配置或者重启计算机

• 如果现实出错，别放弃，多试几次

成功之后相关的依赖应该已经下载成功，环境配置也基本成功。Flutter支持的Android最低版本的手机是4.1，你也可通过命令查看手机是否支持

3、设置你的手机

• 打开手机的开发者模式，开启USB调试功能，把手机跟电脑连接

• 输入在命令板上输入

flutter devices

即可查看手机相关信息，即代表手机支持。

• 模拟器也可以用这个命令，但是需要注意的是谷歌推荐 x86 或者 x86_64

其实环境很好配置，下载flutter的SDK，然后加入到环境变量中即可

以上操作已经完成，我们可以设置我们的IDE了

设置Flutter IDE

• 1、下载Android Studio 3.0或者更高版本，当然你也可以使用 IntelliJ:

  • IntelliJ IDEA Community, version 2017.1 or later.
    IntelliJ IDEA Ultimate, version 2017.1 or later.

• 下载Flutter 和Dart插件

Flutter用于开发者的工作，比如编译调试等。Dart用于编码，解析
下载步骤：（1）打开Android Stsudio （2）打开插件设置（Preferences>Plugins） （3）选择Browse repositories，然后选择Flutter，点击下载（4）提示下载Dart的时候选择Yes（5）重启IDE

Hellord

创建一个新的Flutter的应用，运行，并学习如何用热重载进行更改。

• 选择File>New Flutter Project
• 选择项目类型为Fluter应用，下一步
• 输入项目名称，并下一步
• 点击finish
• 等待Android Studio下载SDK，并创建项目

* 一般创建的app是使用的Material组建*

**在你的项目中，你的app的代码是lib/main.dart

看看AndroidStudio的toolbar，可以选择手机版本，手机型号，然后点击run，就可以把项目运行到手机上了

然后可以试试Flutter的热重载能力：

• 改变字符：

'You have pushed the button this many times:' to
'You have clicked the button this many times:'

• 不要点击Stop，让你的app继续运行
• 然后点击 Save All (cmd-s / ctrl-s)，或者点击Reload按钮我们立刻就可以看到内容改变，非常方便高效

基于以上，我们已经了解了Flutter是什么，它的特性，以及环境配置和简单的尝试

下一次内容我们会分享如何构建一个Flutter APP

当然你也可以访问官网查看学习资料进行学习：官网

学习更多Android内容，欢迎关注我们的公众号：码老板