在本节中,我们将学习如何在Android Studio中创建一个简单的Flutter应用程序,以了解Flutter应用程序的基础。要创建Flutter应用程序,请执行以下步骤:
第1步:打开Android Studio。
第2步:创建Flutter项目。选择菜单:file -> New -> New Flutter Project … ,如下图中所示:
第3步:在下一个向导中,需要选择Flutter Application。这里选择:Flutter Application->单击Next,如下图中所示:
第4步:接下来,配置应用程序详细信息,如下面的屏幕所示,然后单击Next(下一步)按钮。
Project Name:填写应用程序名称。
Flutter SDK路径:<path_to_flutter_sdk> - Flutter SDK路径
Project Location:<path_to_project_folder> - 项目位置
Descriptions:项目的描述 - Flutter hello world应用程序。
如下图所示:
第5步:在下一个向导中,需要设置公司或组织机构域名,然后单击Finish(完成)按钮。如下图中所示:
单击完成按钮后,将需要一些时间来创建项目。创建项目后,将自动生成一个功能最少的Flutter应用程序。
第6步:现在,我们来看看Flutter项目应用程序的结构及其用途。在下图中,可以看到Flutter应用程序结构的各种文件夹和组件,将在这里进行讨论。
.idea
:此文件夹位于项目结构的最顶部,其中包含Android Studio的配置。.android
:此文件夹包含一个完整的Android项目,并在为Android构建Flutter应用程序时使用。将Flutter代码编译成本机代码时,它将被注入到此Android项目中,因此结果是本机Android应用程序。例如:当您使用Android模拟器时,此Android项目用于构建Android应用,该应用将进一步部署到Android虚拟设备。
.ios
:此文件夹包含一个完整的Mac项目,在构建iOS的Flutter应用程序时使用。它类似于为Android开发应用程序时使用的android文件夹。将Flutter代码编译成本机代码时,它将被注入到此iOS项目中,因此结果是本机iOS应用程序。仅当您在macOS上工作时,才可以为iOS构建Flutter应用程序。.lib
:这是一个必不可少的文件夹,它代表库。这是一个文件夹,开发者将在其中完成99%的项目工作。在lib文件夹中,我们将找到包含Flutter应用程序代码的Dart文件。默认情况下,此文件夹包含文件main.dart
,这是Flutter应用程序的入口文件。.test
:此文件夹包含Dart代码,该代码是为Flutter应用程序编写的,以便在构建应用程序时执行自动测试。在这里对我们来说不是很重要,知道怎么回事就好。
我们也可以在Flutter应用程序中拥有一些默认文件。在99.99%的情况下,我们不会手动去修改这些文件:
.gitignore
:这是一个文本文件,包含文件,文件扩展名和文件夹的列表,告诉Git在项目中应忽略哪些文件。Git是一个版本控制文件,用于在软件开发Git期间跟踪源代码中的更改。.metadata
:这是Flutter工具自动生成的文件,用于跟踪Flutter项目的属性。该文件执行内部任务,因此您无需随时手动编辑内容。.packages
:这是Flutter SDK自动生成的文件,用于包含Flutter项目的依赖项列表。flutter_demoapp.iml
:始终根据Flutter项目的名称来命名,该名称包含项目的其他设置。该文件执行由Flutter SDK管理的内部任务,因此无需随时手动编辑内容。pubspec.yaml
:这是项目的配置文件,在处理Flutter项目期间将使用很多资源。它指示如何运行应用程序。该文件包含:- 项目常规设置,例如项目的名称,描述和版本。
- 项目依赖项。
- 项目资产/Assets(例如图片)。
pubspec.lock
:这是一个基于.yaml
文件的自动生成的文件。它包含有关所有依赖项的更多详细设置。README.md
:这是一个自动生成的文件,其中包含有关项目的信息。如果想与开发人员共享信息,我们可以编辑此文件。
第7步:打开main.dart
文件,并将代码替换为以下代码段。
第8步:让我们逐行了解上面的代码片段:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
要开始Flutter编程,需要首先导入Flutter软件包。在这里,我们已经导入了Material包。此软件包可根据Android指定的材料设计指南来创建用户界面。
第二行是Flutter应用程序的入口点,类似于其他编程语言中的main方法。它调用runApp函数并将其传递给MyApp对象。此函数的主要目的是将给定的窗口小部件附加到屏幕上。
第5至18行是用于在Flutter框架中创建UI的小部件。在这里,StatelessWidget不会维护小部件的任何状态。MyApp扩展了覆盖其构建的StatelessWidget。build方法用于创建应用程序UI的一部分。在此块中,构建方法使用MaterialApp(一个用于创建应用程序的根级UI的小部件),并包含三个属性:title
,theme
和home
。
- Title: 它是Flutter应用程序的标题。
- Theme: 这是小部件的主题。默认情况下,它将蓝色设置为应用程序的整体颜色。
- Home: 它是应用程序的内部UI,为应用程序设置了另一个小部件(MyHomePage)。
第19到35行,MyHomePage与MyApp相似,不同之处在于它将返回Scaffold Scaffold小部件,它是MaterialApp小部件之后用于创建用户界面的顶级小部件。此小部件包含两个属性appBar和body。appBar显示应用程序的标题,而body属性显示应用程序的实际内容。在这里,AppBar呈现应用程序的标题,“中心”小部件用于使子小部件居中,“文本”是最终的小部件,用于显示文本内容并显示在屏幕中央。
第9步:运行应用程序。如下图所示:
正常情况下应该会提示以下信息:
没有可用的设备连接,需要先启动一个虚拟设备,如下图示:
启动虚拟设备完成后,重新运行项目,如下图示:
问题
关于运行应用出现:Running Gradle task 'assembleDebug'...
的问题。解决办法:
打开文件:
修改 distributionUrl 为本地 gradle:
distributionUrl=file:///D:/software/gradle-6.5-all.zip