OK,终于开始了苦呀西,虽然我写的是第五天,其实只用了两天

检测环境配置

不知道你们的flutter下载好了没有?

最好去vscode里下,因为会省掉很多麻烦的步骤,vscode会自动帮你把fluttersdk添加到path路径

然后执行如下命令检测

flutter --version
dart --version

flutter doctor -v

其中第三个命令你们一定会报错

最底下那个是因为网络问题(Google嘛,懂的都懂,国内不挂梯子肯定ping不通)

问题是Android,你们没有安装Android的SDK并配置到系统Path路径

这里我推荐你们挂梯子去下载一个Android Studio 然后在里面下载SDK

其中这几个必须下载,而且要全程外网,否则就会下载失败(实在不行你们去官网直接下载提供的SDK)

这些分别是构建工具和安卓手机虚拟机

by the way,这个虚拟机甚至可以刷视频狗头狗头狗头

完成后添加sdk到path路径

或者你这样在系统变量(不是Path)里添加

1 2	ANDROID_HOME=D:\AndroidStudio\sdk //改成你自己的SDK路径 ANDROID_SDK_ROOT=D:\AndroidStudio\sdk //改成你自己的SDK路径

对于这个网络问题,如果你们没有梯子的话我们可以使用flutter官方镜像源

1 2	PUB_HOSTED_URL=https://pub.flutter-io.cn FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

把这两个配置到系统变量和刚才一样,然后再检查一遍就发现网络正常了

对于安卓还有一句话需要说就是首先在D盘创建这两个文件夹GradleCache和PubCache然后配置下面的环境变量,否则日后你的
C盘会越来越大

1 2	GRADLE_USER_HOME=D:\GradleCache PUB_CACHE=D:\PubCache

然后安装Pub依赖

1	flutter pub get

至于这里面的proxy什么的是因为我挂了梯子代理,注意如果你挂了代理也会影响localhost本地服务器,

一定要在系统变量里设置NO_PROXY 来屏蔽本地服务器否则根本打不开浏览器网页或者浏览器只会显示白屏什么都没有

1	NO_PROXY=localhost,127.0.0.1,::1

还有就是用完梯子之后要把这个HTTP_PROXY和HTTPS_PROXY从系统变量中删除,否则电脑所有流量都会经过梯子,而下一次如果忘记打开梯子时就会发现电脑连不上网

现在已经已经没有问题了!

OK,环境配置完了,接下来就是创建工程了

创建Flutter工程

首先新建一个文件夹,在这个文件夹里打开终端

这里我们有很多命令

全平台创建

flutter create my_app

或者

flutter create --platforms=android,ios,web,windows,macos,linux my_app

单平台创建

我们可以先查看我们有什么设备

1	flutter devices

Android

ios的我不清楚,不过Android的需要手机打开开发者模式用USB和电脑连接,而且要在电脑上获取手机的一堆调试权限

1	flutter create --platforms=android my_app

Web

web端就是一般Chrome和Edge,flutter会创建一个空白的chrome和edge窗口(没有登录信息和插件,什么都没有),将app的环境和电脑上的浏览器隔离来避免电脑插件的影响

1	flutter create --platforms=web my_app

Windows

1	flutter create --platforms=windows my_app

空模板

1	flutter create --empty my_app

依此类推macos ios 和 linux

补平台创建

如果你原来只创建了Android但是需要Windows版本的,可以使用这个命令补创建平台后面的这个小点 “ . ” 代表代表当前项目目录

1	flutter create --platforms=windows .

或者你可以在创建之处就构建好两个平台的环境

1	flutter create --platforms=android,windows my_app

运行项目

默认设备运行

这个如果你只有Windows,就默认运行Windows,如果连接了手机,就会默认运行Android

1	flutter run

指定设备运行

但是最好指定设备运行,不容易混乱

例如

1	flutter run -d windows

1	flutter run -d android

1	flutter run -d chrome

创建本地服务器

如果你不想使用Chrome和Edge,也可以开一个本地服务器,用其他浏览器访问localhost地址就行了

1	flutter run -d web-server

全局设置

我们可以用这个列出所有flutter可用的命令

1	flutter config

当然也可以查看功能的启用与否

1	flutter config --list

然后开启和关闭功能就是

//enable开启
flutter config --enable-web  
flutter config --enable-windows-desktop

//no-enable关闭
flutter config --no-enable-web

也可以配置jdk的路径

1
2
3

flutter config --jdk-dir="D:\Java学习软件\jdk\jdk-23文件"
或者
flutter config --jdk-dir D:\Java学习软件\jdk\jdk-23文件

和android 的sdk的路径

1
2
3

flutter config --android-sdk="D:\AndroidStudio\sdk"
或者
flutter config --android-sdk D:\AndroidStudio\sdk

如果要取消配置的话使用

1 2	flutter config --android-sdk "" flutter config --jdk-dir ""

构建项目

这个就不用说了,就是打包成app

flutter build apk     
flutter build appbundle   //上架Google Play专用
flutter build web
flutter build windows   
flutter build linux

//这俩只能在macos上打包,因为需要苹果的签名
flutter build macos   
flutter build ios

例如我们构建apk

清除项目

1	flutter clean

注意,除此之外尤其是android,每次失败都要把build出来的以及gradle和pub缓存文件夹里的东西删的干干净净再重新开始,否则接下来不可能成功,疯狂报错(别问我怎么知道的……..问就是心态崩了)

OK,我们从Web平台开始

浏览器的话最好Chrome或者Edge

我们启用Chrome

然后它自动跳转到浏览器,第一次的时候刷新一下浏览器,就可以看到这个自带的计数器案例了

runAPP它的作用只有一个：

把你的 Flutter UI“挂载到屏幕上”

1
2
3

void main() {
  runApp(MyApp());
}

Flutter 的核心就是：

❗ 一切都是 Widget

包括：

页面
按钮
文本
布局（Row / Column）
App 本身

概念	runApp	Widget
类型	函数	类
作用	启动 Flutter 应用	构建 UI
调用次数	一般只一次	无限次（重建）
是否参与 UI	不直接	全部 UI 都是 Widget
是否会刷新	不会	会（build 重建）

Material库

不是到大家有没有用过Google play,你可以发现谷歌的所有软件都是统一的UI,而这个UI名称就叫做material,这里我们的flutter内置了这个库

MaterialAPP

MaterialApp = “给整个 Flutter App 套上 Android/Material 设计系统 + 路由 + 主题 + 全局配置的总控制器”

也就是说这个是应用的壳子,方便对整个应用的属性进行整体设计

常见的属性有

title: 用来展示窗口的标题内容(可以不设置)

theme:用来设置整个应用的主题

home:用来展示窗口的主题内容

import 'package:flutter/material.dart'; //导入Material包

void main() {
  runApp(
    MaterialApp(
      title: "终末地AI群聊",
      theme: ThemeData(scaffoldBackgroundColor: Colors.lightBlueAccent),
      home: Scaffold(),
    ),
  );
}

flutter第五天---创建第一个flutter项目

OK,终于开始了苦呀西,虽然我写的是第五天,其实只用了两天

检测环境配置

创建Flutter工程

全平台创建

单平台创建

Android

Web

Windows

空模板

补平台创建

运行项目

默认设备运行

指定设备运行

创建本地服务器

全局设置

构建项目

清除项目

OK,我们从Web平台开始

runAPP和Widget

Material库

MaterialAPP

评论区

flutter第五天---创建第一个flutter项目

OK,终于开始了苦呀西,虽然我写的是第五天,其实只用了两天

检测环境配置

创建Flutter工程

全平台创建

单平台创建

Android

Web

Windows

空模板

补平台创建

运行项目

默认设备运行

指定设备运行

创建本地服务器

全局设置

构建项目

清除项目

OK,我们从Web平台开始

runAPP和Widget

Material库

MaterialAPP

分享这篇文章到

评论区