Flutter使用流水帳

一、額外的環境變量設置

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

這兩個環境變量國內的環境,必須要設置,windows下可以設置在用戶變量中( “控制面板>用戶帳戶>用戶帳戶>更改我的環境變量”)

macOS下,添加到$HOME/.bash_profile中,運行source $HOME/.bash_profile,使配置生效。

二、切換與升級Flutter分支

flutter channel命令,查看所有分支,

flutter channel 分支名,切換分支

flutter upgrade 升級flutter sdk

flutter packages get 獲取當前項目的依賴包

flutter packages upgrade  更新當前項目的所有依賴包

三、檢查flutter環境

1、運行 flutter doctor -v

提示

[!] Xcode - develop for iOS and macOS (Xcode 11.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.3, Build version 11C29
    ! CocoaPods 0.37.2 out of date (1.6.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade:
        sudo gem install cocoapods

2、運行 sudo gem install cocoapods

提示 

ERROR:  Could not find a valid gem 'cocoapods' (>= 0), here is why:

          Unable to download data from https://ruby.taobao.org - hostname "ruby.taobao.org" does not match the server certificate (https://ruby.taobao.org/specs.4.8.gz)

3、添加新的ruby源

gem sources -a https://gems.ruby-china.com

再次運行sudo gem install cocoapods,安裝成功

4、在運行Flutter doctor -v

[✓] Xcode - develop for iOS and macOS (Xcode 11.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.3, Build version 11C29
    • CocoaPods version 1.8.4

四、Dart語言的注意點

dart語言有很多特性,讓人喜歡上它

1、var聲明的變量,會在第一次賦值時確定類型

2、個人建議用,Object聲明對象,少用dynamic

3、整個軟件的全局常量,建議用const聲明,而不是final,因爲const是編譯時常量

4、Dart的函數也是對象,所以函數可以作爲變量或參數傳遞,這是函數式編程的最大特點。

5、只有一條語句的函數,可以用=>來簡化,類似 bool abc()=>return 1;

6、Dart函數的參數有特別的位置參數和命名參數,用好這兩種參數,會給代碼設計帶來很大的便利性,但兩者不能同時使用。

7、Dart支持異步編程,同時Dart實現了Js的ES7中的async/await,避免了代碼編寫的回調地獄的情況。

 五、Flutter路由

1、Navigator.push,Navigator.pop(context, "可以帶返回參數")

2、建議多使用命名路由表,相對整個代碼結構更清晰

  //註冊路由表
  routes:{
   "new_page":(context) => NewRoute(),
   "/":(context) => MyHomePage(title: 'Flutter Demo Home Page'), //註冊首頁路由
  } 

3、路由鉤子,有點類似攔截器,可以做登錄判斷,看是否有權限登錄某一個頁面

  onGenerateRoute:(RouteSettings settings){
      return MaterialPageRoute(builder: (context){
           String routeName = settings.name;
       // 如果訪問的路由頁需要登錄,但當前未登錄,則直接返回登錄頁路由,
       // 引導用戶登錄;其它情況則正常打開路由。
     }
   );
  }

4、flutter提供了多種方便的引入包的模式

都在配置文件pubspec.yaml中配置

第一種:從pub庫中引入

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2

  english_words: ^3.1.5

第二種:引入本地包

dependencies:
    pg1:
        path: ../lib/pg1

第三種:引入git上的包

dependencies:
  package1:
    git:
      url: git://github.com/jonahzheng/mypg.git
      path: packages/pg1

六、資源管理

app中用到的圖片、圖標、配置文件等,都可以在pubspec.yaml中配置

flutter:
  assets:
    - assets/myicon.png
    - assets/bg.png

不用分辨率的同名圖片,可以通過建立不同分辨率的子文件夾區分

類似

…/myicon.png
…/2.0x/myicon.png
…/3.0x/myicon.png

七、捕獲及上傳異常到日誌系統

對用戶客戶端的錯誤日誌,能方便的捕獲,對維護一個app至關重要

flutter實現了比較好的模式

void collectLog(String line){
    //收集日誌
}
void reportErrorAndLog(FlutterErrorDetails details){
    //上報錯誤和日誌到日誌系統
}

FlutterErrorDetails makeDetails(Object obj, StackTrace stack){
    // 構建錯誤信息
}

void main(){
  FlutterError.onError = (FlutterErrorDetails details) {
    reportErrorAndLog(details);
    print(details);
  };

  runZoned(
    () => runApp(MyApp()),
    zoneSpecification: ZoneSpecification(
      print: (Zone self, ZoneDelegate parent, Zone zone, String line) {
        collectLog(line); // 收集日誌
      },
    ),
    onError: (Object obj, StackTrace stack) {
      var details = makeDetails(obj, stack);
      reportErrorAndLog(details);
    },
  );

} 

八、vscode中運行dart,output面板的中文輸出出現亂碼

File -> References -> Settings -> Commonly Used中加入

"code-runner.runInTerminal": true

另外windows下安裝完dart sdk,建議重啓一下

九、Dart字符

三個單引號或雙引號可以定義多行字符串

String str1='''ddddd
aaaaa
bbbbb
''';

字符串拼接除了可以用加號,還可用$

String str1='aaa';
String str2='bbb';
print('$str1 $str2');
print(str1+str2);

十、Dart運算符

~/表示取整

a??=10,表示a爲空,則a的值爲10

十一、Dart數組

isEmpty,isNaN

創建數組

var aa=new List();
var bb=new Set(); //可以對集合進行去重

遍歷數組的方法

foreEach,map,where,any,every

十二、Dart函數

可選參數

int printInfo(String aa,[int bb]){

   return 1;

}

命名參數

int printInfo(String aa,{int bb}){
   return 1;
}
printInfo('123',bb:10);

箭頭函數

List aa=[1,2,3];
aa.forEach((valua)=>print(value));

匿名函數

var fun1=(int aa){
    print(aa);
}

自執行函數

((int a){
    print(a);
})(10);

十三、Dart類

命名構造函數

class Person{
    String nickname;
    int age;
    Person(this.nickname,this.age);
    Person.other(){
        print('這是命名構造函數');
    }
}

屬性和方法的修飾符

把類定義成單獨文件,在屬性或方法前加上_,即可變成私有屬性或方法。

十四、web調試無法成功

運行flutter run -d chrome

提示‘no devices found with name or id matching 'chrome'

lvzx% flutter devices
1 connected device:

iPhone 8 • A5250085-DE61-42F7-AC87-9353ED813B92 • ios •
com.apple.CoreSimulator.SimRuntime.iOS-13-3 (simulator)

查看設備確實也沒有,

flutter版本切換到master都無效,查看官方文檔發現這個功能竟然還在beta階段

https://flutter.dev/docs/get-started/web

所以只能切換到beta版。

lvzx% flutter channel beta       
Switching to flutter channel 'beta'...
git: From https://github.com/flutter/flutter
git:    14eaf8241..3191af133  master     -> origin/master
git: Switched to a new branch 'beta'
git: Branch 'beta' set up to track remote branch 'beta' from 'origin'.


lvzx% flutter upgrade
Downloading Dart SDK from Flutter engine c4229bfbbae455ad69c967be19aee3fadd6486e1...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  205M  100  205M    0     0  10.2M      0  0:00:20  0:00:20 --:--:-- 10.1M
Building flutter tool...
Upgrading Flutter from /Users/lvzx/flutter...
From https://github.com/flutter/flutter
   3191af133..4ce34f251  master     -> origin/master
Already up to date.
Flutter is already up to date on channel beta
Flutter 1.14.6 • channel beta • https://github.com/flutter/flutter.git
Framework • revision fabeb2a16f (6 weeks ago) • 2020-01-28 07:56:51 -0800
Engine • revision c4229bfbba
Tools • Dart 2.8.0 (build 2.8.0-dev.5.0 fc3af737c7)


lvzx% flutter config --enable-web 
Setting "enable-web" value to "true".

You may need to restart any open editors for them to read new settings.
lvzx% flutter devices
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure
you trust this source!
Downloading package sky_engine...                                   0.4s
Downloading flutter_patched_sdk tools...                            1.0s
Downloading flutter_patched_sdk_product tools...                    1.0s
Downloading darwin-x64 tools...                                     2.9s
Downloading darwin-x64/font-subset tools...                         0.4s
3 connected devices:

iPhone 8   • A5250085-DE61-42F7-AC87-9353ED813B92 • ios            •
com.apple.CoreSimulator.SimRuntime.iOS-13-3 (simulator)
Chrome     • chrome                               • web-javascript • Google
Chrome 80.0.3987.132
Web Server • web-server                           • web-javascript • Flutter
Tools

lvzx% flutter run -d chrome
Launching lib/main.dart on Chrome in debug mode...
Building application for the web...                                26.9s
Attempting to connect to browser instance..                        13.2s

Warning: Flutter's support for web development is not stable yet and hasn't
been thoroughly tested in production environments.
For more information see https://flutter.dev/web

🔥  To hot restart changes while running, press "r". To hot restart (and refresh
the browser), press "R".
For a more detailed help message, press "h". To quit, press "q".
Debug service listening on ws://127.0.0.1:58911/tLSd39t1OVY=

十五、which doesn't match any versions, version solving failed

lvzx% flutter pub get
Because *** depends on ### ^0.2.7 which doesn't match any versions, version solving failed.
Running "flutter pub get" in flutter...                                 
pub get failed (1; Because *** depends on ### ^0.2.7 which doesn't match any versions, version solving failed.)

有可能是鏡像點緩存的原因,還未及時同步,也有可能是牆

更改爲下面的鏡像點,更新成功

export PUB_HOSTED_URL=http://mirrors.cnnic.cn/dart-pub

export FLUTTER_STORAGE_BASE_URL=http://mirrors.cnnic.cn/flutter

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章