文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

使用Flutter开发简单的Web应用

2024-12-24 21:53

关注

本文指导读者如何使用 Flutter 运行和部署第一个 Web 应用。

Flutter 在 Android 和 iOS 开发方面走了很长一段路之后,已经迈入了一个新的阶段,即 Web 开发。Google 发布了 Flutter 1.5,同时支持 Web 应用开发。

为 Web 开发配置 Flutter

为了使用 Web 包,输入命令 flutter upgrade 更新到 Flutter 1.5.4。

 

图 1: 升级 Flutter 到最新版

也可以将 Android Studio 3.0 或更高版本用于 Flutter Web 开发,但在本教程中,我们使用 Visual Studio Code。

使用 Flutter Web 创建新项目

打开 Visual Studio Code,然后按 Shift+Ctrl+P 开始一个新项目。输入 flutter 并选择 “New Web Project”。

 

图 2:在 VSC 中开始一个新的 Flatter 项目

现在,为项目命名。我将其命名为 open_source_for_you

 

图 3: 给项目命名

在 VSC 中打开终端窗口,然后输入以下命令:

  1. flutter packages pub global activate webdev
  2. flutter packages upgrade

现在,使用以下命令在 localhost 上运行网站,IP 地址是 127.0.0.1。

  1. flutter packages pub global run webdev serve

打开任何浏览器,然后输入 http://127.0.0.1:8080/

 

图 4:运行于 8080 端口的 Flutter 演示应用

在项目目录中有个 Web 文件夹,其中包含了 index.htmldart 文件被编译成 JavaScript 文件,并使用以下代码包含在 HTML 文件中:

  1. defer src="main.dart.js" type="application/javascript">

编码和修改演示页面

让我们创建一个简单的应用,它会在网页上打印 “Welcome to OSFY”。

现在打开 Dart 文件,它位于 lib 文件夹 main.dart(默认名)中(参见图 5)。

 

图 5:main.dart 文件的位置

现在,我们可以在 MaterialApp 的属性中删除调试标记,如下所示:

  1. debugShowCheckedModeBanner: false

现在,向 Dart 中添加更多内容与用 Dart 编写 Flutter 很类似。为此,我们可以声明一个名为 MyClass 的类,它继承了 StatelessWidget

我们使用 Center 部件将元素定位到中心。我们还可以添加 Padding 部件来添加填充。使用以下代码获得图 5 所示的输出。使用刷新按钮查看更改。

  1. class MyClass extends StatelessWidget {
  2. @override
  3. Widget build(BuildContext context) {
  4. return Scaffold(
  5. body: Center(
  6. child: Column(
  7. mainAxisAlignment: MainAxisAlignment.center,
  8. children: <Widget>[
  9. Padding(
  10. padding: EdgeInsets.all(20.0),
  11. child: Text(
  12. 'Welcome to OSFY',
  13. style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
  14. ),
  15. ),
  16. ],
  17. ),
  18. ),
  19. );
  20. }
  21. }

 

图 6:MyClass 的输出

让我们从互联网中添加一张图片,我已经从一个杂志网站选择了一张 “Open Source for You” 徽标。我们使用 Image.network

  1. Image.network(
  2. 'https://opensourceforu.com/wp-content/uploads/2014/03/OSFY-Logo.jpg',
  3. height: 100,
  4. width: 150
  5. ),

最终输出如图 7 所示。

 

图 7:最终输出 

来源:Linux中国内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯