溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何搭建Android Studio下Flutter環(huán)境

發(fā)布時間:2021-02-16 09:51:00 來源:億速云 閱讀:495 作者:小新 欄目:移動開發(fā)

這篇文章主要介紹如何搭建Android Studio下Flutter環(huán)境,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

一、Flutter介紹

Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。Flutter可以與現(xiàn)有的代碼一起工作。在全世界,F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用,并且Flutter是完全免費、開源的。

二、環(huán)境搭建

Flutter 的環(huán)境搭建?分省?,特別對應Android開發(fā)者??,只是在AndroidStuido上安裝
插件,并下載flutterSdk到本地,配置在環(huán)境變量即可,其實 中??的搭建Futter開發(fā)環(huán)境
已經(jīng)很貼?詳細,從平臺指引開始安裝基本都不會遇到問題。

1.下載AndroidStudio中的插件 Dart和Flutter

大家都是聰明人看圖說話,不做多余解釋!

如何搭建Android Studio下Flutter環(huán)境

2.獲取Flutter SDK

獲取Flutter SDK (點擊下載)

如何搭建Android Studio下Flutter環(huán)境

3.環(huán)境配置

網(wǎng)上流傳的大多數(shù)是Git命令配置,很裝逼很拉風,但是做人得低調(diào),所以這里我們寫了兩個配置方案:

方案A: git命令配置 (網(wǎng)上大多數(shù)教程是這樣配置):

(1)打開gitbash,輸入如下命令:

git clone -b beta https://github.com/flutter/flutter.git
export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內(nèi)用戶需要設(shè)置 
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內(nèi)用戶需要設(shè)置
export PATH=pwd/flutter/bin:$PATH

方案B:手動配置:

在用戶變量上添加如下變量

如何搭建Android Studio下Flutter環(huán)境

> 需要配置的內(nèi)容:
> ANDROID_HOME,在把你android SDK的路徑填上
//國內(nèi)用戶需要設(shè)置
PUB_HOSTED_URL:
    https://pub.flutter-io.cn 
    
FLUTTER_STORAGE_BASE_URL:
      https://storage.flutter-io.cn 
     
PATH:
  Flutter sdk路徑的bin (不明白看下圖)

如何搭建Android Studio下Flutter環(huán)境

測試是否配置成功

按win+R 直接運行 PowerShell , 然后輸入如下命令:
flutter doctor

成功效果:

如何搭建Android Studio下Flutter環(huán)境

錯誤效果:
如果出現(xiàn)以下錯誤 , 則是沒有配置好Android的環(huán)境
解決辦法: 添加環(huán)境變量ANDROID_HOME,把你android SDK的路徑填上,重啟電腦即可

如何搭建Android Studio下Flutter環(huán)境

重啟后繼續(xù)執(zhí)行 flutter doctor 如果還不成功就再執(zhí)行 flutter doctor --android-licenses ,接下來 所有的輸入 y 就可以了

如何搭建Android Studio下Flutter環(huán)境

成功后效果

如何搭建Android Studio下Flutter環(huán)境

三、創(chuàng)建項目

創(chuàng)建項目很簡單基本上和Android項目一樣
File->New->New Flutter Project
選Flutter Application ->Next
起App名字 ->Next 起包名 ->Finish
修改main.dart內(nèi)容
運行就會有Hello World了

詳細步驟(直接貼圖不解釋了)

如何搭建Android Studio下Flutter環(huán)境如何搭建Android Studio下Flutter環(huán)境
如何搭建Android Studio下Flutter環(huán)境

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return new MaterialApp(
  title: 'WelcometoFlutter',
  home: new Scaffold(
  appBar: new AppBar(
   title: new Text('WelcometoFlutter'),
  ),
  body: new Center(
   child: new Text('Hello World'),
  ),
  ),
 );
 }
}

如何搭建Android Studio下Flutter環(huán)境

四、體驗熱重載

Flutter的熱重載可幫助您快速地進行測試、構(gòu)建UI、添加功能并更快地修復錯誤。在iOS和Android模擬器或真機上可以在亞秒內(nèi)重載,并且不會丟失狀態(tài)。

步驟:

1.將字符串 HelloWorld 更改為 HelloWorldFlutter
2. 不要按“Stop按鈕; 讓您的應用繼續(xù)運行。
3.要 看您的更改 只需Ctrl+S 就可以了

你就會立即看到更新后的字符串

網(wǎng)上操作效果(懶得做動圖,大家湊合看吧?。?/p>

如何搭建Android Studio下Flutter環(huán)境

以上是“如何搭建Android Studio下Flutter環(huán)境”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI