Flutter入门并开发天气预报APP(2)——Flutter计数器Demo

本文样例都是使用的AndroidStudio，如果你使用Xcode或者vscode，代码都是一样的，只是IDE创建项目的方式以及运行按键位置不同而已。

1. 创建Flutter项目

AndroidStudio中选择File->New->New Flutter Project->Flutter Application->NEXT。接着填写你的项目名称等一系列信息后就创建成功了，我们就会看到AndroidStudio已经为我们创建好了一个Demo，接着连上你的手机或者打开你的虚拟机，按下AndroidStudio的运行键，不一会儿，你就会惊喜的发现你的手机上就有一个Flutter计数器Demo了。

2. 介绍下AndroidStudio界面

这是我的AndroidStudio界面，接下来我分三个部分介绍下AndroidStudio的大致界面。

2.1 控制区

一次介绍每一个按钮的功能。

1. 第一个是用来选择运行设备的，比方说我现在就选的是我的虚拟机，然后我按下运行后就可以将项目运行到我的虚拟机上而不会运行到连着我的电脑的手机上去；
2. 第二个是选择运行哪个Flutter module，如果你同一个项目里面有多个module，你就可以在此选择你想要运行的module；
3. 第三个灰色的选项框我也没弄懂她是干嘛的，我至今都没能选择过，一直都是灰的；
4. 绿色的三角形，大家熟知，运行键；
5. 红色的瓢虫，大家熟知，debug键；
6. 不知道干嘛的；
7. FlutterAPP的性能监视器；
8. 闪电，这个是重点，也是Flutter的一大特性，热重载键，他能做到不需要重新编译代码就能将你修改的代码的效果在你的APP上显示出来；
9. 不知道干嘛的；
10. 红色的正方形，停止运行按钮。

2.2 Run运行区

就是Flutter的信息显示区，类似于AndroidStudio的Logcat，能显示FlutterAPP运行中的一些信息。

2.3 Flutter Outline/Flutter Inspector区

用于显示当前界面的一些构建信息。

3. Flutter项目结构

我们挑一些重要的说一下：

1. .idea文件夹，AndroidStudio识别项目的必备文件夹，不用管；
2. Android文件夹，存放Flutter构建的Android项目的文件夹；
3. ios文件夹，存放Flutter构建的iOS项目的文件夹；
4. lib文件夹，存放Flutter项目和资源的文件夹；
5. pubspec.yaml文件，存放Flutter项目相关信息，如项目名称、版本、依赖等等，类似于Android项目的build.gradle文件。

4. main.dart文件

我们通过讲这个文件来给大家大致介绍下Flutter项目代码结构。

全部源代码在此

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage