I'm trying to check if the user is using an InPrivate/incognito mode on Flutter web. The code from here appears to be working.
The JS code is as follows (partial code):
var detectIncognito = function () {
return new Promise(function (resolve, reject) {
var browserName = "Unknown";
function __callback(isPrivate) {
resolve({
isPrivate: isPrivate,
browserName: browserName,
});
}
in Flutter when I call this function:
var res = js.context.callMethod('detectIncognito');
'res' shows up as a 'JSObject ([object Promise])'
How should I proceed?
The complete code, with minor edits, from #aminjafri-dev's detailed analysis is:
#JS()
library detectIncognito;
import 'dart:js_util';
import 'package:flutter/material.dart'; // for debugPrint
import 'package:js/js.dart';
#JS()
#anonymous
class DetectIncognitoResult {
external bool get isPrivate;
external String get browserName;
external factory DetectIncognitoResult({bool isPrivate, String browserName});
}
#JS()
external DetectIncognitoResult detectIncognito();
Future<bool> checkPrivateBrowsing() async {
bool isPrivate = false;
await promiseToFuture(detectIncognito()).then((result) {
isPrivate = result.isPrivate;
debugPrint('${result.browserName}'); // I dont need this returned
});
return isPrivate;
}
and called as
bool isPrivate = await checkPrivateBrowsing();
Related
I'm trying to make a package. I need to use async function, but I can't use it while building package.
Package Code:
class Sozluk {
wiki(ceviri) async {
var res = await http.Client()
.get(Uri.parse('https://sozluk.gov.tr/gts?ara=$ceviri'));
var body = res.body;
var decoded = jsonDecode(body);
var json = decoded[0];
var sozlukanlam = json["anlamlarListe"][0]["anlam"];
print(sozlukanlam);
return sozlukanlam;
}
}
Test Code:
void main() {
test('köpek', () {
final sozluk = Sozluk();
var cevap = sozluk.wiki('köpek');
print(cevap);
});
}
The print I got:
Instance of 'Future<dynamic>'
You code is missing a lot of pieces. Just because Dart allows you to write code like a sloppy web developer, does not mean you should. Dart is strongly typed, that is an advantage, please use it.
Problems:
ceviri has no explicit type.
wiki has no explicit return type.
wiki is not awaited
Your anonymous method is not async.
More information about Futures, async and await: What is a Future and how do I use it?
Fixing your code as good as possible:
class Sozluk {
Future<TYPE_X> wiki(TYPE_Y ceviri) async {
var res = await http.Client()
.get(Uri.parse('https://sozluk.gov.tr/gts?ara=$ceviri'));
var body = res.body;
var decoded = jsonDecode(body);
var json = decoded[0];
var sozlukanlam = json["anlamlarListe"][0]["anlam"];
print(sozlukanlam);
return sozlukanlam;
}
}
Test Code:
void main() {
test('köpek', () async {
final sozluk = Sozluk();
var cevap = await sozluk.wiki('köpek');
print(cevap);
});
}
Please note that you need to fill in TYPE_X and TYPE_Y, I have no idea which datatypes best represent your data. Is it a number? A text? You decide.
Yout question is unclear.
If you need to print
sozlukanlam
var in test function you need to await your wiki function becaus it is async.
So you could do somthing like that:
void main() {
test('köpek', () async {
final sozluk = Sozluk();
var cevap = await sozluk.wiki('köpek');
print(cevap);
});
}
OR, if test function couldn't bee async
void main() {
test('köpek', () {
final sozluk = Sozluk();
sozluk.wiki('köpek').then((sozlukanlam)=>print(cevap));
});
}
I have an API (which does work and returns a response, and I even can see the response 1 line above the return statement), but for some reason, when the data should be passed to the variable, I receive null, instead of the returned value.
the service DOES return data I DO get the value from the API, at least it shows that there is data in the variable before the return.
The resp variable, which should contain the data, shows that the value is empty.
api_service.dart <= Returns a value
import 'dart:io';
import 'package:http/http.dart' as http;
import 'dart:convert';
class RemoteServices {
static var client = http.Client();
static Future sendImageForAnalysis(String filename) async {
var request =
http.MultipartRequest('POST', Uri.parse("http://10.0.2.2:8000/api"));
request.files.add(http.MultipartFile('picture',
File(filename).readAsBytes().asStream(), File(filename).lengthSync(),
filename: filename.split("/").last));
var res = await request.send();
if (res.statusCode == 200) {
http.Response.fromStream(res)
.then((response) {
var dataAsJson = json.decode(response.body);
/* The variable from above does have data, it's not empty and none of the errors appears*/
return dataAsJson;
})
.catchError((error) => print('Something went wrong')) /* Error is not showing */
.whenComplete(() => print('Got data from the server'));
} else {
/* Code does not get here */
return {'name': 'x'};
}
}
}
controller_results.dart <= Shows null, instead of the value.
import 'package:face_search/services/api_service.dart';
import 'package:get/get.dart';
class ResultsController extends GetxController {
final data = {}.obs;
final name = ''.obs;
void getItemData(imagePath) async {
var resp = await RemoteServices.sendImageForAnalysis(imagePath);
print(resp); /* This is empty for some reason */
if (resp != null) {
data.value = resp;
}
}
}
You're missing a return before http.Response.fromStream(res).
Does the result of the api return json? If its return json why dont try to create a model for it and call the list on your controller so that you can freely know if its having a data to return.
I develop a web app in Flutter and I want to load a file from file system. In order to do that I use the following code:
static Future<Uint8List> chooseImage(dynamic parent, dynamic provider) async {
Uint8List uploadedImage;
final completer = Completer<List<String>>();
InputElement uploadInput = FileUploadInputElement();
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((_) async {
String result = reader.result as String;
uploadedImage = base64Decode(result.substring(22, result.length));
return reader.result as String;
});
});
final results = await Future.wait(resultsFutures);
completer.complete(results);
});
document.body.append(uploadInput);
final List<String> images = await completer.future;
parent.setState(() {
parent.pickedImage = uploadedImage;
});
uploadInput.remove();
return uploadedImage;
}
In my app I need to handle the case when the user press the Cancel button in this pop-up:
I have added listener for: onFocus, onSuspen, onSubmit, onEnded, onAbort but none of these events are triggered when that cancel button is pressed.
How can I handle the pop-up cancelation?
I've already answered to a similar question here
You can already find a way to manage this kind of event in the web implementation of the package file_picker.
Because depending of the browser you are using the cancel event might be managed differently the most generic solution would be to rely on a listener on the focus event from the window so when you will lose the focus on your file picker window without any data loaded, it will complete your future with a null value.
Code Sample
import 'dart:html' as html;
import 'dart:async';
Future<html.File?> pickFile(String type) async {
final completer = Completer<List<html.File>?>();
final input = html.FileUploadInputElement() as html.InputElement;
input.accept = '$type/*';
var changeEventTriggered = false;
void changeEventListener(html.Event e) {
if (changeEventTriggered) return;
changeEventTriggered = true;
final files = input.files!;
final resultFuture = files.map<Future<html.File>>((file) async {
final reader = html.FileReader();
reader.readAsDataUrl(file);
reader.onError.listen(completer.completeError);
return file;
});
Future.wait(resultFuture).then((results) => completer.complete(results));
}
void cancelledEventListener(html.Event e) {
html.window.removeEventListener('focus', cancelledEventListener);
// This listener is called before the input changed event,
// and the `uploadInput.files` value is still null
// Wait for results from js to dart
Future.delayed(Duration(milliseconds: 500)).then((value) {
if (!changeEventTriggered) {
changeEventTriggered = true;
completer.complete(null);
}
});
}
input.onChange.listen(changeEventListener);
input.addEventListener('change', changeEventListener);
// Listen focus event for cancelled
html.window.addEventListener('focus', cancelledEventListener);
input.click();
final results = await completer.future;
if (results == null || results.isEmpty) return null;
return results.first;
}
Sources
file_picker implementation
I have a flutter web where i have a JavaScript function like this:
async function doSomething(value) {
let x = await something(x);
return x
}
When I'm now in dart, I have:
final result = await js.context.callMethod('doSomething', ['someValue']));
This returns [object Promise] when I print it, but it does ignore await, does not have a .then function and is therefore not working with promiseToFuture either.
How can I wait for JavaScript to be executed?
Just await doesn't work for js.context.callMethod.
This must be added somewhere in your code, maybe like javascript_controller.dart
#JS()
library script.js;
import 'package:js/js.dart';
import 'dart:js_util';
#JS()
external dynamic doSomething();
and then
Future getSomething(String someValue) async {
var result = await promiseToFuture(doSomething());
return result;
}
Maybe use a Future builder to wait for JS to execute?
Future getSomething(String someValue) async {
var result = await js.context.callMethod('doSomething', [someValue]));
return result;
}
FutureBuilder(
future: getSomething(someValue),
builder: (context, snapshot) {
if (snapshot.hasData) {
var data = snapshot.data;
print(data);
} else {
return Loading();
}
});
Place it in index.html
<script src="script.js" defer></script>
In Script.js
async function showAlert(href,hashtag,quote) {
if (response) {
window.dartFunc("asd");
dartFunc("asd");
} else if () {
alert("error adding points");
}
else{
alert("error dialog close");
}
});
};
In your dart file in initstate()
setProperty(window, 'dartFunc', js.allowInterop(dartFunc));
sss() async {
await js.context.callMethod('showAlert', [
'',
'',
''
]);
}
String dartFunc(String str) {
Common.showToast('Music');
Common.showToast(str);
return 'Inside dartFunc: ' + str;
}
I tried the same method to do asynchronously from js file using async and used --promisetofuture in dart file but i am unable to wait until we get response from js file for flutter web
async function getPhoneNumber() {
let res = await someFunction to wait for someTime;
return res;
}
function somfunc() async{
var number = await
promiseToFuture(js.context.callMethod('getPhoneNumber'));
}
I´m trying mock the function getExternalStorageDirectory, but alway return the error:
"UnsupportedError (Unsupported operation: Functionality only available on Android)"
I´m using the method setMockMethodCallHandler to mock it, but the erro occurs before the method be called.
test method
test('empty listReportModel', () async {
TestWidgetsFlutterBinding.ensureInitialized();
final directory = await Directory.systemTemp.createTemp();
const MethodChannel channel =
MethodChannel('plugins.flutter.io/path_provider');
channel.setMockMethodCallHandler((MethodCall methodCall) async {
if (methodCall.method == 'getExternalStorageDirectory') {
return directory.path;
}
return ".";
});
when(Modular.get<IDailyGainsController>().listDailyGains())
.thenAnswer((_) => Future.value(listDailyGainsModel));
when(Modular.get<IReportsController>().listReports())
.thenAnswer((_) => Future.value(new List<ReportsModel>()));
var configurationController = Modular.get<IConfigurationController>();
var response = await configurationController.createBackup();
expect(response.filePath, null);
});
method
Future<CreateBackupResponse> createBackup() async {
CreateBackupResponse response = new CreateBackupResponse();
var dailyGains = await exportDailyGainsToCSV();
var reports = await exportReportsToCSV();
final Directory directory = await getApplicationDocumentsDirectory();
final Directory externalDirectory = await getExternalStorageDirectory();
if (dailyGains.filePath != null && reports.filePath != null) {
File dailyGainsFile = File(dailyGains.filePath);
File reportsFile = File(reports.filePath);
var encoder = ZipFileEncoder();
encoder.create(externalDirectory.path + "/" + 'backup.zip');
encoder.addFile(dailyGainsFile);
encoder.addFile(reportsFile);
encoder.close();
await _removeFile(dailyGainsFile.path);
await _removeFile(reportsFile.path);
response.filePath = directory.path + "/" + 'backup.zip';
}
return response;
}
As in pub.dev stated:
path_provider now uses a PlatformInterface, meaning that not all
platforms share the a single PlatformChannel-based implementation.
With that change, tests should be updated to mock PathProviderPlatform
rather than PlatformChannel.
That means somewhere in your test directory you create the following mock class:
import 'package:mockito/mockito.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:path_provider/path_provider.dart';
import 'package:path_provider_platform_interface/path_provider_platform_interface.dart';
import 'package:plugin_platform_interface/plugin_platform_interface.dart';
const String kTemporaryPath = 'temporaryPath';
const String kApplicationSupportPath = 'applicationSupportPath';
const String kDownloadsPath = 'downloadsPath';
const String kLibraryPath = 'libraryPath';
const String kApplicationDocumentsPath = 'applicationDocumentsPath';
const String kExternalCachePath = 'externalCachePath';
const String kExternalStoragePath = 'externalStoragePath';
class MockPathProviderPlatform extends Mock
with MockPlatformInterfaceMixin
implements PathProviderPlatform {
Future<String> getTemporaryPath() async {
return kTemporaryPath;
}
Future<String> getApplicationSupportPath() async {
return kApplicationSupportPath;
}
Future<String> getLibraryPath() async {
return kLibraryPath;
}
Future<String> getApplicationDocumentsPath() async {
return kApplicationDocumentsPath;
}
Future<String> getExternalStoragePath() async {
return kExternalStoragePath;
}
Future<List<String>> getExternalCachePaths() async {
return <String>[kExternalCachePath];
}
Future<List<String>> getExternalStoragePaths({
StorageDirectory type,
}) async {
return <String>[kExternalStoragePath];
}
Future<String> getDownloadsPath() async {
return kDownloadsPath;
}
}
And build your tests the following way:
void main() {
group('PathProvider', () {
TestWidgetsFlutterBinding.ensureInitialized();
setUp(() async {
PathProviderPlatform.instance = MockPathProviderPlatform();
// This is required because we manually register the Linux path provider when on the Linux platform.
// Will be removed when automatic registration of dart plugins is implemented.
// See this issue https://github.com/flutter/flutter/issues/52267 for details
disablePathProviderPlatformOverride = true;
});
test('getTemporaryDirectory', () async {
Directory result = await getTemporaryDirectory();
expect(result.path, kTemporaryPath);
});
}
}
Here you can check out the complete example.