四、Flutter开发-导入并升级flutter-go示例

345 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第13天,点击查看活动详情

  因Flutter升级,FlutterGo暂停维护,这里导入的项目只能切回到旧版本,这里为了适应新版本的Flutter和Dart,我们新建项目,升级flutter-go,并记录学习。

1、按照之前的说明,新建一个flutter_go的Flutter项目,修改build.gradle文件

buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
//        google()
//        jcenter()
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }
        maven { url 'http://maven.aliyun.com/nexus/content/repositories/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/repositories/google' }
        maven { url 'http://maven.aliyun.com/nexus/content/repositories/gradle-plugin' }
        maven { url 'https://storage.googleapis.com/download.flutter.io' }
        maven { url 'https://maven.fabric.io/public' }
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
//        google()
//        jcenter()
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }
        maven { url 'http://maven.aliyun.com/nexus/content/repositories/jcenter' }
        maven { url 'http://maven.aliyun.com/nexus/content/repositories/google' }
        maven { url 'http://maven.aliyun.com/nexus/content/repositories/gradle-plugin' }
        maven { url 'https://storage.googleapis.com/download.flutter.io' }
        maven { url 'https://maven.fabric.io/public' }
    }
}

rootProject.buildDir = '../build'
subprojects {
    project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
    project.evaluationDependsOn(':app')
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

2、首先修改pubspec.yaml文件,将依赖库dependencies升级到最新版本,将静态文件和widgets添加到配置中。

name: flutter_go
description: Flutter GO application.

https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

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: ^1.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  bloc: ^2.0.0
  flutter_bloc: ^2.0.0
  dio: ^3.0.10
  dio_cookie_manager: 1.0.0
  html: ^0.14.0+4
  event_bus: ^1.1.0
  sqflite: ^1.3.1+2
  pull_to_refresh: ^1.6.2
  fluro: ^1.7.3
  firebase_analytics: ^6.0.2
  #firebase_auth: ^0.8.3 #auth
  firebase_core: ^0.5.0+1 # add dependency for Firebase Core
  package_info: ^0.4.3
  url_launcher: ^5.7.5
  cookie_jar: ^1.0.1
  path_provider: ^1.6.21
  # 本地存储、收藏功能
  shared_preferences: ^0.5.12+2
  share: ^0.6.5+3
  flutter_spinkit: ^4.1.2
  zefyr: ^0.12.0
  fluttertoast: ^7.1.1
  flutter_webview_plugin: ^0.3.11
  city_pickers: ^0.2.0
  image_picker: ^0.5.0
  flutter_jpush: ^0.0.4
  markdown: ^3.0.0

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
    - lib/widgets/elements/Form/Input/TextField/text_field_demo.dart
    - lib/widgets/elements/Form/CheckBox/Checkbox/demo.dart
    - lib/widgets/components/Bar/AppBar/demo.dart
    - lib/widgets/components/Bar/BottomAppBar/demo.dart
    - lib/widgets/components/Bar/ButtonBar/demo.dart
......
    - lib/widgets/themes/Cupertino/CupertinoTabView/demo.dart
    - lib/widgets/themes/Cupertino/CupertinoTimerPicker/demo.dart
    - lib/page_demo_package/.demo.json
    - lib/standard_pages/.pages.json
    - assets/app.db
    - assets/images/
    - assets/fonts/

  fonts:
    - family: FlamanteRoma
      fonts:
        - asset: assets/fonts/Flamante-Roma-Medium.ttf
        - asset: assets/fonts/Flamante-Roma-MediumItalic.ttf

    - family: LatoBold
      fonts:
        - asset: assets/fonts/Lato-Bold.ttf


3、将下载下来的FlutterGo项目中main.dart代码复制到我们新建的main.dart中,点击Android Studio右上角的Get Dependencies,下载依赖包,下载完成之后,代码中有很多报错,我们一步一步修改,先将不需要的代码注释掉,只保留首页需要用到的代码。

4、复制FlutterGo项目中lib/api,lib/blocs,lib/components,lib/event,lib/model,lib/page_demo_package,lib/resources,lib/routers,lib/standard_pages,lib/utils,lib/widgets文件夹下所有代码到新建的项目中,将FlutterGo项目中assets文件夹复制到新建项目的根目录下。

5、修改main.dart,application.dart,routers.dart文件中的Router为FluroRouter,因fluro最新版本升级,Router命名有修改。

6、修改net_utils.dart文件,引入import 'package:dio_cookie_manager/dio_cookie_manager.dart';

7、修改search_input.dart文件,将isInitialRoute: false,修改为arguments: {'isInitialRoute': false}

8、注释掉报错的导入,暂时只保留views里面首页相关页面。

9、修改flutter_go\android\app\src\main\AndroidManifest.xml文件,添加

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.MODE_WORLD_READABLE" />
    <uses-permission android:name="android.permission.MODE_WORLD_WRITEABLE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

10、修改flutter_go\android\app\build.gradle文件,将以下代码复制到defaultConfig标签里。

manifestPlaceholders = [
                JPUSH_PKGNAME : "com.alibaba.fluttergo",
                JPUSH_APPKEY : "62eb07d227d1f11dd7fa6239", //JPush上注册的包名对应的appkey.
                JPUSH_CHANNEL : "developer-default",
        ]

11、在lib下新建views目录,将FlutterGo项目中login_page,first_page目录和home.dart文件复制进去,然后修改login_page.dart中的timeInSecForIos为timeInSecForIosWeb。

12、修改search_page.dart文件中的suggestion.dispatch为suggestion.add

13、将FlutterGo中的welcome_page和fourth_page目录复制到我们新建的项目中。修改fourth_page.dart文件中的import 'package:flutter/material.dart'; 改为import 'package:flutter/material.dart' hide Page;

14、将FlutterGo中的lib/views下的widget_page,collection_page,issuse_message_page,standard_demo_page目录复制到我们新建的项目中。修改issuse_message_page.dart文件,将timeInSecForIos改为timeInSecForIosWeb,将ZefyrToolbarTheme改为ToolbarTheme

15、将FlutterGo下的lib/widgets目录复制到我们新建的项目中。

注意事项:

1、将classpath 'io.fabric.tools:gradle:1.26.1'改为classpath 'io.fabric.tools:gradle:1.25.4'

2、A problem occurred configuring project ':city_pickers'.

3、将Router改为FluroRouter

4、欢迎页不展示,以及图标不展示,打开注释掉的welcome page

5、如果jar包不能下载,将maven { url 'storage.googleapis.com/download.fl…' }放到maven { url 'maven.fabric.io/public' }上面