Android：Flutter 专题03 图解第一个程序 Hello World

Posted 2022-04-20 学习Android的第1024天

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

参考资料：Flutter 中文网

文末有福利！！！

实操图解

1. 打开 androidStudio -> Start a new Flutter project 创建一个新的 Flutter 工程，如图：

2. 填写项目信息，Project name 项目名称必须为小写或包含下划线小写方式，如图：

3. 正常情况下，填写好项目名称和项目路径即可，但是笔者这里提示 Flutter SDK path not given，如图：

4. 确保 Flutter 和 Dart 插件安装成功，【Mac 环境】根据命令行可查找 Flutter 目录，终端 -> export $PATH 查看各配置项目录；【Windows 环境】相对容易可以在文件夹中直接找到 Flutter 路径，如图：

5. 打开 AndroidStudio 可以直接填写在 Flutter SDK path 中，也可以在 AndroidStudio -> Setting -> Languages & Frameworks -> Flutter 中添加配置，如图：

6. 继续进行下一步，填写公司名即包名，注意也只能是小写，这里可以选择支持 Kotlin/Swift，之后 finish，如图：

7. 之后会进入工程创建页面，第一次创建，会是一个漫长漫长的过程，如图：

8. 手机连接电脑，运行即可，如图：

---

注意事项

问题一：Flutter 当前版本非最新版本

解决方案：终端 -> flutter upgrade 升级版本即可

问题二："…" 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! 涉及东西还很多，需要多加用心，只有继续坚持才有可能成功！

最后

有小伙伴私信问Compose的问题，好不好用啊，现在要不要学啊？

其实答案很简单，自从谷歌2019年公布了声明式UI框架Jetpack Compose后，两年多的时间，各种大力宣传，和大量资源的倾斜，API功能都趋于稳定了。

至于好不好用，各种用过的同行都是持肯定态度的。优势大概就是这四点：

强大的工具和直观的Kotlin API
简化并加速了Android上的UI开发
可以帮助开发者用更少更直观的代码创建View
有更强大的功能，以及还能提高开发速度

这么大的优势，毋庸置疑，肯定是要学的嘛，而且越快掌握越好。别等刀架到脖子上了，才去练金钟罩。

至于怎么快速上手，可以给大家免费分享一份**《Jetpack Compose 完全开发手册》**，手把手教大家从入门到精通。

有需要的话可以点下面二维码回复JJ免费领取↓↓↓

第一章 初识 Jetpack Compose

• 为什么我们需要一个新的UI 工具？

• Jetpack Compose的着重点

  加速开发
  强大的UI工具
  直观的Kotlin API

• API 设计

• Compose API 的原则
  一切都是函数
  顶层函数（Top-level function）
  组合优于继承
  信任单一来源

• 深入了解Compose
  Core
  Foundation
  Material

• 插槽API

第二章 Jetpack Compose构建Android UI

• Android Jetpack Compose 最全上手指南
  Jetpack Compose 环境准备和Hello World
  布局
  使用Material design 设计
  Compose 布局实时预览
  ……

• 深入详解 Jetpack Compose | 优化 UI 构建
  Compose 所解决的问题
  Composable 函数剖析
  声明式 UI
  组合 vs 继承
  封装
  重组
  ……

• 深入详解 Jetpack Compose | 实现原理
  @Composable 注解意味着什么？
  执行模式
  Positional Memoization (位置记忆化)
  存储参数
  重组
  ……

第三章 Jetpack Compose 项目实战演练（附Demo）

• Jetpack Compose应用1
  开始前的准备
  创建DEMO
  遇到的问题

• Jetpack Compose应用2
• Jetpack Compose应用做一个倒计时器
  数据结构
  倒计时功能
  状态模式
  Compose 布局
  绘制时钟

• 用Jetpack Compose写一个玩安卓App
  准备工作
  引入依赖
  新建 Activity
  创建 Compose
  PlayTheme
  画页面
  底部导航栏
  管理状态
  添加页面

• 用Compose Android 写一个天气应用
  开篇
  画页面
  画背景
  画内容
  ……

• 用Compose快速打造一个“电影App”
  成品
  实现方案
  实战
  不足
  ……

由于篇幅限制，文档的详解资料太全面，细节内容太多，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！
有需要的话可以点下面二维码免费领取↓↓↓
品
实现方案
实战
不足
……

由于篇幅限制，文档的详解资料太全面，细节内容太多，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！
有需要的话可以点下面二维码回复JJ免费领取↓↓↓