Flutter学习 (一)

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。

环境安装

安装java jdk

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

下载FlutterSDK

https://flutter.io/sdk-archive/#windows

下载Android Studio

https://developer.android.google.cn/studio/#downloads

安装插件

打开安装好的android studio,在插件中搜索 flutter并安装

可能首次安装会搜索不到flutter,这时候需要如下设置:
依次找到File -> Settings -> Appearance & Behavior -> System Settings -> Updates,去掉勾选 Use secure connection

创建模拟器

依次打开Tools->Avd Manager -> Create Virtual Device,按照提示创建对应的模拟器。

新建项目

上述操作完成后,重新打开vscode,选择Start a new Flutter Project,选择默认配置,即可新建一个flutter项目, 待项目加载完成后,运行项目。若幸运则可以在模拟器中看到demo,若不幸,下面列举了可能出现的问题以及解决方法

问题:

* What went wrong:
A problem occurred evaluating project ':app'.
> Could not resolve all files for configuration 'classpath'.
   > Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.1.2).
     Searched in the following locations:
         https://jcenter.bintray.com/com/android/tools/lint/lint-gradle-api/26.1.2/lint-gradle-api-26.1.2.jar

解决:

1、修改android目录下的build.gradle文件,替换所有的google()jcenter()

// Generated file. Do not edit.

buildscript {
    repositories {
//      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'}
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}

allprojects {
    repositories {
//      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'}
    }
}

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

2、修改flutter安装目录下的flutter\packages\flutter_tools\gradle文件,同样是替换掉所有的google()jcenter()


buildscript {
    repositories {
        // google()
        // jcenter()
        maven{
            url 'https://maven.aliyun.com/repository/jcenter'
        }
        maven{
            url 'https://maven.aliyun.com/repository/google'
        }
        maven{
            url 'http://maven.aliyun.com/nexus/content/groups/public'
        }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
    }
}

使用vscode开发

作为一名前端开发,个人已经习惯使用vscode,并且vscode相当耗内存,因此需要转移到vscode开发flutter项目

安装flutter插件

在插件中搜索flutter直接安装,然后重启即可。安装flutter的同时会默认安装dart。

配置emulator

  • 配置环境变量
    找到emulator所在的位置,并添加到全局环境变量path中,例如C:\Users\Administrator\AppData\Local\Android\Sdk\emulator
  • 打开模拟器
    控制台执行 emulator -netdelay none -netspeed full -avd 你的模拟器名字

运行

直接在控制台执行flutter run即可实现预览

运行效果如下

image.png


文章作者: 徐辉波
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 徐辉波 !
评论
 上一篇
Vue之keep-alive页面前进刷新后退缓存 Vue之keep-alive页面前进刷新后退缓存
需求:现有四个页面:分类列表页A,表格列表页B,列表搜索页C,详情页D,需要实现以下链路前进刷新后退缓存 A—>B—>C B刷新 C—>B—>A B缓存 A—>B—>D B刷新 D—>B—
2019年04月20日
下一篇 
vue项目优化之打包速度 vue项目优化之打包速度
本周接到一个优化项目打包速度的任务,开始我是一脸懵逼的,之前未曾做过类似的任务,而且对webpack配置也不是太精通。头疼之际,google了网上大神的意见,并以身试毒,这里面有很多坑,现总结一下我用到的优化方式 优化后对比 我们先看
2018年11月24日
  目录