安基网 首页 编程 软件学院 查看内容

使用 Flutter 开发简单的 Web 应用

2020-6-20 13:31| 投稿: xiaotiger |来自: 互联网


免责声明:本站系公益性非盈利IT技术普及网,本文由投稿者转载自互联网的公开文章,文末均已注明出处,其内容和图片版权归原网站或作者所有,文中所述不代表本站观点,若有无意侵权或转载不当之处请从网站右下角联系我们处理,谢谢合作!

摘要: 本文指导读者如何使用 Flutter 运行和部署第一个 Web 应用。-- Jis Joe Mathew(作者)Flutter 在 Android 和 iOS 开发方面走了很长一段路之后,已经迈入了一个新的阶段,即 Web 开发。Google 发布了 Flutter 1.5,同时支持 Web 应用开发。为 Web 开发配置 Flutter为了使用 Web 包,输入命令 flutter u ...

本文指导读者如何使用 Flutter 运行和部署第一个 Web 应用。-- Jis Joe Mathew(作者)

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

为 Web 开发配置 Flutter

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

  • 打开终端
  • 输入 flutter upgrade
  • 输入 flutter –version 检查版本

图 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 中打开终端窗口,然后输入以下命令:

flutter packages pub global activate webdev

flutter packages upgrade

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

flutter packages pub global run webdev serve

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

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

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

编码和修改演示页面

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

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

图 5:main.dart 文件的位置

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

debugShowCheckedModeBanner: false

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

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

class MyClass extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: [

Padding(

padding: EdgeInsets.all(20.0),

child: Text(

'Welcome to OSFY',

style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),

),

),

],

),

),

);

}

}

图 6:MyClass 的输出

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

Image.network(

'https://opensourceforu.com/wp-content/uploads/2014/03/OSFY-Logo.jpg',

height: 100,

width: 150

),

最终输出如图 7 所示。

图 7:最终输出


via: https://opensourceforu.com/2019/11/developing-a-simple-web-application-using/

作者: Jis Joe Mathew 选题: lujun9972 译者: geekpi 校对: wxy

本文由 LCTT 原创编译, Linux中国 荣誉推出

点击“了解更多”可访问文内链接

"

小编推荐:欲学习电脑技术、系统维护、网络管理、编程开发和安全攻防等高端IT技术,请 点击这里 注册账号,公开课频道价值万元IT培训教程免费学,让您少走弯路、事半功倍,好工作升职加薪!

本文出自:https://www.toutiao.com/a6762317743002747395/

免责声明:本站系公益性非盈利IT技术普及网,本文由投稿者转载自互联网的公开文章,文末均已注明出处,其内容和图片版权归原网站或作者所有,文中所述不代表本站观点,若有无意侵权或转载不当之处请从网站右下角联系我们处理,谢谢合作!


鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

 最新
返回顶部