• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Flutter语言从安装到使用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、Flutter包下载

① 通过Git工具下载(测试版)

通过Git工具下载Flutter首先需要安装Git-GUI工具,然后通过下面的地址安装:

 		git clone https://github.com/flutter/flutter.git

② 通过Flutter官网下载最新的正式包

Flutter官网2018/12/05推出Flutter正式版,建议使用正式版。Windows版下载地址:

https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-stable.zip

获取最新FLutter包或者其他OS包请移步Flutter下载安装页:

链接: Flutter官网:下载安装页.

如果出现下载失败或者网页打不开的情况,请多次刷新网页即可。谷歌的东西,你懂得!

二、 Flutter环境配置

很多文章都有介绍过配置国内下载镜像的方法,那只针对测试版,正式版不需要配置,只需要把flutter目录下的bin文件夹添加到系统环境变量中。如:我flutter解压目录在D盘programs目录下 那我的环境变量需要添加:

D:\Programs\flutter\bin

三、 Flutter常用命令行

① 检查环境依赖 flutter doctor

flutter doctor 运行结果: (win10系统带有powershell命令行,比CMD更强大。)
(通过 Win键 + X 调起菜单,选择windows powershell管理员(A) 打开shell命令窗口。)

有问题的环境会用红色字体提示,如果没有其他问题,就会显示几个选项,并在前面打勾。如图,我没有连接手机,就用叹号提示我。

② 升级Flutter包 flutter upgrade

如果有需要更新的版本,运行此命令。

③ 创建flutter项目:mydemo: flutter create mydemo

项目名称包含大写字母可能会出错,建议都使用小写。
此命令会在当前目录下创建以mydemo命名的flutter工程,如果需要指定目录,可以先cd到你想要的目录,或者通过flutter create d:\programs\mydemo 在指定目录中创建flutter工程。
创建成功会自动执行一次 flutter doctor 命令。

④ Flutter工程的安装: flutter run

如果是studio打开的项目,直接在底部 Terminal 窗口运行此命令。如果是使用命令行的方式,需要cd到flutter工程根目录下,运行此命令。
然后此项目会安装到你的已连接手机上:

工程打开的界面就如你经常看到的教程中那样:

flutter有很好用的热加载和热重载功能。
r :热加载就是以只更新界面变化,保持已有的缓存数据。
R :热重载就相当于又一次打开了app,现有的交互数据被重置。
以上图为例,如果我按下r,5这个数据还在;如果我按下R,5这个数据就会被清空。

⑤ 带参数的安装方式: flutter run --**

安卓版本4.3以下,需要手动设置软渲染支持 enable-software-rendering 否则运行后会出现白屏。
4.3及其以上版本,忽略此设置。
flutter run --enable-software-rendering
这里默认是debug包,如果需要release包,需要指定release,并且指定运行平台架构:
flutter run --release --target-platform android-arm --enable-software-rendering

四、安卓和Flutter的混合开发工程

纯Flutter工程的创建和运行介绍完了,介绍一下如果在已有的安卓工程中引入flutter项目。

① 配置android项目:

  1. 以android Studio为例,先安装flutter插件和dart插件。

  2. 在app下的build.gradle的 dependencies{ } 中加入 compile project(':flutter')
    如果你的编译版本高,可以用implementation 或者api 替代compile

  3. 在主目录下的settings.gradle 文件中,添加如下代码。

    setBinding(new Binding([gradle: this])) 
    evaluate(new File( 
    	settingsDir.parentFile,  
    	'mydemo_flutter_module/.android/include_flutter.groovy' 
    ))
    

    mydemo_flutter_module 是接下来要说的FlutterModule工程
    如果 Binding类提示找不到,说明flutter插件有问题,正常情况下binding不需要导包。如果提示需要导 包,则可能需要更换studio的版本(通过AS直接可以创建flutterProject,则一般没有这个问题)。

  4. 可能你不太明白上面那段代码做了什么,下面看如何创建flutter_module工程

    flutter create -t module mydemo_flutter_module
    

    我们指定一个module工程的名称为 mydemo_flutter_module,通过这个命令创建这个module工程
    然后看上面代码有个 settingsDir.parentFile 这个是指定 include_flutter.groovy的目录所在。
    我们需要把module工程放在和mydemo同级的目录下,如图:

    settingsDir.parentFile 指定了目录,mydemo_flutter_module/.android/include_flutter.groovy,指定目录下的核心文件。
    这样,配置就完成了。不管怎么配置,最终要让settings.gradle 找到groovy的位置就对了。

② 在安卓中显示Flutter页面

  1. 显示Flutter页面
    以Activity为例,在安卓工程中新建一个按钮打开一个新的Activity,以Activity为例,在安卓工程中新建一个按钮打开一个新的Activity,
    在新Activity中包含如下:

    private RelativeLayout layout;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_flutter);
        // 就是一个ReletivaLayout控件,可见性为invisible
        layout = findViewById(R.id.layout_flutter);
    	// 创建FlutterView:
    	// 传参:第一个参数要传Activity,第二个参数要传LifeCycle(FragmentActivity下有此方法)
    	// 第三个参数传路径字符串,用于在flutter中判断从哪里过来的。
        FlutterView flutterView = Flutter.createView(this, getLifecycle(), "route1");
        // 创建监听,在flutter初始化完成绘制完第一帧画面时获取到此监听,展示布局,并通过addView的方式显示布局
        FlutterView.FirstFrameListener[] listeners = new FlutterView.FirstFrameListener[1];
        listeners[0] = new FlutterView.FirstFrameListener() {
            @Override
            public void onFirstFrame() {
        		 // 在绘制了第一帧后设置为可见。这样可以防止在flutter界面创建期间的短暂黑屏
                layout.setVisibility(View.VISIBLE);
            }
        };
        flutterView.addFirstFrameListener(listeners[0]);
    	 
        layout.addView(flutterView);
    }
    
  2. 安卓界面和Flutter界面的数据交互
    数据交互可以通过MethodChannel类来完成。

    // 定义一个渠道码
    private static final String CHANNEL = "com.mydemo/android";
    //设置一个回调监听:第一个参数,View;第二个参数,渠道
    new MethodChannel(flutterView, CHANNEL).setMethodCallHandler(
                new MethodChannel.MethodCallHandler() {
            @Override
            public void onMethodCall(MethodCall call, MethodChannel.Result result) {
                if (call.method.equals("showToast")) {
                    if (call.hasArgument("msg") && call.argument("msg") != null) {
                        showText(call.argument("msg").toString());
                    } else {
                        showText(call.argument("回调返回空数据了~").toString());
                    }
                } else {
                    result.success("MethodCall= Other");
                }
            }
        });
    

这样就可以监听到flutter返回的相应信息了,返回的信息需要在flutter——module工程中定义,后续增加dart语言的代码。

总结

使用flutter涉及到两个问题,一就是flutter配置和工程创建,二就是混合开发中怎么在安卓中使用flutter。
本文将我在摸索的过程中发现的问题总结出来了,希望看完本文能给您遇到的问题带来一定的帮助。

转载请注明出处(因为出处不仅是作者的原创,还有通俗易懂的格式化代码)。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
手把手教你使用R语言对数据进行多重插补后回归分析发布时间:2022-07-18
下一篇:
R语言学习笔记:向量发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap