图像选择器 flutter web 1.9

2023-11-23

在新的 flutter web 1.9 上寻找图像选择器。我找到了一种方法,但小于 1.9,现在已合并,不知道如何实现此目的。尝试使用 dart:html 但无法发布!仅在跑步时


看来对于Flutter web 1.10 dev , Universal_html 包是暂时空缺职位的良好候选人dart:html:

import 'dart:convert';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:universal_html/prefer_universal/html.dart' as html;

class ImagePickerLabPage extends StatefulWidget {
  @override
  _ImagePickerLabPageState createState() => _ImagePickerLabPageState();
}

class _ImagePickerLabPageState extends State<ImagePickerLabPage> {
  String name = '';
  String error;
  Uint8List data;

  pickImage() {
    final html.InputElement input = html.document.createElement('input');
    input
      ..type = 'file'
      ..accept = 'image/*';

    input.onChange.listen((e) {
      if (input.files.isEmpty) return;
      final reader = html.FileReader();
      reader.readAsDataUrl(input.files[0]);
      reader.onError.listen((err) => setState(() {
            error = err.toString();
          }));
      reader.onLoad.first.then((res) {
        final encoded = reader.result as String;
        // remove data:image/*;base64 preambule
        final stripped =
            encoded.replaceFirst(RegExp(r'data:image/[^;]+;base64,'), '');

        setState(() {
          name = input.files[0].name;
          data = base64.decode(stripped);
          error = null;
        });
      });
    });

    input.click();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(name),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.open_in_browser),
        onPressed: () {
          pickImage();
        },
      ),
      body: Center(
        child: error != null
            ? Text(error)
            : data != null ? Image.memory(data) : Text('No data...'),
      ),
    );
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

图像选择器 flutter web 1.9 的相关文章

  • 空安全 AppLocalization 字符串的最佳方法

    Question 我在用AppLocalizations of context myString在我的 null safe flutter 应用程序中国际化字符串 我的 IDE 告诉我AppLocalizations of context
  • 将 SQL Server 与 Dart 结合使用

    我还没有找到很好的答案 所以我想尝试一下得到答案 将 Microsoft SQL Server 与 Dart 结合使用的最佳方式是什么 我需要它能够从基本上任何操作系统 网络和移动设备上使用它 我觉得最好的方法可能是 GraphQL 但我对
  • 如何将 Firestore 文档数据转换为类

    在 Firestore 中 有一些文档包含 名称 大陆 等字段及其字符串值 我在主 UI 代码中使用 FutureBuilder 并调用getData 功能 这是我的代码 class DatabaseService final locati
  • 使用 EditableText 进行 Flutter

    我正在尝试弄清楚如何在 Flutter 中使用 TextEditor 我有 卡片编辑器 基本上我希望能够处理相当于一段文本的内容 new EditableText autofocus true maxLines null backgroun
  • 不使用 BuildContext 预加载图像

    有没有办法在函数中加载 Flutter 中的图像而无需访问 BuildContext Flutter 可以预加载图像precacheImage 需要BuildContext 使用起来不方便 我想加载图像initState StatefulW
  • dart中解析对象(不支持的操作:无法添加到固定长度列表)

    我有一个用户对象 当用户登录 注册时 该对象保存到云 Firestore 数据库中 因此 当用户登录时 将从数据库中检索用户对象 并且一切正常 直到我尝试对列表 usersProject 执行 添加 操作 Add the new proje
  • 如何监听颤振中焦点的变化?

    在Android中 我们可以调用setOnFocusChangeListener 做某事onFocusChanged 方法 但 flutter 不提供onFocus 界面像onTap 在 GestureDetector 或onKey 在 R
  • GetX 控制器不会自动关闭

    我有一个在 Android 上运行的 minimlaist 示例应用程序 仅使用 GetX 作为状态管理库 有两个屏幕 LandingPage 和 MainScreen 从 MainScreen 返回到 LandingPage 屏幕时 控制
  • Flutter中如何获取设备用户代理信息

    我正在构建一个 flutter 应用程序 它需要随 http 请求一起发送用户代理信息 我在用着http 飞镖包 https pub dartlang org packages http发送请求 如何在flutter中获取用户代理字符串并将
  • 在 Flutter GestureDetector 上的 DoubleTap 上获取“详细信息”

    我正在开发一个应用程序 双击时我需要执行一些操作 但它们需要执行双击的位置 该信息通常由 onTapDown Up 等事件的详细信息携带 现在 我知道您可以在 GestureDetector 上调用 onTapDown 和 doubleTa
  • Flutter 动画:使用 opencontainer 进行 showSearch

    在颤振中animations包 使用容器变换动画的案例之一是 扩展搜索的搜索栏 现在显示扩展搜索的常用方法是使用showSearch函数 我唯一知道修改搜索动画是通过搜索委托 有什么办法可以使用吗openContainer with sho
  • Flutter:热重载后被发送回初始页面

    我在用颤振模块将我的应用程序分离到某个模块中 一切看起来都很好 直到我注意到每次执行热重载时 我的应用程序都会自动跳回到登录页面哪个 也是最初的 这是我的设置 class AppWidget extends StatelessWidget
  • 在 Flutter 中播放自定义声音

    我正在尝试播放自定义 mp3 声音 我已将资源文件夹放入应用程序文件夹中 就像对字体或图像文件所做的那样 但我真的不知道如何继续 我想我可能需要将音频文件注册到 pubspec yaml 中 但是如何注册呢 我该如何玩它 我已经检查了这两个
  • Flutter Stripe 在显示付款单时抛出 StripeException

    我正在尝试使用 stripe payment 包在我的 flutter 应用程序中实现 Stripe 支付系统 在我的代码中 我调用 Stripe instance initPaymentSheet 但是当我尝试在几行之后调用 Stripe
  • 扩展 AppCompatActivity 与扩展 flutterActivity

    为了https flutter dev docs development platform integration platform channels tab android channel java tab step 3 add an a
  • 在 Flutter 的 Ferry Graphql 中序列化标量 JSON 以实现灵活的查询

    我有以下 JSON 标量 The JSON scalar type represents JSON values as specified by ECMA 404 http www ecma international org public
  • 存储图标的状态并仅在满足条件时更新

    我对 flutter 很陌生 我有这个代码 if led last contains 1 const Icon Icons fingerprint color Colors blue else if led last contains 2
  • 重建父级时调用子级 init 方法 - flutter

    据我了解和颤振的工作机制 有状态的小部件方法仅在小部件树中第一次构建时被调用一次 并且每次其状态更改或父级重建时都会调用构建方法方法 bottomNavigationBar BottomNavigationBar items BottomN
  • 将时间转换为 am/pm 颤动

    如何将时间转换为 am pm 我有这个输出 I flutter 17720 9 00 00 I flutter 17720 11 00 00 I flutter 17720 12 00 00 这是我尝试过的 final item snaps
  • 在 Flutter 中保存照片(尤其是保存到相机胶卷)

    我不知道如何保存到相机胶卷 相当于React Native的CameraRoll saveToCameraRoll https facebook github io react native docs cameraroll html sav

随机推荐