Flutter是什么?

Flutter是一款移动应用程序SDK,一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。

Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。我们兼容滚动行为、排版、图标等方面的差异。

为什么要使用Flutter?

Flutter有什么优势?它可以帮助你:

  • 提高开发效率

同一份代码开发iOS和Android
用更少的代码做更多的事情

  • 轻松迭代

在应用程序运行时更改代码并重新加载(通过热重载)
修复崩溃并继续从应用程序停止的地方进行调试

  • 创建美观,高度定制的用户体验

受益于使用Flutter框架提供的丰富的Material Design和Cupertino(iOS风格)的widget
实现定制、美观、品牌驱动的设计,而不受原生控件的限制
主要有以下特点
快速开发


毫秒级的热重载,修改后,您的应用界面会立即更新。使用丰富的、完全可定制的widget在几分钟内构建原生界面。

Flutter的热重载可帮助您快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上可以在亚秒内重载,并且不会丢失状态。

frc 961fc15a1983d1b8d2a32764c6697b36 - Flutter快速入门 五步搞定Flutter环境配置
这里写图片描述

富有表现力和灵活的UI

快速发布聚焦于原生体验的功能。分层的架构允许您完全自定义,从而实现难以置信的快速渲染和富有表现力、灵活的设计。

使用Flutter内置美丽的Material Design和Cupertino(iOS风格)widget、丰富的motion API、平滑而自然的滑动效果和平台感知,为您的用户带来全新体验。

frc 509149b67facb0b5f6be285cc7547fcf - Flutter快速入门 五步搞定Flutter环境配置
这里写图片描述

frc d2300ea6458509804ec18b20be3cf586 - Flutter快速入门 五步搞定Flutter环境配置
这里写图片描述

frc a2d56ee2375fe556dd1ba5b0fd0f0d37 - Flutter快速入门 五步搞定Flutter环境配置
这里写图片描述

原生性能

Flutter包含了许多核心的widget,如滚动、导航、图标和字体等,这些都可以在iOS和Android上达到原生应用一样的性能。

使用Flutter的现代、响应式框架,和一系列基础widget,轻松构建您的用户界面。使用功能强大且灵活的API(针对2D、动画、手势、效果等)解决艰难的UI挑战。

class CounterState extends State {
  int counter = 0;

  void increment() {
    // 告诉Flutter state已经改变, Flutter会调用build(),更新显示
    setState(() {
      counter++;
    });
  }

  Widget build(BuildContext context) {
    // 当 setState 被调用时,这个方法都会重新执行.
    // Flutter 对此方法做了优化,使重新执行变的很快
    // 所以你可以重新构建任何需要更新的东西,而无需分别去修改各个widget
    return new Row(
      children: [
        new RaisedButton(
          onPressed: increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $counter'),
      ],
    );
  }
}

心动不如行,动快速入门

1.下载flutter SDK(此步骤可以省略通过android studio安装亦可)

git clone -b master https://github.com/flutter/flutter.git
./flutter/bin/flutter --version

当然也可以直接下载

https://github.com/flutter/flutter/tags

2.下载完解压配置环境变量

;G:flutterflutter_windows_v0.7.3-betaflutterbin

3.打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装:

flutter doctor
frc d7fd449d25a180b5835a2946c3fa8f03 - Flutter快速入门 五步搞定Flutter环境配置
这里写图片描述

可以看到,检查的有android sdk,android studio版本等等。对于android开发者相信这些都配置好了。

4.为android 安装Flutter环境

File -> Settings -> Plugins -> Browse Respositories -> 搜索`Flutter`
点击install 重启android studio。会自动安装dart插件。
frc ddbdf1a40816dc60921f306b288b6c61 - Flutter快速入门 五步搞定Flutter环境配置
这里写图片描述

5.创建工程

  1. 选择 File>New Flutter Project
  2. 选择 Flutter application 作为 project 类型, 然后点击 Next
  3. 输入项目名称 (如 myapp), 然后点击 Next
  4. 点击 Finish
  5. 等待Android Studio安装SDK并创建项目.(ps:首次加载过慢直接关闭AS重启即可)
frc d35524e1cd7a4a585a6cb69a549a0a75 - Flutter快速入门 五步搞定Flutter环境配置
这里写图片描述

最终运行效果

frc 4b72d77dc3d8dec69433ffb92d4e824a - Flutter快速入门 五步搞定Flutter环境配置
这里写图片描述

Flutter的学习之路才刚刚开始。。。

Flutter快速入门 五步搞定Flutter环境配置