Flutter系列（四）——HelloWorld

想学Flutter，就请关注这个专栏
Flutter系列（一）——详细介绍
Flutter系列（二）——与React Native进行对比
Flutter系列（三）——环境搭建（Windows）
Flutter系列（四）——HelloWorld
文档归档：
github.com/yang0range/…

建立的第一个Demo

上一篇文章，详细的介绍了Flutter的环境搭建，搭建完成以后，天然火烧眉毛看看如何建立咱们的第一个Demo。

打开Android Studio

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，一块儿进步，一块儿有所收获，掌握将来技术主流的主动权！

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

欢迎关注公共号

关注公众号会有更多收获！

动动小手指点赞，收藏，关注一键三连走一波吧！