美文网首页
初识 Flutter

初识 Flutter

作者: yanlong107 | 来源:发表于2020-04-09 14:35 被阅读0次

    知道Flutter 已经很久,然而项目中一直没有机会使用,所以一直也就没有深入的了解过。
    最近还是决定要花点时间来学习了解下。

    搭建环境

    系统环境 Mac OS

    1, 去flutter官网下载其最新可用的安装包 下载SDK
    注意,Flutter的渠道版本会不停变动,请以Flutter官网为准。

    2,解压安装包到你想安装的目录,如:

    cd ~/development
    unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip
    

    3, 添加环境变量

    export PATH=`pwd`/flutter/bin:$PATH
    

    或者添加到 open ~/.bash_profile文件中

    使用IDE(Android Studio)创建Demo工程

    1, 安装Flutter和Dart插件

    • 启动Android Studio.
    • 打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & >Linux).
    • 选择 Browse repositories…, 选择 Flutter 插件并点击 install.
    • 重启Android Studio后插件生效.

    如下图:


    image.png

    2, 创建Flutter应用

    1. 选择 File>New Flutter Project
    2. 选择 Flutter application 作为 project 类型, 然后点击 Next
    3. 输入项目名称 (如 myapp), 然后点击 Next
    4. 点击 Finish
    5. 等待Android Studio安装SDK并创建项目.

    上述命令创建一个Flutter项目,项目名为myapp,其中包含一个使用Material 组件的简单演示应用程序。

    在项目目录中,应用程序的代码位于 lib/main.dart.

    如下图:


    image.png

    3, 运行Flutter应用
    和其他android工程一样,通过点击 Run图标 的方法可以运行查看效果。
    tips:
    - Flutter工程不仅仅可以在Android Studio中运行,也可以通过xcode来运行,查看ios设备上的效果
    - Flutter中修改代码保存后,无需重启app,通过热重载就可以实时加载修改后的代码

    demo在Android机器上运行的效果:


    image.png

    END!

    参考:
    Flutter 中文网

    相关文章

      网友评论

          本文标题:初识 Flutter

          本文链接:https://www.haomeiwen.com/subject/kvxhjhtx.html