天天看點

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