Flutter快学快用03 Hello Flutter：三步法掌握 Flutter，开始你的第一个应用

news/2024/5/5 16:26:11/文章来源:https://blog.csdn.net/fegus/article/details/126948338

本课时将进入 Flutter 开发实践应用。在进入实践应用之前，我先讲解最基础的环境搭建，然后会应用 Dart 语言开发第一个 App — Hello Flutter，最后再讲解一些开发过程中常用的调试方法和工具。

本课时需要一定的实践动手能力，因此在学习的时候建议你打开电脑按照里面的步骤进行学习。

第一步：环境搭建

环境构建方法在官网已提供了非常详细的指引，你可以参考官网指引《起步:安装 Flutter》。这里我先介绍一些共性的问题，然后再分别从 Mac 系统 和 Windows 系统介绍其中比较有代表性的问题。

常见问题

以下是大家很容易忽视的几个问题。

  • 环境要求，你需要注意 Flutter 的环境要求，很多人都会忽视这一点，导致在安装过程中遇到问题才会回头看环境要求，所以无论自己对配置如何了解，都需要按照官网的指引去检查每个配置项。

  • Flutter 下载，请尽量下载当前稳定版本，避免因为不稳定版本导致的其他环境要求，导致安装不成功。

  • Android Studio 工具安装，Flutter 的配置运行需要依赖 Android Studio 来完成，因此在安装之前可以先准备好 Android Studio 的安装配置，并且需要了解其中关于 Flutter 插件和 Dart 插件的安装，这些在 Flutter 官网有详细的解释说明。

  • Anroid Studio 出现 unable to access android sdk add-on list，出现这个问题，可以修改 Android Studio 安装目录 bin 下的 idea.properties 文件，在文件最后一行增加如下配置。

disable.android.first.run = true

  • Android Studio 网络代理，如果你的网络有代理，也需要进行配置，如果没有正确配置，将导致 Andorid Studio 提示 flutter pub upgrade 无法正常更新。

  • Flutter Doctor 核心点检查，需要认真检查其中的每一项，对于其中的问题项，Doctor 一般会提供具体的解决方案。

  • 点击 Finish 长久未响应（或者执行 flutter pub upgrade 未响应），这种情况会出现“This is taking an unexpectedly long time”提示，如果出现这个提示，很大可能是你的镜像配置没有按要求配置。你可以参考以下这段配置，第一个是 Flutter 的命令行工具，第二个则是 Dart 的命令行工具，后面两个镜像配置很关键。

PATH=$PATH:/Users/用户名/Downloads/flutter-main/bin
PATH=$PATH:/Users/用户名/Downloads/flutter-main/bin/cache/dart-sdk/bin
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

  • Flutter SDK path not given，如果在创建 Flutter 项目时候提示“ Flutter SDK path not given“，则点击 Flutter SDK path 路径，然后选择我们前面安装的 Flutter SDK 路径即可。

Mac 系统上注意的点

Mac 上的安装，我这里主要说明 Xcode 和 Mac 下的环境变量配置。

  • Xcode 要升级到指定版本以上，由于 Flutter 需要应用 iOS 模拟器，因此对 Xcode 版本有一定要求。

  • Mac 下设置环境变量，其中涉及一些环境变量的配置，虽然网上有很多方法，官网也有提供，但我推荐大家使用如下方法，永久设置。

sudo vim ~/.bash_profile

配置添加 Flutter 的安装路径，一般情况下会安装在你解压后运行的路径下。例如，下面我自己安装后的路径，安装完成后确定具体路径，然后在 bash_profile 文件中增加这行配置即可。

PATH=$PATH:/Users/用户名/Downloads/flutter-main/bin

最后再运行加载，并运行测试。

source ~/.bash_profile
flutter -h

Windows 系统上注意的点

Widows 系统安装需注意以下几点。

  • 环境变量的设置，如果在 cmd 下没有 export 命令，前往系统属性下 -> 环境变量，然后新建，按照变量名为 PUB_HOSTED_URL ，变量值为 https://pub.flutter-io.cn ，以及变量名为 FLUTTER_STORAGE_BASE_URL ，变量值为 https://storage.flutter-io.cn 进行配置，对应到官方文档如下配置。

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

  • 配置 Flutter 运行环境，下载完成 Flutter SDK ，并放到指定的 C:\src\ 下，然后再次配置环境变量，需要在环境变量名为 PATH 的字段后面增加分号分割，并在分号后增加如下路径。

C:\src\flutter\bin

  • 如果出现安装 Android SDK 时无法勾选 SDK ，需要重新卸载安装。这里需注意，在卸载时需勾选删除当前用户本地 Android Studio 配置，然后重新安装时，选择非 Program Files 目录。

第二步：创建项目运行

上面的配置安装完成后，我们就开始创建 Flutter 项目，这里我介绍的是 Android Studio IDE 的过程。

  1. 选择新建一个 Start a new Flutter Project ，然后选择 Flutter Application ，如图 1。

image
图 1 New Flutter Project

  1. 然后依次填写相应的 Project name 、Flutter SDK Path（如果配置好了会默认填写上，如果没有可以去重新选择）、Project location （具体的项目保存地址）、Descrition ，填写完成后，点击下一步，然后点击 finish 即可。

  2. 如果卡在 finish 这个环节，请强制退出，然后再重新打开，检查配置。具体解决办法可参考共性问题中的“点击 finish 长久未响应”问题。

  3. 创建完成后，会看到如图 2 的项目目录结构。

image
图 2 Flutter 项目目录结构

  1. 成功创建后，我们选择一个模拟器，然后在运行入口文件选择 main.dart ，最后点击右侧启动按钮进行编译运行。如果下拉没有模拟器，Android Studio 会提供指引前往配置。

image
图 3 运行启动说明

  1. 运行成功后，将会打开 iPhone 11 模拟器，然后启动我们的应用，如图 3。

image
图 4 iPhone 11 模拟器

以上就成功配置了 Flutter 运行环境和开发工具。

第三步：实现 Hello Flutter APP

在实现一些编程之前，我先详细介绍工程目录中每个目录的作用，其次介绍如何进行修改代码，实现界面显示 Hello Flutter，最后再介绍三个常见的调试方法。

目录说明

上述图 2 中已有相关工程目录的截图，我现在分别介绍下每个目录的作用。

image
图 2 Flutter 项目目录结构

  • .idea

这个和 Flutter 无关，这里面主要是保留代码的修改历史。

  • android

这个目录主要是和 Android 原生平台交互的工程代码，其目录结构和原生的 Android 项目基本一致，但是一些配置和代码结构是不同的。

  • ios

这个目录主要也是和 iOS 原生平台交互的代码。

  • lib

这个目录下的文件为 Flutter 项目核心代码，其中包含了一个 main.dart 入口文件。

  • test

这个目录下的文件存放 Flutter 项目相关的测试文件。

  • pubspec.yaml

该文件为 Flutter 项目配置文件，包括了项目名、项目描述、版本、运行环境以及开发和正式环境的第三方库，该文件与我们熟悉的 package.json 作用是类似的。

  • pubspec.lock

这是自动生成的文件，里面指明了 pubspec.yaml 等依赖包和项目依赖库的具体版本号，该文件的功能和我们常见的 package.lock.json 作用类似。

  • .metadata

这是自动生成的文件，里面记录了项目的属性信息。用于切换分支、升级 SDK 使用。

  • .packages

这里面放置了项目依赖的库，对应在本机电脑上的绝对路径，为自动生成文件。如果项目出错或者无法找到某个库，可以把这个文件删除，重新自动配置即可。

.gitignore、README.md 与前端项目中的文件作用是一致的，这里就不详加说明。

在开发过程中我们只需要关注三个核心部分，代码开发放在 lib 下，test 存放我们的测试文件，项目配置文件放在 pubspec.yaml 下。

Hello Flutter

分析清楚文件目录后，在 lib 下修改 main.dart ，在该模块中打印 Hello Flutter 实现第一个 Flutter 应用开发。

  1. 打开 main.dart ，将文件中 MaterialApp 下的 title 名字修改为 “Two You” ，将 home 下的 title 修改为 “Two You”，相关代码如下所示。

class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Two You', // app 的title信息 primarySwatch: Colors.blue, // 页面的主题颜色),home: MyHomePage(title: 'Two You'), // 当前页面的 title 信息);}
}

  1. 将 main.dart 中 Scaffold 下的 body 下的 children 下的第一个 Text 内容修改为 “Hello Flutter”，并去掉下面一个 Text，如下图 5。

image
图 5 修改 main.dart 文件的代码指引

修改完成后，保存文件，然后按照本课时中的”第二步：创建项目运行“运行本程序即可（如果已经运行过，保存文件模拟器会热加载），你将看到如下的结果，如图 6 所示。

image
图 6 Hello Flutter 运行结果

上面的代码是基于最开始的 main.dart 进行，如果觉得修改原文件比较麻烦，我们可以简化为如下的代码：

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Two You', // app 的title信息 theme: ThemeData(primarySwatch: Colors.blue, // 页面的主题颜色),home: Scaffold(appBar: AppBar(title: Text('Two You'), // 当前页面的 title 信息),body:  Center(child: Text('Hello Flutter'), // 当前页面的显示的文本信息)));}
}

调试方法

代码运行调试在各种语言中都是比较基本的知识点，在 Flutter 中也应该掌握，这里我只介绍 Flutter 不同于其他语言的调试方法，包含以下几类：

  • 断点调试

这个知识点和大家熟悉的 Chrome 的断点调试基本一致，核心是在断点处查看当前各个数据的状态情况，但是需要使用 debug 模式运行。

  • debugger 调试

在代码中增加一个断点语法，可以通过条件式的判断来进行断点，同样需要使用 debug 模式运行。

  • 界面调试

为了能够掌握具体的布局问题，在 Web 端，我们可以通过 Chrome 工具进行分析。虽然在 Flutter 中是没有 Chrome 工具，但是 Flutter 提供了可视化的界面调试方法。

上面提到的三点，其实在 Flutter 中提供了一个非常不错的工具。如果你是在 Android Studio 中的话，你可以直接点击下图 7 的按钮，将为你下载相应的组件，然后打开图 8 的界面调试框。如果你使用的是非 Android Studio ，可以使用命令行的方式，参考官网方式，首先安装 devtools 工具。

pub global activate devtools

安装完成后，运行以下命令启动运行。

pub global run devtools

image
图 7 Flutter 调试工具按钮指引

image
图 8 Dart DevTools 工具

该套工具的详细介绍可以参考开发者工具。

总结

本课时介绍了如何三步开启第一个应用程序 Hello Flutter，包括环境搭建、创建项目以及运行、修改示例代码。学完本课时，你需要掌握环境搭建的方法以及如何创建运行项目。

点击此链接查看本课时源码

精选评论

*磊：

Running Gradle task ‘assembleDebug’…FAILURE: Build failed with an exception.* What went wrong:Could not receive a message from the daemon.* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.* Get more help at https://help.gradle.orgException: Gradle task assembleDebug failed with exit code 1老师，我卡在这儿了

    讲师回复：

    flutter doctor -v 看下配置信息，如果配置正常，然后运行 flutter clean ，运行完成后再运行看看。

**铭：

遇到问题不要慌，最终还是成功了，却不确信因为哪个环节。没设置镜像，没关防火墙，没升级Gradle。

    编辑回复：

    为你点赞

**吟：

用Android Studio开发，如何配置的iphone 11模拟器，能说下安装过程吗

    讲师回复：

    你先在命令行运行 flutter doctor，会检查 xcode版本信息，如果没有问题。然后你再运行下这个链接下的“配置 iOS 运行环境部分”https://flutter.cn/docs/get-started/install/macos

**8082：

接上条 at org.gradle.wrapper.Install$1.call(Install.java:48) at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAccessManager.java:65) at org.gradle.wrapper.Install.createDist(Install.java:48) at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:128) at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61)Running Gradle task ‘assembleDebug’…Running Gradle task ‘assembleDebug’… Done 3.9sException: Gradle task assembleDebug failed with exit code 1看样子是jdk和gradle的锅，但却不知道怎么改，请教老师！

    讲师回复：

    你这样，打开项目目录下的 android/gradle/wrapper/graddle-wrapper.properties文件，然后看下里面的distributionUrl，先看下是否为https的，如果不是修改下。如果是你在命令中 curl 一下，如果也 curl 不通，有可能是你代理的问题。

**泽：

不是应该配置flutter的bin目录吗 配置安装路径是不是 把dartsdk也放path了

    讲师回复：

    对的哈，都是设置bin目录

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_10765.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

关于java中的反射，我只能努力到这一步了

关于java中的反射，我只能努力到这一步了

文章目录反射是什么反射的用途反射的缺点反射的基本运用获取Class 类对象类相关的反射获取包名获取supperClass获取Public成员类获取声明的类获取所有Public构造方法获取泛型参数获取实现的接口获取所有Public方法获取所有Public字段获取所有注释获取权限修饰符字段相关反射获取…
阅读更多...
基于注解实现缓存的框架 -- SpringCache

基于注解实现缓存的框架 -- SpringCache

目录 1、介绍 2、注解 3、 入门案例 3.1 环境准备 3.2 CachePut注解 3.3 CacheEvict注解 3.4 Cacheable注解 3.4.1 测试 3.4.2 缓存非null值 4 、集成Redis 1、介绍 Spring Cache是一个框架，实现了基于注解的缓存功能，只需要简单地加一个注解…
阅读更多...
Java开发学习---Maven私服（二）本地仓库访问私服配置与私服资源上传下载

Java开发学习---Maven私服（二）本地仓库访问私服配置与私服资源上传下载

一、本地仓库访问私服配置 我们通过IDEA将开发的模块上传到私服，中间是要经过本地Maven的 本地Maven需要知道私服的访问地址以及私服访问的用户名和密码 私服中的仓库很多，Maven最终要把资源上传到哪个仓库? Maven下载的时候，又需要携带用…
阅读更多...
花了 3000 美元，我在 SaaStr 大会学到了什么？——码农驱动的 SaaS 增长之路

花了 3000 美元，我在 SaaStr 大会学到了什么？——码农驱动的 SaaS 增长之路

Michael Yuan，WasmEdge Runtime 创始人SaaStr 是 SaaS 领域最具影响力的大会之一。 历经疫情阴霾，SaaStr 盛会2022年再次归来。尽管 SaaS 估值如过山车一般疯涨又跌落，但即使在当下所谓的萧条中，SaaS 公司和产品的收入也在以前所未…
阅读更多...
点成分享 | 带你了解移液器的原理及其分类

点成分享 | 带你了解移液器的原理及其分类

移液器，全称叫微量移液器，也叫移液枪、取样枪，是实验室定量移取微量液体体积的精密仪器，一次可量取0.1μL-10mL的液体，可实现精准的液体配比转移，多用于环境检测、医学实验室、生物技术实验室、食品检测实验…
阅读更多...
一次明白 JDBC，ORM，JPA，SpringDataJPA 之间的关系

一次明白 JDBC，ORM，JPA，SpringDataJPA 之间的关系

java持久层框架访问数据库一般有两种方式： 以SQL为核心，封装JDBC操作，如：MyBatis以java实体类为核心，将实体类和数据库表之间映射的ORM框架，比如：Spring Data JPA和Hibernate 接下来就是详细的…
阅读更多...
青岛大学数据结构与算法——第4章

青岛大学数据结构与算法——第4章

一 概述 串数组广义表 二 串 串定义：定义、串名、串值、串长、子串/真子串、字符位置、空格串 案例：病毒感染检测 串类型定义、存储结构及其运算 定义：ADT String 操作：strAssign、strCompare、strLength、concat、其他 存储…
阅读更多...
39. 组合总和

39. 组合总和

39. 组合总和题目dfs思路一：dfs思路二：题目 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target ，找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 ，并以列表形式返回。你可以按 任意顺序 返回这…
阅读更多...
相关性分析热力图（PythonMatlab代码实现）

相关性分析热力图（PythonMatlab代码实现）

目录 1 热力图 1.1 简介 1.2 语法 2 算例1（Python代码实现） 2.1 算例 2.2 Python代码 2.3 运行结果 3 算例2（Python代码实现） 4 算例3（Python代码实现） 4.1 算例 4.2 Python代码 4.3 运行结果 5…
阅读更多...
Sovit3D智慧园区:数字孪生园区大屏一体化管理平台

Sovit3D智慧园区:数字孪生园区大屏一体化管理平台

建设背景 随着全球物联网、移动互联网、云计算、大数据等新一轮信息技术的迅速发展和深入应用，推动产业升级和发展数字经济成为重要发力点。而产业园区作为产业升级转型的重要载体，建设智慧园区的需求高速增长。智慧园区在加强信息基础设施建设的同时&a…
阅读更多...
网络编程-TCP

网络编程-TCP

软件结构分类 C/S结构 ：全称为Client/Server结构，是指客户端和服务器结构。常见程序有ＱＱ、迅雷等软件 B/S结构 ：全称为Browser/Server结构，是指浏览器和服务器结构。常见浏览器有谷歌、火狐等 网络编程三要…
阅读更多...
Unity Editor 扩展入门1

Unity Editor 扩展入门1

教程来源：https://www.youtube.com/watch?v=491TSNwXTIg&t=204s 一个点击物体修改材质颜色的简单editor扩展工具 using UnityEngine; using UnityEditor;public class ExampleWindow : EditorWindow {[MenuItem("Window/Colorizer")]public static void ShowWi…
阅读更多...
入行数字IC验证后会做些什么？需要哪些必备技能？

入行数字IC验证后会做些什么？需要哪些必备技能？

想必大家眼中的验证工程师就是整天对着电脑敲代码，这是大家对这个岗位的固定印象。其实真实情况并不是这样，那么入行数字IC验证后会做些什么？需要哪些必备技能？下面就一起来了解一下吧。 什么是IC验证工程师？ 回答这…
阅读更多...
15天深度复习JavaWeb的详细笔记(四)——HTML、CSS

15天深度复习JavaWeb的详细笔记(四)——HTML、CSS

Demo04-HTML、CSS 1，HTML 1.1 介绍 HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的，像京东，12306等网站有很多网页。HTML(HyperText Markup Language)：超文本标记语…
阅读更多...
阿里云 window下 nginx 安装https证书的配置。

阿里云 window下 nginx 安装https证书的配置。

首先我这里使用的是阿里云免费的https证书。 免费证书可以申请20个，每个的有效期为1年。 我这里使用的是nginx部署，所以下载nginx的 证书压缩包 下载下来之后解压，有两个文件一个是， 一个是xxx.pem ,另一个是xxxx.key. nginx 配…
阅读更多...
企业文件加密系统价格—公司文件加密系统多少钱？

企业文件加密系统价格—公司文件加密系统多少钱？

企业文件加密系统多少钱？怎么收费？一般是根据需要购买的台数进行收费的。 现在市面上有很多做文件加密系统的厂商，每家收费标准都不一样，在百度搜索文件加密系统的价格，就会发现价格有几百到1000/台的不等。企业文件加…
阅读更多...
详细讲解FuzzBench如何添加新的Fuzzer

详细讲解FuzzBench如何添加新的Fuzzer

最近几天一直在弄FuzzBench添加新的fuzzer，在添加过程中遇到各种问题，在此做详细记录。 拉取fuzzbench到本地 这一部分可以直接参考此链接FuzzBench预备条件 1.拉取代码到本地 git clone https://github.com/google/fuzzbench cd fuzzbench git submo…
阅读更多...
我上线了一个炫酷的项目实战教程网站，主流技术一网打尽~

我上线了一个炫酷的项目实战教程网站，主流技术一网打尽~

之前经常遇到小伙伴问我，之前写的某篇技术文章在哪里。又或者是拿着很早以前的部署文档问我，按这个文章怎么部署不起来。其实他们如果上过我的实战教程网站的话，估计就不会有这些问题了，我的原创文章基本都会同步上去。今天和大家…
阅读更多...
孙宇晨：区块链行业势必迎来光明的未来

孙宇晨：区块链行业势必迎来光明的未来

近日，波场TRON创始人孙宇晨受邀在米尔肯研究院（Milken Institute）官方网站上发表了题为《区块链行业势必迎来光明的未来》的署名文章。孙宇晨在文章中表示，作为一种新兴的颠覆性技术，加密行业的发展之路并非一帆风顺。…
阅读更多...
Fat Tree 分析

Fat Tree 分析

本文是源于USTC Advance Computer Network 的课程内容做的总结 论文来源：A scalable, commodity data center network architecture 本文将分析Fat Tree的 拓扑结构、编址方案和路由算法三个方面。 拓扑结构 该文章中从传统数据中心通信的问题提出了FatTree的拓扑…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业