您现在的位置:主页 > 一品轩高手论坛981234 >

如何将 Flutter 代码部署到 Web 端 开发者说·DTalk

文章来源:本站原创 发布时间:2019-09-07 点击数:

  框架,这一点在移动端已经很成熟了,国内有很多成功的案例,典型的像阿里的闲鱼客户端,但是

  本文将会以一个实例来带大家一步一步探寻如何将Flutter应用程序部署到Web端,我们先来看一下最终的效果:

  可以看到,就是一个简单的登录界面,没有太复杂的逻辑,旨在帮助大家走通Flutter部署到Web端的流程,至于实际的应用场景大家可以根据自己的需要自行开发。

  Flutter 1.5及更高的版本才支持Web端部署,这主要指的是将Dart编译为Java,所以,必须要确保我们本地的Flutter SDK的版本在v1.5.4以上,建议直接使用命令flutter upgrade更新到最新版即可。白姐高手论坛

  要想将Flutter代码编译为Web端可部署的应用程序,必须安装flutter_web,这是一个Flutter官方为我们开发并维护的编译工具,直接使用以下命令安装即可:

  安装完成后,需要配置环境变量,直接将$HOME/.pub-cache/bin加入到你的环境变量中即可,由于电脑不同的操作系统配置环境变量的方式不同,这里就不一一展开赘述了,以Mac操作系统为例:

  至此,我们的开发环境就搭建好了,可以看出,只要我们本地的Flutter环境配置的没有问题,配置Flutter for web只是多装了一个flutter_web编译工具而已,非常简单。

  区别于普通的Flutter项目,由于Flutter对Web的支持目前还没有完全完成,相当于是一个供大家尝鲜的作品,所以创建Flutter for web项目和普通Flutter项目不一样,这里建议大家使用Idea,我这里也以Idea为例进行说明:

  创建完成后我们的项目就默认支持部署到Web了,在Idea中应该可以直接点击运行按钮进行运行,或者可以在Idea的终端中输入:

  进行运行,初次编译可能会下一些本项目所依赖的包,万众118图库的网址,需要一分多钟,后面编译会快很多,编译完成后会弹出一个浏览器的窗口 (注意,这里建议使用Chrome浏览器,其他浏览器笔者没有测试过,按照官方的说法,目前支持最好的应该是Chrome浏览器) 如下图:

  可以看到,大体的项目结构和普通的Flutter项目差不多,只是多了一个web文件夹,下面是一些和web相关的文件和资源,后面我会具体讲其用处。

  创建好项目之后,我们就可以着手代码的编写了,这里不再详细叙述代码怎么写,和普通Flutter编写代码的规则是一模一样的,这里我在lib文件夹下新建了一个pages文件夹,然后新建了login_page.dart文件,编写登录界面的代码,完成后代码如下:

  我们之前使用资源文件 (比如图片) 的方式是在根目录下新建一个资源文件夹,然后将资源文件放在资源文件夹下,然后在pubspec.yaml文件中进行文件路径的声明,然后就可以使用了,在Flutter for web中,我们需要将原来的资源文件夹从之前的项目根目录迁移到web文件夹下,就像这样:

  然后就可以正常使用了,这也是迄今为止我发现的Flutter for web和普通Flutter项目的不同之处了。

  编写完布局文件后我们将main.dart稍作修改,引入我们的LoginPage:

  本文我们通过一个简单的实例带大家走了一遍Flutter在Web端部署的流程,可以看到,目前Flutter在Web上的部署已经没有任何压力了,只是由于生态还不完整,很多库和包还不能用,所以目前还无法投入商用软件中,希望 Flutter 可以发展的越来越完善。同时,结合笔者个人的开发经验,建议大家开发Flutter项目时一定不要怕麻烦,多用像mvp这类的项目结构,这样可以大大提高开发效率。

  移动应用 (apps & games) 相关的产品/技术内容。欢迎大家前来分享您对移动应用的行业洞察或见解、移动开发过程中的心得或新发现、以及应用出海的实战经验总结和相关产品的使用反馈等。我们由衷地希望可以给这些出众的中国开发者们提供更好展现自己、充分发挥自己特长的平台。我们将通过大家的技术内容着重选出优秀案例进行谷歌开发技术专家 (GDE) 的推荐。返回搜狐,查看更多

下一篇:没有了
玄机图| 牛魔王论坛| 05666有钱人高手| 开奖现场| 平码三中三| 金多宝心水论坛| 香港神算子中特| 九龙老牌图库| 品特轩www555939| 114888红姐心水论| 玄机图| 白小姐马会| 小鱼儿玄机2站资料| 刘伯温开奖| 发财报彩图| 藏宝图| 马会论坛| 香港管家婆| 168开奖下载| 118图库|