[英]How to run flutter on the emulator if you project has dart html imports
I am using flutter for mobile and web app.我在手机上使用 flutter,在应用程序上使用 web。 I need to upload photos from both the mobile application and the web browser.
我需要从移动应用程序和 web 浏览器上传照片。 There are no problems for the mobile application, everything works, and for the web version, the following solution was invented: I created a method for the web app so that photos can be uploaded from the desktop.
移动应用程序没有问题,一切正常,对于web版本,发明了以下解决方案:我为web应用程序创建了一个方法,可以从桌面上传照片。 For this I used
import 'dart:html';
为此,我使用了
import 'dart:html';
, but if i try to run everything works fine in a web browser, but if I run it on a mobile application now, I get a bunch of errors saying that web imports (html) cannot be compiled. , 但如果我尝试在 web 浏览器中运行一切正常,但如果我现在在移动应用程序上运行它,我会收到一堆错误,说 web 导入 (html) 无法编译。
I read the following issue, which said that you simply can't call HTML methods in a mobile application.我阅读了以下问题,其中说您根本无法在移动应用程序中调用 HTML 方法。 I forbade calling HTML methods if the application does not run in a web browser, but the result the same:
如果应用程序未在 web 浏览器中运行,我禁止调用 HTML 方法,但结果相同:
import 'dart:html';
Future<void> _listenImagesFromWeb() async {
if (!kIsWeb)
return;
final String profileId = (await FirebaseAuth.instance.currentUser()).uid;
final completer = Completer<List<String>>();
InputElement uploadInput = FileUploadInputElement();
uploadInput.multiple = true;
uploadInput.accept = 'image/*';
uploadInput.click();
uploadInput.addEventListener('change', (e) async {
final files = uploadInput.files;
Iterable<Future<String>> resultsFutures = files.map((file) {
final reader = FileReader();
reader.readAsDataUrl(file);
reader.onError.listen((error) => completer.completeError(error));
return reader.onLoad.first.then((_) => reader.result as String);
});
final results = await Future.wait(resultsFutures);
completer.complete(results);
});
//* need to append on mobile safari
document.body.append(uploadInput);
final List<String> images = await completer.future;
this.setState(() {
_isLoading = true;
});
await addFilesToStorage(widget.agreement.id, images, profileId);
uploadInput.remove();
}
await _listenImagesFromWeb().then((value) =>
setState(() {
images = loadImage();
})
);
updateState();
}
floatingActionButton: kIsWeb
? SpeedDial(
animatedIconTheme: IconThemeData(size: 22.0),
child: Icon(Icons.add),
closeManually: false,
children: [
SpeedDialChild(
child: Icon(Icons.photo_library),
label: translate('agreement.image_uploader.select_images_button', context: context),
onTap: () => _callAddImagesFromWeb(context)),
],
)
: SpeedDial(
animatedIconTheme: IconThemeData(size: 22.0),
child: Icon(Icons.add),
closeManually: false,
children: [
SpeedDialChild(
child: Icon(Icons.camera_alt),
label: translate('agreement.image_uploader.take_picture_button', context: context),
onTap: () => _addMultiplyFile(context, true)),
SpeedDialChild(
child: Icon(Icons.photo_library),
label: translate('agreement.image_uploader.select_images_button', context: context),
onTap: () => _addMultiplyFile(context, false)),
],
),
Error: Not found: 'dart:html'错误:未找到:'dart:html'
I would use this nice project [https://pub.dev/packages/universal_html] which does exactly what you need, if you follow their instructions:我会使用这个不错的项目 [https://pub.dev/packages/universal_html],如果您按照他们的说明进行操作,它可以完全满足您的需求:
Just replace dart:html imports with package:universal_html/html.dart.
只需将 dart:html 导入替换为 package:universal_html/html.dart。 In browsers, dart:html will be automatically used.
在浏览器中,dart:html 将被自动使用。
And it will make sure that code compiles both on web and mobile targets.它将确保代码在 web 和移动目标上都能编译。 It would automatically import dart:html in case of web and in case of mobile it would offer dummy functions.
如果是 web,它将自动导入 dart:html,如果是移动设备,它将提供虚拟功能。
I am using flutter for mobile and web app.我正在使用 flutter 移动和 web 应用程序。 I need to upload photos from both the mobile application and the web browser.
我需要从移动应用程序和 web 浏览器上传照片。 There are no problems for the mobile application, everything works, and for the web version, the following solution was invented: I created a method for the web app so that photos can be uploaded from the desktop.
移动应用程序没有问题,一切正常,对于 web 版本,发明了以下解决方案:我为 web 应用程序创建了一个方法,以便可以从桌面上传照片。 For this I used
import 'dart:html';
为此,我使用了
import 'dart:html';
, but if i try to run everything works fine in a web browser, but if I run it on a mobile application now, I get a bunch of errors saying that web imports (html) cannot be compiled. ,但是如果我尝试在 web 浏览器中运行一切正常,但是如果我现在在移动应用程序上运行它,我会收到一堆错误,说 web 导入(html)无法编译。
I read the following issue, which said that you simply can't call HTML methods in a mobile application.我阅读了以下问题,其中说您根本无法在移动应用程序中调用 HTML 方法。 I forbade calling HTML methods if the application does not run in a web browser, but the result the same:
如果应用程序不在 web 浏览器中运行,我禁止调用 HTML 方法,但结果相同:
import 'dart:html';
Future<void> _listenImagesFromWeb() async {
if (!kIsWeb)
return;
final String profileId = (await FirebaseAuth.instance.currentUser()).uid;
final completer = Completer<List<String>>();
InputElement uploadInput = FileUploadInputElement();
uploadInput.multiple = true;
uploadInput.accept = 'image/*';
uploadInput.click();
uploadInput.addEventListener('change', (e) async {
final files = uploadInput.files;
Iterable<Future<String>> resultsFutures = files.map((file) {
final reader = FileReader();
reader.readAsDataUrl(file);
reader.onError.listen((error) => completer.completeError(error));
return reader.onLoad.first.then((_) => reader.result as String);
});
final results = await Future.wait(resultsFutures);
completer.complete(results);
});
//* need to append on mobile safari
document.body.append(uploadInput);
final List<String> images = await completer.future;
this.setState(() {
_isLoading = true;
});
await addFilesToStorage(widget.agreement.id, images, profileId);
uploadInput.remove();
}
await _listenImagesFromWeb().then((value) =>
setState(() {
images = loadImage();
})
);
updateState();
}
floatingActionButton: kIsWeb
? SpeedDial(
animatedIconTheme: IconThemeData(size: 22.0),
child: Icon(Icons.add),
closeManually: false,
children: [
SpeedDialChild(
child: Icon(Icons.photo_library),
label: translate('agreement.image_uploader.select_images_button', context: context),
onTap: () => _callAddImagesFromWeb(context)),
],
)
: SpeedDial(
animatedIconTheme: IconThemeData(size: 22.0),
child: Icon(Icons.add),
closeManually: false,
children: [
SpeedDialChild(
child: Icon(Icons.camera_alt),
label: translate('agreement.image_uploader.take_picture_button', context: context),
onTap: () => _addMultiplyFile(context, true)),
SpeedDialChild(
child: Icon(Icons.photo_library),
label: translate('agreement.image_uploader.select_images_button', context: context),
onTap: () => _addMultiplyFile(context, false)),
],
),
Error: Not found: 'dart:html'错误:未找到:'dart:html'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.