Flutter 03: 图解第一个程序 Hello World!

简介:       无论是学习哪门语言,第一个程序都是 Hello World! 小菜最近在学习 Flutter 因此整理一下在第一个测试 Demo 中遇到的一些问题。

      无论是学习哪门语言,第一个程序都是 Hello World! 小菜最近在学习 Flutter 因此整理一下在第一个测试 Demo 中遇到的一些问题。
      参考资料:Flutter 中文网

实操图解

  1. 打开 AndroidStudio -> Start a new Flutter project 创建一个新的 Flutter 工程,如图:
Start a new Flutter project
  1. 填写项目信息,Project name 项目名称必须为小写或包含下划线小写方式,如图:
项目名称不可为大写
更换为小写
  1. 正常情况下,填写好项目名称和项目路径即可,但是小菜这里提示 Flutter SDK path not given,如图:
Flutter SDK path not given
  1. 确保 FlutterDart 插件安装成功,【Mac 环境】根据命令行可查找 Flutter 目录,终端 -> export $PATH 查看各配置项目录;【Windows 环境】相对容易可以在文件夹中直接找到 Flutter 路径,如图:
Mac 查找 Flutter 路径

Windows 查找 Flutter 路径
  1. 打开 AndroidStudio 可以直接填写在 Flutter SDK path 中,也可以在 AndroidStudio -> Setting -> Languages & Frameworks -> Flutter 中添加配置,如图:
配置 Flutter SDK path
  1. 继续进行下一步,填写公司名即包名,注意也只能是小写,这里可以选择支持 Kotlin/Swift,之后 finish,如图:
下一步
  1. 之后会进入工程创建页面,第一次创建,会是一个漫长漫长的过程,如图:
莫急,静候
  1. 手机连接电脑,运行即可,如图:
Hello World!

注意事项

问题一:Flutter 当前版本非最新版本
解决方案:终端 -> flutter upgrade 升级版本即可
升级到最新版本
问题二:"..." is not a valid Dart package name.
解决方案:工程根目录文件夹不可为大些字母
is not a valid Dart package name
问题三:找不到 New Flutter Project...
解决方案:
  1. 建议升级 AndroidStudio 至少 3.0 以上,小菜目前测试用 3.1.2;
  2. 重启 AndroidStudio;
  3. 确认 Flutter 配置环境是否正常

      Tips: 工程在新建过程中,如果不更改 Project location 默认工程根文件夹名称为项目名称,不可为大写字母;如果更改 Project location 选择路径时,最后一个文件夹名称不可为大写字母。


      学习一门技术真是不容易啊,一个最简单的 Hello world! 涉及东西还很多,需要多加用心,只有继续坚持才有可能成功!


      以下是小菜公众号,欢迎闲来吐槽~


公众号
目录
相关文章
|
8月前
|
Dart 搜索推荐
Flutter入门进阶之旅(二)Hello Flutter
好像几乎我们学习或者掌握任何一门编程语言都是Hello word开始的,本篇博文做为Flutter入门进阶的第一篇分享,我们也从最简单的Hello world开始,至于Flutter开发环境的配置,跟关于Dart语言的介绍,不是该专栏要讲解的内容,我就不详细做介绍了,读者可自行google或者百度了解一下。
79 0
|
Web App开发 Dart 前端开发
Flutter 第一个程序Hello World!
Flutter 第一个程序Hello World!
343 1
Flutter 第一个程序Hello World!
|
Android开发
【错误记录】Flutter 混合开发报错 ( java.nio.file.FileSystemException: xxx/R.jar: 另一个程序正在使用此文件,进程无法访问。 )
【错误记录】Flutter 混合开发报错 ( java.nio.file.FileSystemException: xxx/R.jar: 另一个程序正在使用此文件,进程无法访问。 )
767 0
【错误记录】Flutter 混合开发报错 ( java.nio.file.FileSystemException: xxx/R.jar: 另一个程序正在使用此文件,进程无法访问。 )
|
开发框架 Dart 前端开发
如何使用 Flutter 创建桌面应用程序【Flutter 专题 1】
桌面应用程序在具有各种 UI 元素的系统窗口内运行。如果您要制作桌面应用程序,有多种不同的框架、UI 工具包和编程语言可供选择。 有两种类型的桌面应用程序开发 API:特定于平台的和跨平台的。特定于平台的 API 仅支持一种目标操作系统。例如,Cocoa API 提供了用于为 macOS 平台开发桌面应用程序的接口。另一方面,跨平台 API 允许开发人员使用单个通用 API 为多个操作系统制作桌面应用程序。
1518 0
如何使用 Flutter 创建桌面应用程序【Flutter 专题 1】
|
Dart 容器
flutter制作具有自定义导航栏的渐进式 Web 应用程序
本文主要介绍具有自定义导航栏的渐进式 Web 应用程序 gitee github 让我们准备我们的 - “Main.dart” 我们将整个页面分成几个部分,以便于制定,我建议您这样做以获得更好的编程,让我们更详细地查看这些部分, NavigationBar()、 DashBoard()、 CalendarSpace(), 首先我们可以做导航栏部分
167 0
|
Android开发
flutter hello world
flutter hello world
447 0
flutter hello world
|
开发工具 Android开发
Flutter 04: 图解第一个程序遇到的安装依赖问题
      小菜刚开始学习 Flutter 会遇到各种意想不到的问题,今天整理一下第一次新建项目运行时报的错的处理方式。     Finished with error: Please review your Gradle project setup in the android/folder.
2117 0
|
2月前
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
25 1
|
1月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
180 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
132 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈