美文网首页
Flutter的第一个Hello world

Flutter的第一个Hello world

作者: 棒棒棒头痛 | 来源:发表于2021-03-08 20:12 被阅读0次

    在上一篇笔记中已经介绍了Flutter在Mac上开发环境搭建.
    接下来开始我们的第一个flutter程序。

    参考链接

    第一步:

    • 打开Android studio.
    • 点击 Create New Flutter Project
    • 选择 Flutter Application
      这里有四个选项:
      Flutter Application: 就是创建一个Flutter 应用
      Flutter Plugin: 这个一个封装iOS或者Android API的插件,这对我们后面的混合开发非常有用,留待后面我们一起探索学习
      Flutter Package: 这是用来创建我们自定义封装的Dart库的
      Flutter Module: 在原生工程中加入flutter模块
    • 点击 Next
      填写一下 工程名称,flutter SDK 路径,选择项目本地磁盘保存路径。工程描述随便写。
      \color{#0000ff}{注意}
      1. flutter官方推荐我们采用 单词 + _ 的形式来做命名,不推荐驼峰法,这个地方有别于其他编程语言。
      2. flutter SDK 路径在你第一次创建flutter工程时,可能不会默认填充,你需要手动选择。路径就是你本地下载flutter SDK存放的路径。和我们在开发环境配置中选择的解压路径一致即可。
    • 再点击 Next
      填写 Package name, 使用默认的或者你自己按照规则定义一个就好。
      在下面,如果你Android使用的是Kotlin, iOS使用swift语言开发,请选择对应的语言支持
    • 点击Finish
      done! 你的第一个flutter应用程序创建完成了。

    第二步

    稍加等待,flutter应用就会创建完成,到达开发主界面窗口。

    作为一名iOS开发工程师,平时对Android Studio接触的不多,我也是一脸好奇宝宝相🤣。
    当然你也可以选择使用 VS Code作为你的开发工具。我选择Android Studio,单纯的觉得,旁边就坐着Android开发的兄弟们,开发工具哪里不懂可以直接问😂。

    • 创建完成的工程中,默认已经添加了一个示例界面。代码位置在工程目录下,左侧 Lib文件夹下的 main.dart 文件中。这里就是我们项目的入口文件位置。以后新建开发文件,我们都是在Lib文件夹下创建添加。

    • main文件里,官方写了一个简单的记录点击+号次数的demo。我们先直接运行起来看看效果。

      首先要选择运行的模拟器,在AS中间上方的这个位置 图例0.png
      :图例0中:
    • 1的位置就是选择模拟器或者测试设备的地方。
      如果没有Android模拟器,就点击这里创建一个。flutter2.0支持web开发调试,选择谷歌浏览器也行。

    • 4的位置是程序启动的地方。点击程序开始运行。

    • 5的地方是热加载按钮,flutter的利器。
      我这里选择了一个iOS的模拟器。效果很快出来了。如图:


      图例1.png

    接下来尝试修改上面title的文字。还是main.dart文件中找到 Flutter Demo Home Page 文字,修改为:** hello world, flutter comimg** .
    然后点击 图例0中 数字5处的按钮,热加载效果是不是瞬间完成了。这点确实厉害,比起原来我们原生写UI,改一个地方要编译启动快多了。

    相关文章

      网友评论

          本文标题:Flutter的第一个Hello world

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