flutter初识

之前听同学说开发app用的是cordova
但是今年好像flutter更火,还是来看看flutter吧
首先安装环境就需要装很久.本人自己装了一天

1.安装java环境
因为flutter开发的是原生,那当然的得安装一下java环境
java环境下载戳这里

2.下载安装 FlutterSDK
Flutter SDK for windows下载安装戳这里
在Flutter安装目录的flutter文件下找到flutter_console.bat,双击运行并启动flutter命令行,接下来,你就可以在Flutter命令行运行flutter命令了。
环境变量配置:
SDK安装所在文件夹里的bin文件;
E:\flutter\bin;
运行flutter doctor 看看还缺少什么配置文件

3.Android Studio安装
Andriod Studio官网
打开Android Stuido 软件,然后找到Plugin的配置,搜索Flutter插件。
点中间的Search in repositories,然后点击安装.
安装完成后,你需要重新启动一下Android Studio软件。

4.安装Android证书

flutter doctor --android-licenses

一律选择Y,就可以把证书安装好

5.安装AVD虚拟机
点击Android Studio中的上方菜单tool - AVD Manager 选项。
选择Create Virtual Device…
选择系统,这里尽量选择最新的
安装好后,点击开始按钮,运行虚拟机了
安装好了
6.让flutter跑起来
在这里插入图片描述
点击这个像小瓢虫一样的按钮.启动debug

这里可能会出两个问题
一、这个问题的产生的原因,还是中国特有的问题,解决方案是改位阿里的链接(1.0已经修复了这个问题,不用再重新设置了)。

第一步:修改掉项目下的android目录下的build.gradle文件,把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' }

第二步:修改Flutter SDK包下的flutter.gradle文件,这个目录要根据你的SDK存放的位置有所变化。比如我放在了D盘Flutter目录下,那路径就是这个。

D:\Flutter\flutter\packages\flutter_tools\gradle

打开文件进行修改,修改代码如下(其实也是换成阿里的路径就可以了)。

buildscript {
    repositories {
        //jcenter()
        // maven {
        //     url 'https://dl.google.com/dl/android/maven2'
        // }
        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'
    }
}

7.用vscode玩flutter
打开VSCode的插件界面,然后用在搜索框中输入Flutter,第一个就是Flutter插件了。
新建一个emulateRun.bat的文件 右键编辑
输入你的emulator.exe所在地址
配置虚拟机

C:\Users\Administrator\AppData\Local\Android\Sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_5X_API_29
  • -netdelay none :设置模拟器的网络延迟时间,默认为none,就是没有延迟。
  • -netspeed full: 设置网络加速值,full代表全速。

然后flutter run就可以看到虚拟机输出结果

更改\lib\main.dart里面的配置

import 'package:flutter/material.dart';
//主函数(入口函数),下面我会简单说说Dart的函数
void main() =>runApp(MyApp());
// 声明MyApp类
class MyApp extends StatelessWidget{
  //重写build方法
  @override
  Widget build(BuildContext context){
    //返回一个Material风格的组件
   return MaterialApp(
      title:'Welcome to Flutteraa',
      home:Scaffold(
        //创建一个Bar,并添加文本
        appBar:AppBar(
          title:Text('Welcome to Flutter'),
        ),
        //在主体的中间区域,添加一个hello world 的文本
        body:Center(
          child:Text('Hello World'),
        ),
      ),
    );
  }
}

hello world出来了~

发布了6 篇原创文章 · 获赞 0 · 访问量 63
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览