Flutter新手入门·第一天完整实操手册Windows+Android Studio
Flutter新手入门·第一天完整实操手册（Windows+Android Studio，从打开软件→跑通第一个项目→看懂代码→手写第一行布局，全程超详细，适配你有HTML基础）
前置确认：你当前已装好的软件
Android Studio（带Flutter插件、安卓SDK） Flutter环境解压并配置好系统环境变量 Windows终端可以识别 flutter命令
一、第一步：环境自检（必做，排查报错根源）
flutter doctor
结果看懂方式：
前面打 ✅ 绿色对勾 = 正常 出现 ⚠️黄色感叹号、❌红色叉号 = 有问题，必须修复 常见问题：
Android license 未同意：终端执行
flutter doctor --android-licenses
一路输入 y 回车确认 2. 模拟器没装、SDK版本缺失：回到Android Studio安装对应SDK平台
没把环境检查完，后面新建项目一定会运行失败，这是新手最容易卡半天的地方
二、第二步：用Android Studio新建第一个Flutter项目（图文式步骤）
打开 Android Studio 首页点击：New Flutter Project 左侧选择：Flutter Application → 点击 Next 填写项目信息：
Project name： flutter_demo01（只能英文小写、不能中文、不能空格）Flutter SDK path：软件会自动识别你配置好的Flutter文件夹路径 Project location：自己选一个纯英文路径存放，路径全程不能出现中文（D盘新建文件夹 code_flutter用来放所有项目）
点击 Next 下一页设置：
Application name：APP安装后手机上显示的名字，可填 简易测试DemoPackage name：包名（安卓唯一标识，格式 com.xxx.demo，新手默认不用改） 勾选 Android，iOS暂时不用管，点击 Finish
等待自动加载依赖（第一次新建会慢，下载gradle、pub依赖，耐心等待右下角进度条跑完）
三、界面认识（对照HTML理解，帮你快速转换思维）
左侧项目目录重点文件（只记现在要用的）
HTML：打开index.html就是页面 Flutter：程序固定从 main.dart 启动，所有页面代码都写在lib文件夹内
四、第三步：启动安卓模拟器，运行默认项目
1. 打开模拟器
Android Studio右上角，找到手机样式图标 Device Manager 点开
已有模拟器：点击▶️启动 无模拟器：点击Create device，随便选一款手机（推荐Pixel系列），下载安卓系统镜像，完成创建
2. 选择运行设备
右上角设备下拉框，选中你打开的模拟器
3. 运行项目
点击顶部 ▶️绿色三角运行按钮 等待编译完成，模拟器会弹出APP，显示一个计数器页面（默认Flutter模板） ✅ 能正常弹出APP，代表环境、项目全部搭建成功
五、第四步：逐行拆解 main.dart 默认代码（结合HTML对照讲解，核心入门）
打开 lib/main.dart，完整初始代码如下，我一行行翻译含义，你对照理解：
// 导入Flutter核心组件库（类似HTML引入css/js文件）
import 'package:flutter/material.dart';
// 程序入口主函数，固定写法：整个APP从这里启动（相当于HTML最外层）
void main() {
runApp(const MyApp());
}
// 自定义APP根组件，对应整个网页<html>根标签
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
// MaterialApp：安卓风格APP外层包裹框架
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: const MyHomePage(title: '首页演示'),
);
}
}
// 首页页面组件，对应<body>内部页面内容
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
// 点击按钮执行的方法
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
// Scaffold：手机页面骨架，自带顶部导航栏AppBar，网页没有这个结构
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('点击按钮次数：'),
Text('$_counter'),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
child: const Icon(Icons.add),
),
);
}
}和HTML思维对照
build()方法：返回页面结构，等价于写HTML代码所有页面元素（文字、盒子、按钮）统一叫 Widget 组件，等价HTML标签 组件全部用 ()包裹嵌套，标签闭合不是</div>，而是括号成对闭合Column= HTML flex纵向排列；Row= HTML flex横向排列
六、第五步：删掉默认计数器，手写你的第一段Flutter页面（必手动敲，禁止复制）
操作：清空MyHomePage里body内容，从零写一个简单页面
把 Scaffold 里的body改成下面代码，逐行手动敲打，熟悉括号嵌套规则
body: Container(
// 整个页面背景颜色，对应div的background-color
color: Color(0xfff5f5f5),
// 内边距，等同于CSS padding
padding: EdgeInsets.all(20),
child: Column(
// 垂直方向居中
mainAxisAlignment: MainAxisAlignment.center,
// 子组件数组，页面里面放的所有内容，都写在children里
children: [
Text(
'我的第一个Flutter页面',
style: TextStyle(
// 文字大小
fontSize: 24,
// 文字加粗
fontWeight: FontWeight.bold,
// 文字颜色
color: Colors.black87,
),
),
// 间距组件，相当于margin外边距
SizedBox(height: 30),
Container(
width: double.infinity,
height: 120,
decoration: BoxDecoration(
color: Colors.white,
// 圆角
borderRadius: BorderRadius.circular(12),
),
child: Center(child: Text('卡片盒子，对应HTML的div')),
)
],
),
),写完点击运行，模拟器刷新，就能看到你自己写的页面布局。
新手最易错点（反复留意）
Dart严格区分大小写： Text正确，text直接报错所有组件前后括号 (){}[]必须成对，少一个括号页面直接爆红层级嵌套顺序不能乱，外层包裹内层，和HTML div嵌套逻辑一致
七、第一天完整学习任务清单（按顺序做完，今天就算入门落地）
上午（3小时）
终端执行 flutter doctor，修复全部异常项 ✅Android Studio新建第一个Flutter项目，等待依赖加载完成 ✅ 创建安卓模拟器，启动模拟器，运行默认Demo项目 ✅ 对照文档，看懂main.dart每层代码作用，用笔简单标注注释 ✅
下午（3～4小时）
删除默认计数器代码，手动敲入上面简易页面布局 ✅ 自行修改：文字内容、颜色、卡片宽高、圆角大小，实时看模拟器变化 ✅ 练习新增：Row横向布局，并排放两个卡片（模拟一行两列布局，对标HTML弹性布局）
额外练习代码（横向布局练习，自己敲）
Row(
children: [
Expanded(
child: Container(
height: 100,
margin: EdgeInsets.only(right: 10),
color: Colors.blue[200],
child: Center(child: Text('左侧卡片')),
),
),
Expanded(
child: Container(
height: 100,
color: Colors.orange[200],
child: Center(child: Text('右侧卡片')),
),
),
],
)晚间（1小时）
整理今天遇到的报错：括号缺失、单词大小写错误、路径中文报错，简单记录 背诵3个核心布局组件作用：
Column纵向排Row横向排Container盒子容器（div）
八、第二天预习内容（我后面可以按天给你排每日任务）
Dart基础语法：变量、List数组、函数写法（前端JS有相似之处，上手快） Flutter常用基础组件：Image图片、Icon图标、Padding边距 练习页面：仿简单首页顶部导航栏+内容列表
九、新手写规范代码的入门守则（从第一天养成习惯）
项目存放路径、项目文件名全程禁止中文、空格、特殊符号，极易编译失败 代码嵌套层级，按Tab自动缩进，层级一目了然，不要全部顶格写 不一次性复制大段AI代码，拿到代码拆分：看外层包裹→看布局→看样式，再手动仿写一遍 每次新建页面，单独创建一个dart文件，不要所有代码堆积在main.dart里
十、你接下来两种选择，我可以继续细化
我按 7天Dart学习计划 + 12天Flutter布局计划，每天给固定学习内容+练习代码+作业 你想边做小页面边学，做一个简易APP（登录页→首页→个人中心），跟着项目实操学习
你回复我一句：想要【按天系统化排课】，还是【边做小项目边学】，我给你整理下一阶段每日详细任务+配套练习代码。
-
用微信 “扫一扫”
将文章分享到朋友圈。
关注公众号:xue-jiqiao
本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！
发表评论：
最新APP开发
猜你也喜欢看这些
