[🧑💻] 学习 - Flutter 应用开发基础 14/44 讲：Flutter 环境配置、核心 Widget、Dart 基础语法
✨ Gemini 2.5 Pro 的摘要
Flutter 应用开发基础课程 DevStory - Inflearn DevStory 就算没有开发知识也没关系！初学者也能上手的 Flutter 应用开发基础 🏃♂️零基础也能学的 Flutter 应用开发基础[照片]学会应用开发后，以前只停留在想象里的个人应用服务也可以发布到全世界。事实上
- 原文: http://blog.naver.com/hyeogikarp/223882864462
- Naver 发布时间: 2025/05/30 11:30 KST
- 原文分类: 开发学习
原文
| Flutter 应用开发基础课程 | DevStory - Inflearn |
| DevStory | 就算没有开发知识也没关系！初学者也能上手的 Flutter 应用开发基础 🏃♂️零基础也能学的 Flutter 应用开发基础[照片]学会应用开发后，以前只停留在想象里的个人应用服务也可以发布到全世界。事实上，制作应用 |
www.inflearn.com
- Flutter 是什么？
-
跨平台框架：由 Google 开发，可以用同一套代码库开发 Android、iOS、Web、Desktop 应用。
-
使用 Dart 语言：用代码编写 UI。
- 核心概念：一切都是 Widget
-
UI 组成单位：通过组装 Widget 来构成画面。
-
Widget Tree：Widget 的层级结构，由父子关系组成。
-
Key？key 和 super(key: key)：在 Widget 构造函数中，Key 用于在 Widget Tree 重建时保存 Widget 的状态，并高效地进行更新。在当前阶段，知道有这样的概念就足够了。
-
BuildContext context：表示当前 Widget 在 Widget Tree 中的位置，是一个能访问上层 Widget 数据或主题的重要对象。它会在 Navigator.pop(context) 等各种地方使用。
-
主要 Widget 分类：
-
StatelessWidget：没有状态的静态 Widget。
-
StatefulWidget：会根据状态变化重新绘制的动态 Widget。（代码示例省略）
-
StatefulWidget：会根据状态变化重新绘制的动态 Widget。（代码示例省略）
- 基本应用结构与主要 Widget
-
main() 函数 & runApp() & MaterialApp & Scaffold：
-
MaterialApp 的 home：指定应用的第一个画面。（例：home: HomePage()）
-
MaterialApp 的 home：指定应用的第一个画面。（例：home: HomePage()）
-
AppBar 详细属性：
-
布局 Widget：
-
Column & Row：
-
Padding：在子 Widget 周围添加留白。
-
Padding：在子 Widget 周围添加留白。
-
Container：可以进行多种样式设置（大小、颜色、留白、边框等）的矩形 Widget。
-
Container：可以进行多种样式设置（大小、颜色、留白、边框等）的矩形 Widget。
-
Expanded：让 Row 或 Column 的子 Widget 扩展并填满剩余空间。
-
Expanded：让 Row 或 Column 的子 Widget 扩展并填满剩余空间。
-
SingleChildScrollView：当子 Widget 的内容超出画面时，使其可以滚动。
-
SingleChildScrollView：当子 Widget 的内容超出画面时，使其可以滚动。
-
ListView.builder：创建能够高效显示大量项目的可滚动列表。只生成画面上可见的项目。
-
ListView.builder：创建能够高效显示大量项目的可滚动列表。只生成画面上可见的项目。
-
Stack：可以将 Widget 重叠摆放（Z 轴）。
-
Stack：可以将 Widget 重叠摆放（Z 轴）。
-
AspectRatio：固定子 Widget 的宽高比例。
-
AspectRatio：固定子 Widget 的宽高比例。
-
double.infinity：用于 Container 等的 width 或 height 属性，使其填满父 Widget 允许的最大尺寸。
-
double.infinity：用于 Container 等的 width 或 height 属性，使其填满父 Widget 允许的最大尺寸。
-
SizedBox：用于创建特定大小的空白空间，或明确指定子 Widget 的大小。
-
SizedBox：用于创建特定大小的空白空间，或明确指定子 Widget 的大小。
-
基本 UI Widget：
-
Text & TextStyle：显示文本并指定样式。
-
Image.network：从网络 URL 加载并显示图片。
-
Image.network：从网络 URL 加载并显示图片。
-
fit: BoxFit.cover：让图片在保持比例的同时填满指定空间。（如果图片比空间大，可能会被裁切）Icon：显示 Material Design 图标。
-
fit: BoxFit.cover：让图片在保持比例的同时填满指定空间。（如果图片比空间大，可能会被裁切）
-
fit: BoxFit.cover：让图片在保持比例的同时填满指定空间。（如果图片比空间大，可能会被裁切）
-
Icon：显示 Material Design 图标。
-
TextField & InputDecoration 详细：接收用户输入的文本。
-
TextField & InputDecoration 详细：接收用户输入的文本。
-
ElevatedButton, TextButton, IconButton：各种形态的按钮 Widget。
-
ElevatedButton, TextButton, IconButton：各种形态的按钮 Widget。
-
Card：创建 Material Design 卡片形态的 UI。带有一点阴影和圆角。
-
Card：创建 Material Design 卡片形态的 UI。带有一点阴影和圆角。
-
Divider：创建视觉分割线。
-
Divider：创建视觉分割线。
-
CircleAvatar：主要用于显示用户头像等圆形图片。
-
CircleAvatar：主要用于显示用户头像等圆形图片。
-
Colors.black.withOpacity(0.5)：为颜色应用透明度。0.0（完全透明）~ 1.0（完全不透明）。
-
Colors.black.withOpacity(0.5)：为颜色应用透明度。0.0（完全透明）~ 1.0（完全不透明）。
-
Drawer 及相关 Widget：
-
Drawer：指定在 Scaffold 的 drawer 属性中，是从画面一侧滑出的面板。
-
DrawerHeader：用于装饰 Drawer 顶部区域的 Widget。
-
ListTile：常用于构成 Drawer 内的各个项目。拥有 leading、title、trailing、onTap 等属性。
-
ListTile：常用于构成 Drawer 内的各个项目。拥有 leading、title、trailing、onTap 等属性。
-
PageView：可以左右滚动查看多个页面（画面）的 Widget。（例：活动 Banner）
- 导航基础
- Navigator.pop(context)：用于从栈中移除当前画面（Route）并返回上一画面。关闭 Drawer 或对话框时很有用。
- 处理数据（简单示例）
- List<Map<String, dynamic»：在 ListView.builder 等地方使用的数据，通常会用 Dart 的 List 和 Map 来构成。每个 Map 包含一个项目的信息，并通过 String 键访问值。
- 项目结构与开发环境
-
lib 文件夹：主要编写 Dart 代码的地方。main.dart 是默认入口文件。
-
pubspec.yaml 文件：用于设置项目元数据、依赖（库/包）管理、SDK 版本等的文件。
-
VSCode：作为主要开发工具使用。
-
Command Palette (Ctrl+Shift+P / Cmd+Shift+P)：执行 Flutter: New Project、Flutter: Launch Emulator 等各种 Flutter 命令。
-
有用的快捷键：自动补全（Ctrl+Space/Option+Esc）、重构（Ctrl+Shift+R）、查看参数（Ctrl+Option）等快捷键一定要熟悉！（为了提升生产力）
-
之后打算围绕 VSCode 快捷键写很多简单的文章。
-
ex) 在 VSCode 中开启 Presentation Mode 的方法
- Emulator：虚拟移动设备，用于在没有真实设备的情况下测试应用。
-
Hot Reload：在大多保留应用状态的同时，快速把代码变更反映到画面上。（闪电形图标）
-
Hot Restart：初始化应用状态并重新启动应用。（圆形图标）
-
analysis_options.yaml：设置 Dart 代码分析规则的文件。（例：启用/禁用特定 lint 规则）
-
例如，如果想使用 print 函数向 Debug Console 输出文本，它会大吵大闹说 production 中不能用。
- 那个到 production 时再自行去掉就行，所以试着从 lint 规则中移除 ‘avoid_print’ 吧。解决方法 1. 在相应 dart 文件顶部编写 ignore_for_file 注释。
-
那个到 production 时再自行去掉就行，所以试着从 lint 规则中移除 ‘avoid_print’ 吧。
-
解决方法 1. 在相应 dart 文件顶部编写 ignore_for_file 注释。
-
解决方法 2. 在项目根目录的 analysis_options.yaml 中进行忽略处理。
-
解决方法 2. 在项目根目录的 analysis_options.yaml 中进行忽略处理。
-
解决方法 2. 在项目根目录的 analysis_options.yaml 中进行忽略处理。
- Flutter 学习方法
-
Widget Catalog & Widget of the week：通过 Flutter 官方文档的 Widget Catalog 和 ‘Widget of the week’ 系列学习各种 Widget。
-
利用社区：在 Flutter 相关社区（在线论坛、开放聊天等）中提问和回答，一起成长。
-
熟悉 Dart 语法：Flutter 使用 Dart 语言，因此充分理解 Dart 语法很重要。
💭 日记
虽然我已经接触过 C、C++、Java、Javascript、Python、……许多语言，也用过 Spring、Vue.js、Django、FlutterFlow 等各种框架/工具，但还是担心会不会漏掉什么基础概念，所以从 Flutter 基础课程开始听。
我本来以为这些都是已经知道的概念，想快速跳过去，结果这比想象中更说明我离开开发太久了。也许脑肌肉僵住了，脑子里没法利落地构想代码到底该怎么写。
现在已经是可以在 VSCode 里借助 Inline Chat(Gemini 2.5 Pro)、Code Recommendation(GitHub Copilot) 等 AI 帮助，快速提问、找到答案、利用自动补全高效编码的时代了，所以我期待自己能更快恢复编码脑肌肉。
路还很长！冲啊！
留下评论