Flutter学习:从搭建环境到运行

简介: Flutter学习:从搭建环境到运行

一、开发环境的搭建

本文所示内容都是在Windows系统下进行的。

1、下载 Flutter SDK

Flutter 官网https://docs.flutter.cn/release/archive?tab=windows

或者通过 git clone -b master https://github.com/flutter/flutter.git 下载

2、配置环境变量

由于在国内访问 Flutter 有时可能会受到限制,主要是配置以下三个地方

image.png

image.png image.png

3、此外还需要下载

Android Studio(里面自带了安卓SDK)

Visual Studio

4、检查是否安装完成

运行 flutter  doctor 命令,如有缺失,根据结果安装对应的东西即可

若是全局配置了 flutter,则任意终端运行皆有效果。

image.png

至此,环境安装完成,接下来赶紧试试能不能行。

5、常用的flutter命令

(1)、flutter --help 查看所有 Flutter 命令

(2)、flutter --version 查看 Flutter 版本

(3)、flutter devices 查看当前可用的设备

(4)、flutter create 创建一个新的 flutter 应用

(5)、flutter run 启动程序

二、创建并运行 Flutter 应用

1、打开vscode

安装 Flutterdart 插件,这样后续敲代码便有了一些快捷提示。

image.png

2、创建一个新的应用

直接在 vscode 终端输入命令创建

image.png

3、Flutter的工程目录结构

image.png

如上图所示简单总结归纳一下使用频率较高的:

(1)、flutter_demo:项目的名称

(2)、androidAndroid 平台相关代码,后面配置 Android 的包名权限之类的都在此目录下

(3)、iOSiOS 平台相关代码,后面配置 iOS 的权限在此目录下

(4)、lib:主要代码目录,其目录下的 main.dart 便是入口文件

(5)、pubspec.yaml:项目描述文件,包含了项目的描述信息以及所需要的依赖的库

4、运行应用

在终端输入 flutter run 命令,这样就运行起来了。

image.png

可以通过r或者R实现热重载(hot reload) 实现快速效果预览。

热重载是无需重启应用程序就能实时加载修改后的代码,并且不会丢失状态,这和 webpack 的���重载类似。


相关文章
|
5天前
|
设计模式 移动开发 开发框架
如何学习 Flutter 框架?
学习 Flutter 需要耐心和持续的努力,通过系统的学习、实践、交流和不断跟进最新技术,你将逐渐掌握 Flutter 框架,并能够开发出高质量的移动应用。
|
18天前
|
存储 缓存 JavaScript
Flutter 学习之封装 WebView
【10月更文挑战第24天】通过以上的探讨,我们可以看出,在 Flutter 中封装 WebView 是非常有必要的,它可以提高代码的复用性、增强可维护性、提供统一接口。在实际应用中,我们需要根据具体的需求和场景,选择合适的封装方法和技术,以实现更好的效果。
|
1月前
|
Dart 开发者 Windows
flutter:dart的学习
本文介绍了Dart语言的下载方法及基本使用,包括在Windows系统上和VSCode中的安装步骤,并展示了如何运行Dart代码。此外,还详细说明了Dart的基础语法、构造函数、泛型以及库的使用方法。文中通过示例代码解释了闭包、运算符等概念,并介绍了Dart的新特性如非空断言操作符和延迟初始化变量。最后,提供了添加第三方库依赖的方法。
29 12
|
2月前
|
Dart 开发工具 Android开发
在 Android 系统上搭建 Flutter 环境的具体步骤是什么?
在 Android 系统上搭建 Flutter 环境的具体步骤是什么?
|
2月前
|
Linux 开发工具 Android开发
Flutter之搭建环境
Flutter之搭建环境
|
3月前
|
开发工具 iOS开发
解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app
解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app
140 2
|
3月前
|
iOS开发
解决Flutter运行IOS报错:Podfile is out of date
解决Flutter运行IOS报错:Podfile is out of date
74 1
|
4月前
|
索引
flutter-其他学习
flutter-其他学习
|
4月前
|
Dart Android开发 iOS开发
flutter 创建项目、运行项目、项目目录
flutter 创建项目、运行项目、项目目录
168 0
|
4月前
flutter的状态管理学习
flutter的状态管理学习