Flutter學習總結(一):Flutter介紹,環境安裝和解決flutter版本衝突

一.認識Flutter

Flutter是谷歌的移動端UI框架,可以快速在IOS和Android平臺上構建高質量的原生用戶界面.

總結有三個重點:

1.跨平臺

比如Linux,Android,IOS,甚至可以跑在MacOS和Windows上.

2.原生用戶界面

它是原生的,讓我們體驗更好,性能更好.(Flutter採用GPU渲染技術,可以達到120fps)

3.開源免費

只要學會使用,這些都是免費的.

二.Flutter生態

1.Flutter插件github地址

awesome-flutter

三.環境安裝

JAVA環境安裝

https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

flutter安裝:

https://flutter.dev/docs/development/tools/sdk/releases#windows

配置環境變量:作用可以在cmd輸入命令直接到對應文件夾裏執行.

檢查是否成功:

Android Studio的安裝:(需要翻牆連接外網)
Android Studio詳細安裝教程:https://www.cnblogs.com/xiadewang/p/7820377.html

https://developer.android.com/

在Android Studio裏安裝Flutter插件.(注意等它進度條安裝好了之後再點ok)
在終端安裝證書:然後會提示你選Y/N，不要猶豫，一律選擇Y，就可以把證書安裝好

flutter doctor --android-licenses

安裝虛擬機:
點擊Android Studio中的上方菜單tool -AVD Manager選項完成安裝.

最終安裝完後效果:(哇,整個過程耗費三個多鍾,終於好啦)

假設遇到如下錯誤,建議項目中使用淘寶源方法:

Launching lib/main.dart on Android SDK built for x86 in debug mode...
Initializing gradle...
Resolving dependencies...
* Error running Gradle:
ProcessException: Process "/Users/rabbit/develop/android/flutter_app/android/gradlew" exited abnormally:
Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/rabbit/develop/android/flutter_app/android/app/build.gradle' line: 25

解決方法:修改掉項目下的android目錄下的build.gradle文件，把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' }

同時,自己的電腦build.gradle文件也要改
D:\Flutter\flutter\packages\flutter_tools\gradle

buildscript {
    repositories {
        //jcenter()
        // maven {
        //     url 'https://dl.google.com/dl/android/maven2'
        // }
        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.1.2'
    }
}

最後VScode裏安裝Flutter實現vscode來編碼,用bat文件運行虛擬機
bat文件命令:

C:\Users\91583\AppData\Local\Android\Sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_5X_API_28

注意大坑:上面的avd名空格必須要換成下劃線,否則會出現閃屏.

附第一個hello world代碼

//1.引入Flutter ui庫(dart結尾必須要分號 )
import 'package:flutter/material.dart';

void main()=>runApp(MyApp());
// void main(){
//   runApp(MyApp());
// }

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:"welcome to flutter",
      home:Scaffold(
        appBar:AppBar(
          title:Text("welcome to flutter2")

        ),

        body:Center(
          child:Text("hello gengzhong")
        ),

      ),
    );
  }
}

效果:

按鍵小技巧:終端運行時按p可以查看網格,按q(鼠標要移動到終端)退出,按o切換模式安卓和ios模式,按r熱更新.

解決版本衝突的技巧

比如報如下錯誤:

fluro>=0.0.2 which requires SDK version >=1.23.0 <=2.0.0, version solving failed. pub get failed

解決辦法:
去相關的flutter插件官網,我的案例是fluro插件,將插件fork到自己github裏,記住它的commit值(一連串的字符)


最後重新打開項目或者運行flutter packages get 即可.

運行時錯誤解決辦法