Flutter系列（四）——HelloWorld

時間 2020-03-06

標籤 flutter 系列 helloworld 简体版

原文原文鏈接

想學Flutter，就請關注這個專欄
Flutter系列（一）——詳細介紹
 Flutter系列（二）——與React Native進行對比
 Flutter系列（三）——環境搭建（Windows）
Flutter系列（四）——HelloWorld
文檔歸檔：
github.com/yang0range/…
android

建立的第一個Demo

上一篇文章，詳細的介紹了Flutter的環境搭建，搭建完成以後，天然火燒眉毛看看如何建立咱們的第一個Demo。ios

打開Android Studiogit

image.png

能夠看到，能夠看見有四個選項。github

那麼這四個選項有什麼區別呢？bash

Flutter Application
Flutter標準引用程序app

Flutter Plugin
Flutter封裝的Native工程的基礎插件less

Flutter Package
純Dart庫工程maven

Flutter Modue
做爲已有工程的一個Module函數

這裏，咱們須要建立一個Flutter Application項目。post

工程目錄結構

這裏，咱們首先能夠看到三個比較重要的目錄，分別是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'
    }
}
複製代碼

再從新運行，就成功了！