Flutter系列（四）——HelloWorld


> **想学Flutter，就请关注这个专栏**

>

[Flutter系列（一）——详细介绍](https://cloud.tencent.com/developer/article/1589267)

>

[Flutter系列（二）——与React Native进行对比](https://cloud.tencent.com/developer/article/1589274)

>

[Flutter系列（三）——环境搭建（Windows）](https://cloud.tencent.com/developer/article/1590502)

文档归档：

[https://github.com/yang0range/flutterfile](https://github.com/yang0range/flutterfile)

创建的第一个Demo

上一篇文章，详细的介绍了Flutter的环境搭建，搭建完成之后，自然迫不及待看看如何创建我们的第一个Demo。

打开Android Studio

image.png

image.png

可以看到，可以看见有四个选项。

那么这四个选项有什么区别呢？

Flutter Application Flutter标准引用程序

Flutter Plugin Flutter封装的Native工程的基础插件

Flutter Package 纯Dart库工程

Flutter Modue 作为已有工程的一个Module

这里，我们需要创建一个Flutter Application项目。

工程目录结构

这里，我们首先可以看到三个比较重要的目录，分别是android，ios还有lib。

android 顾名思义，就是写Android平台相关代码的地方。

ios 和上面类似，这就就是写ios平台相关代码的地方。

lib 这里才是我们真正写flutter相关代码的地方。

这里还有一个十分重要的文件，

pubspec.yaml 这个文件是我们flutter的配置文件，比如三方的依赖都在这里，最重要的是这里还要写一些资源文件，比如图片等等，后面我们会详细介绍。

从上面目录结构大致可以理解为，整理的flutter的工程结构为。

运行官方Demo

先把官方Demo运行起来。

运行不起来

我们第一次运行官方Demo的时候，可能会有运行不来，一直卡在 Running Gradle task 'assembleDebug'... 的情况，这里是因为Gradle的Maven仓库在国外，因为众所周知的问题，无法加载。

解决办法

这里，我们就可以使用阿里云的镜像地址，来解决这个问题。 打开如下目录，修改的地方。

也可以直接复制如下代码。

buildscript {  
  ext.kotlin\_version = '1.3.50'  
  repositories {  
  // 这里做了修改，使用国内阿里的代理  
  // google()  
 // jcenter()  maven { url 'https://maven.aliyun.com/repository/google' }  
  maven { url 'https://maven.aliyun.com/repository/jcenter' }  
  maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }  
 }  
  dependencies {  
  classpath 'com.android.tools.build:gradle:3.5.0'  
  classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin\_version"  
  }  
}  
  
allprojects {  
  repositories {  
  //修改的地方  
  //google()  
 //jcenter()  maven { url 'https://maven.aliyun.com/repository/google' }  
  maven { url 'https://maven.aliyun.com/repository/jcenter' }  
  maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }  
 }}

接着打开flutter.gradle文件，路径在 ..\fluttersdk\flutter\packages\flutter_tools\gradle下，修改内容

buildscript {
    repositories {
        // 这里做了修改，使用国内阿里的代理
        // google()
        // jcenter()
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.0'
    }
}

再重新运行，就成功了！

官方Demo结构

打开main.dart文件，就是运动Demo的代码了。

根据代码，我们可以画出这个Demo的结构如下图。

官方Demo中几个重要的内容

下面我们着重依次介绍一下。

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

入口函数，这里用的是Dart语法当中的箭头函数，这里和Kotlin的用法十分相像。

我们可以看到这里的MyApp()继承的是StatelessWidget而StatelessWidget继承的是Widget

可以说在flutter当中，一切皆为widget

这里的 runApp起到了一个全局更新的作用，一般flutter启动时调用后不会再调用

MyApp

这里的Myapp返回的是一个MaterialApp相信了解Android的小伙伴对这个不会陌生，这个就是让这个Flutter保持一个MMaterial的UI风格。

当然，也有IOS的风格，这里我们可以使用CupertinoApp。

StatelessWidget

无中间状态变化的widget，初始状态设置以后就不可再变化， 用于不需要维护组件状态的场景， createElement()创建StatelessElement对象，一个StatelessWidget对应一个StatelessElement。

可以看到MyApp就是继承自StatelessWidget。

StatefulWidget

存在中间状态变化的widget，createElement()创建StatelfulElement对象 ，createState()创建State对象(可能调用多次)，createState()创建State对象(可能调用多次)。

MyHomePage因为有点击的count++的导致UI变化，所以继承自StatefulWidget。

State

State是一个状态对象，<>里面是表示该状态是跟谁绑定的。

State有两个作用 1.在修改状态就在这个类里编写，Weidget的时候可以同步的读取。

2.当状态有所改变的时候，调用State.setState()同时去刷新Weidget。

State.setState()

将子树作StatefulWidget的一个子Widget，并创建对应的State类实例，通过调用State.setState()触发子树的刷新。

在Demo当中，可以看到_MyHomePageState就是继承自State并且通过State.setState()这个方法局部刷新UI。

最后

以上就是关于整个官方Demo的一个较为详细的介绍，也是我们接触的第一个Flutter项目，接下来我们就了解一下什么是Dart语言，看看Dart语言有哪些特点，为什么Flutter要使用Dart语言。

Flutter已经是Top20的软件库，通过接下来的一系列的文章，希望我和大家一起来学习Flutter，一起进步，一起有所收获，掌握未来技术主流的主动权！

有什么好的建议，意见，想法欢迎给我留言！