学习Flutter:Hello Word篇

学习Flutter:Hello Word篇

Hello Word篇

文章目录

  • 学习Flutter:Hello Word篇
  • 前言
  • 一、选择开发工具
    • Flutter开发工具有:
  • 二、Visual Studio Code(vs code)开发工具Flutter配置
    • 安装
  • 三、创建Flutter项目
  • 四、运行Flutter项目
  • 五、安装模拟器
  • 六、最后显示Hello Word
  • 总结


前言

随着互联网的不断发展,开发原生APP的成本越来越高,跨平台的框架也越来越多了,而且越来越多人都开启了学习跨平台开发了,由于Flutter的跨平台性、运行的流畅性和无限接近原生APP开发,本文就介绍了Flutter基础开发。

提示:接上一篇我们搭建Flutter环境,接下来的是我们就来开发Flutter第一步,伟大的Hello Word

一、选择开发工具

什么是开发工具:简称IDE,一般是指一些被软件工程师用于为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件的特殊软件。我常用的前端有:Visual Studio Code(vs code),WebStorm,HBuilder X(这个是uniapp开发的工具,也是跨平台开发的),PyCharm(这是开发Python用的),Android studio(这是开发安卓用的)等,后端:IntelliJ IDEA (这个是用的最普遍的),好的开发工具能提高效率。不过有些大牛就是用记事本开发的

Flutter开发工具有:

  • Visual Studio Code(vs code):免费
  • IntelliJ IDEA :收费
  • Android studio:免费
  • WebStorm:收费

二、Visual Studio Code(vs code)开发工具Flutter配置

在这里选择Visual Studio Code(vs code)原因是:轻量级开发工具,打开速度快,占内存少,插件库比较全,最终要的免费

安装

1.下载链接:https://code.visualstudio.com/Download
2. 安装软件:这里就不多说了,下载后双击之后,下一步下一步就好了,安装好如图:学习Flutter:Hello Word篇_第1张图片

  1. 安装插件:如图
    学习Flutter:Hello Word篇_第2张图片

下面就是查找插件和安装:只要在输入框输入flutter,就会出现的,然后点击对应插件安装就可以了
学习Flutter:Hello Word篇_第3张图片

三、创建Flutter项目

在VScode上打开打开终端(菜单上有个终端,点击新建就可以了)或者快捷键:Ctrl+~(Tab上一个键),在终端上输入:flutter create 项目名字,即可创建完成!如图学习Flutter:Hello Word篇_第4张图片
学习Flutter:Hello Word篇_第5张图片

四、运行Flutter项目

  • 在终端中运行命令:flutter run,红框里显示的是安装的位置:模拟器,手机,谷歌浏览器,我的有多个,输入数字选择就可以了,有的只要一个就不需要选择 如图
    学习Flutter:Hello Word篇_第6张图片
  • 这是显示在模拟器上的:
    学习Flutter:Hello Word篇_第7张图片
  • 这是显示在浏览器上的:
    学习Flutter:Hello Word篇_第8张图片
  • 这是显示在手机真机上的:学习Flutter:Hello Word篇_第9张图片

五、安装模拟器

  • 打开Android studio在这里插入图片描述
    学习Flutter:Hello Word篇_第10张图片
  • 点击AVD Manager

学习Flutter:Hello Word篇_第11张图片

  • 点击红框按钮
    学习Flutter:Hello Word篇_第12张图片

  • 选择红框里,然后点击next按钮
    学习Flutter:Hello Word篇_第13张图片

  • 有出现Download的,要先下载,然后点击next按钮
    学习Flutter:Hello Word篇_第14张图片

  • 然后点finish按钮就可以了
    学习Flutter:Hello Word篇_第15张图片

  • 最后点击右边三角按钮,然后等待模拟器开机,不过时间有点久
    学习Flutter:Hello Word篇_第16张图片

学习Flutter:Hello Word篇_第17张图片

  • 这样就好了

六、最后显示Hello Word

学习Flutter:Hello Word篇_第18张图片

该处使用的url网络请求的数据。


总结

今天的hello word显示就到这里,希望能帮助到你们,如果对你们有帮助的话,给个一键三连,再次感谢

你可能感兴趣的:(Flutter,跨平台,前端,flutter,前端,android,studio,android模拟器,vscode)