可以用Flutter愉快的开发web 了

顺心 等级 964 0 0

简单的试了一下,完全用flutter现有的widget进行开发。github上面有说现在是preview版本,有些widget还不能用。但是最终是会支持整个的flutter现有的UI的。

跟用flutter开发原生app一样。flutter_web还有很长的一段路要走。希望年底能出个像样的版本。

不支持第三方库说明

目前pub.dartlang.org上的库如果引用了 flutter/material.dart, flutter/cupertinote.dart 等UI相关的库,在web里面都不能使用,因为目前flutter_web用到的widget有一个自己的命名空间。但是官方是说最终会合到flutter时面去。

之前写的代码全部用了flutter_redux. 目前在flutter_web里面就不能直接用了。要等flutter更新。

环境要求

要运行flutter_web要进行一些环境设置

  • flutter版本:要用dev分支,且版本要在v1.5.4以上。如果还没有升级的话 flutter upgrade升级一下,flutter channel dev切换到dev分支。

flutter channel 查看当前分支

pub global activate webdev
or
flutter packages pub global activate webdev</pre> 
  • 确保$HOME/.pub-cache/bin这个环境变量存在

运行demo

  • 进入demo目录
$ cd flutter_web/examples/hello_word 
  • 更新依赖
$ flutter packages upgrade  或者 pub get 
  • 运行本地web
$ webdev serve 

出现Servingwebon [http://localhost:8080](http://localhost:8080`) 后就可以打开浏览器查看了。

上个简单的效果图:

可以用Flutter愉快的开发web 了

企业微信截图_e751731e-ec91-4b6c-af0e-8fa718a742e5.png

代码简单如下:

import 'package:flutter_web/material.dart';

void main() {
  runApp(new App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: test2());
  }

  Widget test2() {
    return Column(
      children: <Widget>[
        createItem(),
        createItem(),
        createItem(),
        createItem(),
        createItem(),
        createItem(),
        createItem(),
        createItem(),
      ],
    );
  }

  Widget createItem() {
    return Container(
      margin: const EdgeInsets.only(top: 10.0),
      height: 80.0,
      width: 300.0,
      color: Color(0xff00ff00),
      child: Center(
        child: Text(
          '这是一个列表',
          textDirection: TextDirection.ltr,
        ),
      ),
    );
  }
} 

本文转自 https://www.jianshu.com/p/6d1028e86bda,如有侵权,请联系删除。

收藏
评论区

相关推荐

flutter -- dart基础之dart简介和安装
Dart介绍: Dart是由谷歌开发的计算机编程语言,它可以被用于web、服务器、移动应用 和物联网等领域的开发。 Dart诞生于2011年,号称要取代JavaScript。但是过去的几年中一直不温不火。直到Flutter的出现现在被人们重新重视。 要学Flutter的话我们必须首先得会Dart。 da
Flutter 2 正式发布!
昨天凌晨,Flutter 2 正式发布: 开发者为_任何_平台创建美观、快速且可移植应用的能力得以更上一层楼。通过 Flutter 2,您可以使用相同的代码库为五种操作系统构建原生应用: iOS、Android、Windows、macOS 和 Linux;以及为 Chrome、Firefox、Safari 和 Edge 等浏览器打造 web 体验。Flutt
带你全面了解 Flutter,它好在哪里?它的坑在哪里? 应该怎么学?
回顾了这段时间解答关于 Flutter 的各种问题后,我突然发现很多刚刚接触 Flutter 的萌新,对于 Flutter 都有着不同程度的误解,而每次重复的解释又十分浪费时间,最终我还是决定写篇文章来做个总结。 内容有点长,但是相信能帮你更好地去认识 Flutter 。 Flutter 的起源 Flutter 的诞生其实比较有意思,Flutter
可以用Flutter愉快的开发web 了
简单的试了一下,完全用flutter现有的widget进行开发。github上面有说现在是preview版本,有些widget还不能用。但是最终是会支持整个的flutter现有的UI的。 跟用flutter开发原生app一样。flutter_web还有很长的一段路要走。希望年底能出个像样的版本。 不支持第三方库说明 目前pub.da
Flutter 移动应用开发指南
Flutter 移动应用开发指南 Flutter 作为新一代的跨平台 UI 框架,已经在 Android 和 iOS 移动平台被广泛使用,未来还会进一步扩展到 Web、桌面和嵌入式等平台。只要编写一次代码,就可处处运行,真正做到了全屏制霸。本文将通过从零开发一个类似抖音的短视频应用来展示 Flutter 应用的完整开发过程,以及它的强大性和易用性。
【Flutter实战】初识Flutter
1.2 初识Flutter 1.2.1 Flutter简介Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加 native扩展。同时 Flu
解读 Flutter 全平台开发的误解与偏见
Flutter 2.0 发布之后,Web 版本进入了 stable 分支,Desktop 版本也可以在 stable 分支通过 snapshot beta 镜像开始预览使用,导致最近关于 “Flutter 制霸全平台” 之类的话题又被炒作起来,所以本篇主要对这个话题做一次解答。1、Flutter 制霸全平台谷歌官方在 F
10分钟读懂阿里巴巴高级专家在Flutter Live2018的分享
作者:闲鱼技术-宗心 12月4日,google flutter团队宣布第一个flutter正式版本发布。次日,Flutter Live Beijing 会议上,google flutter团队邀请了在这一技术方案中重要的合作伙伴闲鱼团队分享这半年以来的通过flutter产出的业务结果以及对应的技术挑战。 ![](https://oscimg.oschin
AndroidStudio安装了flutter插件,但是flutter doctor识别不到的问题解决
最近在配置flutter开发环境的时候,出现了很多问题。 我是下载的 [flutter源码](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fflutter%2Fflutter "flutter源码") ,切换到了`stable` 分支,当前版本号为 `1.22.
Flutter Swiper制作轮播效果
![](https://oscimg.oschina.net/oscnet/71c82559e8c6c5a42d6e3420594398793d7.png) #### 1、引入flutter\_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. Flutter\_swiper的GitHub
Flutter for Web 详细预研
背景 -- Google在最新的Google I/O上推出了Flutter for Web,旨在进一步解决一次代码,多端运行的问题。Flutter for Web还处于早期试验版,官方不建议在生产环境上使用。那么到底它的实际情况怎么样呢? 我们做了一次预研。期望这次预研的结果可以帮你决定是用,还是不用FFW。 Flutter for Web原理 ----
Flutter 性能优化系列之打造高性能 widget
> “ > > 本文是 Flutter 性能优化系列文章之一,记录了 Flutter 团队优化 Flutter Gallery 的实践。本文主要介绍了如何打造高性能的 widget。原文链接:https://medium.com/flutter/building-performant-flutter-widgets-3b2558aa08fa > > ”
Flutter安装
安装前准备:Android Studio 、VS Code、Git 1\. 使用镜像 -------- 添加用户环境变量: FLUTTER\_STORAGE\_BASE\_URL = https://storage.flutter-io.cn PUB\_HOSTED\_URL=https://pub.flutter-io.cn 2.g
Flutter环境搭建
本文介绍mac上搭建Flutter环境 1、Flutter官方提供中国地区镜像地址:[https://github.com/flutter/flutter/wiki/Using-Flutter-in-China](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Ff
Flutter集成百度语音识别(Android端)实战
今天和大家分享一下Flutter中集成百度语音识别Android端的过程,供大家进行参考。 既然是Flutter集成,那首先就要创建一个Flutter项目,这个就不仔细讲了,可以参考Flutter中文的[创建项目流程](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fflutterchin