Android Studio 使用Flutter开发第一个Web页面(进行中)

附上Flutter官方文档

1、新建Flutter项目(需要勾选web选项)

在这里插入图片描述
新建项目构成为:

在这里插入图片描述

2、配置 Flutter 使用 path 策略

官方文档
main.dart中,需要导入flutter_web_plugins/url_strategy.dart包,并在main(){}函数中usePathUrlStrategy();这是官方文档中让Flutter 使用 path 策略的方法
引用:
pubspec.yaml中引用

 url_strategy: ^0.2.0

pub get
在mian.dart中配置 usePathUrlStrategy();

import 'package:flutter_web_plugins/url_strategy.dart';
void main() {usePathUrlStrategy();runApp(const MyApp());
}

3、运行

新建页面运行
记得将运行设备选到web

在这里插入图片描述

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';class LoginPage extends StatefulWidget{@overrideState<StatefulWidget> createState() =>LoginState();
}class LoginState extends State<LoginPage>{@overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: Colors.white,body: buildBody(),);}Widget buildBody(){return Stack(children: [Image.network('http://192.168.0.86:81/img/login-bg.svg')],);}}

使用Image展示网络图片

第一次运行报错:
在这里插入图片描述
解决方案一:

终端执行命令:flutter run -d chrome --web-renderer html

在这里插入图片描述
再次运行:
在这里插入图片描述
该方案缺点:
每次重新运行图片都会报错,需要重新执行flutter run -d chrome --web-renderer html命令

方案二:
看报错提示应该与跨域有关,根据官网的相关文档,Image这个widgetweb上支持有限,这时候建议使用其他方式来加载图片
我们选择使用img标签来显示,通过ImageElements来实现即可,代码如下:

import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/cupertino.dart';class WebImage extends StatelessWidget{String url;double width;double height;WebImage(this.url, this.width, this.height);@overrideWidget build(BuildContext context) {String _divId = "web_image_" + DateTime.now().toIso8601String();// ignore: undefined_prefixed_nameui.platformViewRegistry.registerViewFactory(_divId,(int viewId) => ImageElement(src: url),);return SizedBox(width: width,height: height,child: HtmlElementView(key: UniqueKey(),viewType: _divId,),);}}

注意,这种方式图片不能按照自身尺寸显示,所以必须设置宽高才可以。

如果想使用圆形图片,则用ClipOval包装即可,如下:

ClipOval(child: WebImage("https://cdnimagelive.knowbox.cn/image/784111920965119.png", 50, 50)
)

更多问题处理方案请参考下面文章:
【Flutter进阶】 Web开发中如何加载网络图片

遇到问题:如何禁止图片缩放

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/812029.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第07-2章 TCP/IP模型

7.7 TCP/IP模型详解 7.7.1 简介 应用层的PDU>APDU&#xff08;Application PDU&#xff09; 表示层的PDU>PPDU&#xff08;Presentation PDU&#xff09; 会话层的PDU>SPDU&#xff08;Session PDU&#xff09; 7.7.2 TCP/IP协议体系 &#xff08;1&#xff09;TCP…

深度学习500问——Chapter07:生成对抗网络(GAN)(2)

文章目录 7.2 GAN的生成能力评价 7.2.1 如何客观评价GAN的生成能力 7.2.2 Inception Score 7.2.3 Mode Score 7.2.5 Wasserstein distance 7.2.6 Frchet Inception Distance (FID) 7.2.7 1-Nearest Neighbor classifier 7.2.8 其他评价方法 7.3 其他常见的生成式模型有哪些 7.…

洛谷题单 -- 图论的简单入门

B3643 图的存储 链接 : 图的存储 - 洛谷 思路 : 这一题要考察图的存储方式 , 一般可以使用邻接矩阵 或 邻接表来存储 图的结点 和1 边的信息 &#xff0c;详情请看代码 : 代码 #include<bits/stdc.h> using namespace std;const int N 1010 ; int n , m ; int …

【Python】实现导入、提交文件并显示其路径的基础GUI界面

The tkinter package (“Tk interface”) 是一个基于Tcl/Tk GUI工具标准的Python接口。集合在大多数操作系统都有Tk和tkinter 库&#xff0c;包括MacOS&#xff0c;Window还有一些Unix类的操作系统 【基础操作】 1 设置窗口 # -*- coding: utf-8 -*- from tkinter import *#创…

ASP.NET MVC企业级程序设计 (EF+MVP实现显示数据)

效果图 实现过程 1创建数据库 2创建项目文件 3创建控制器&#xff0c;右键添加&#xff0c;控制器 注意这里要写Home 创建成功 数据模型创建过程之前作品有具体过程 4创建视图&#xff0c;右键添加视图 5HomeController.cs代码 using System; using System.Collections.Gene…

【数学建模】2024认证杯C题完整思路和代码论文解析

经过不懈的努力&#xff0c;2024认证杯数学建模C题的完整论文和代码已完成&#xff0c;代码为A题全部4问的代码&#xff0c;论文包括摘要、问题重述、问题分析、模型假设、符号说明、模型的建立和求解&#xff08;问题1模型的建立与求解、问题2模型的建立与求解、问题3模型的建…

浏览器工作原理与实践--HTTP/1:HTTP性能优化

谈及浏览器中的网络&#xff0c;就避不开HTTP。我们知道HTTP是浏览器中最重要且使用最多的协议&#xff0c;是浏览器和服务器之间的通信语言&#xff0c;也是互联网的基石。而随着浏览器的发展&#xff0c;HTTP为了能适应新的形式也在持续进化&#xff0c;我认为学习HTTP的最佳…

【LAMMPS学习】八、基础知识(2.6)Lammps中的Walls墙

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语&#xff0c;以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各…

解释器模式:专为语言处理定制的模式

在软件开发中&#xff0c;解释器模式是一种特定的行为型设计模式&#xff0c;它用于定义一种语法&#xff0c;并提供一个解释器来解释这种语法或表达式。这种模式用于专门的情况&#xff0c;当有一个简单的语言需要解释时&#xff0c;它可以被用来表达实例的规则。本文将详细介…

【vue】watchEffect 自动侦听器

watchEffect&#xff1a;自动监听值的变化 获取旧值时&#xff0c;不是很方便&#xff0c;建议用watch <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevic…

每日一练(力扣)

我的思路是暴力枚举: 情况1:相同&#xff0c;就让子串和原串同时后移继续比较 情况2:不相同&#xff0c;就只让原串后移 public int strStr(String haystack, String needle) {if (haystack.length() < needle.length()){return -1;}for (int i 0; i < h…

K8S哲学 - 常见的资源类型

资源类型 namespace kubectl apply 和 kubectl create kubectl apply是声明式的 和 kubectl create是命令式的对吗 deployment 和 job的区别 k8s 的 lable 的意义

【YUNBEE云贝-进阶课】MySQL8.0性能优化实战培训

众多已经学习过MySQL 8.0 OCP认证专家的课程的同学们对 MySQL 8.0 的安装部署、体系结构、配置监控、用户管理、主从复制、系统运维、MGR等基础操作和动手实验有了一定的学习基础.很多学员反馈希望更进一步提升技术能力、解决工作中碰到的性能问题。 针对MySQL8.0的数据库性能优…

DMA的认识

DMA介绍 Q:什么是DMA&#xff1f; DMA( Direct Memory Access&#xff0c;直接存储器访问 ) 提供在 外设与内存 、 存储器和存储器 、 外设 与外设 之间的 高速数据传输 使用。它允许不同速度的硬件装置来沟通&#xff0c;而不需要依赖于 CPU &#xff0c;在这个时间中&am…

算法打卡day34

今日任务&#xff1a; 1&#xff09;62.不同路径 2&#xff09;63.不同路径 II 3&#xff09;复习day10 62.不同路径 题目链接&#xff1a;62. 不同路径 - 力扣&#xff08;LeetCode&#xff09; 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “S…

数据中心的网络架构设计,打造高效、安全的数字底座

数据中心的网络架构设计 一、数据中心网络架构设计原则 网络,作为数据中心的核心支柱,其结构精妙,由众多二层接入设备与少量三层设备共同编织而成。过去,数据中心网络规模有限,仅凭数十台设备的简单互连便能实现信息的畅通无阻。然而,随着技术与应用需求的飞速增长,数据…

Missing artifact org.opencv:opencv:jar:4.10.0 [opencv-4.10.0.jar]

Missing artifact org.opencv:opencv:jar:4.10.0 [opencv-4.10.0.jar] https://mvnrepository.com/artifact/org.opencv/opencv 根本就没有 找了个旧项目的opencv-410.jar修改下opencv-4.10.0.jar放到目录下面就好了 D:\localRepository\org\opencv\opencv\4.10.0 OpenCV-C…

[HDFS 相关Shell命令]

目录 HDFS 相关Shell命令: 相关文件操作命令: HDFS 相关Shell命令: 注意&#xff0c;下述命令中的<path>代表文件或目录的路径&#xff0c;<local_path>代表本地文件系统的路径&#xff0c;而<hdfs_path>代表HDFS上的路径。使用这些命令时&#xff0c;需要…

类的六个默认成员函数(上)

目录 构造函数 析构函数 拷贝构造函数 对于日期&#xff08;Date&#xff09;类&#xff0c;可以通过 Init 公有方法给对象设置日期&#xff0c;但如果每次创建对象时都调用该方法设置信息&#xff0c;未免有点麻烦&#xff0c;那能否在对象创建时&#xff0c;就将信息设置进…

鸿蒙OS开发学习:【第三方库调用】

介绍 本篇Codelab主要向开发者展示了在Stage模型中&#xff0c;如何调用已经上架到[三方库中心]的社区库和项目内创建的本地库。效果图如下&#xff1a; 相关概念 [Navigation]&#xff1a;一般作为Page页面的根容器&#xff0c;通过属性设置来展示页面的标题、工具栏、菜单。…