天天看点

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