How to access window.navigator.serial in flutter web - flutter

On some browsers there exists the the property serial on the window.navigator object.
I can see it on chrome but not on safari.
How can I access that object via dart in flutter web?
dart:html doesn't seem to include it. Is there a way to manually extend the window.navigator object to include it?

In the end I didn't access the window.navigator object from dart.
I access the serial and do all of the checks in javascript.
I use Js context to get data back from the Javascript.

Related

Flutter: Localization from API call

I wish to localize a Flutter application where locales are fetched by an API call, given the requested language.
I was hoping to be able to use the Intl package or something similar, but I am not sure this is possible without the .arb files.
Any ideas on how to accomplish this without reinventing the wheel?
(Having the localizations stored locally is not an option)
Down below, you can see a class which is converted to a singleton pattern. You can use any service locator package. It will be the same thing.
Now you can call this class in your main function, default set to EN.
Now let's say, you want to support SPANISH and not want to use .arb files
Now you can call google translate and replace values with the existing one. for every variable. I hope this helps.
Use https://pub.dev/packages/localizely_sdk package, it provides what you want to achieve
Turns out easy_localization has the functionality described. Simply creating a custom HttpAssetLoader and passing it to the easy_localization initialization method works out of the box, and provides device language detection, and application rebuild on locale change as intended.

Flutter Web Get Chrome Extension info from Polkadot.js web3Enable

I am hoping to confer on a strategy for a flutter web app (as can ignore mobile cases here) to get chrome extension info for a Polkadot.js wallet from the Polkadot browser extension.
My first thought is to use dart's JS library and use the Polkadot extension JS package and then try and pull the info from there. However, I'm not sure how to properly use this in flutter as it is a whole package full of dependencies, not just a single JS file. Also it is in TS not JS. Any thoughts here?
Eg., I need a JS file to be able to call this; and for flutter to in turn call the JS file:
import {
web3Enable,
} from '#polkadot/extension-dapp';
By writing out a "bridging" layer, you can do it easily.
Firstly, create a normal javascript (or typescript) application (nothing related to Flutter). You should be able to happily use the polkadot lib in your js/ts code without any problem. You may need to learn a bit about how to develop js code normally (e.g. you can depend on polkadot using npm, etc).
One small thing is that, you should "expose" some object publicly in your js/ts code. For example, your code may look like window.myFancyFunction = function() { call_some_polkadot_function(); }. Of course you can do more things like exposing other functions/objects/...
Then, you can bundle this normal js/ts application into a .js file. This is still very normal for js/ts developers and should have nothing special to deal with here, and you still do not need to touch Flutter at this stage.
Next, load this single-filed .js file when you are loading your Flutter Web application. You may simply do this by editing your Flutter Web's html file and add <script src="my_single_filed_js_mentioned_above.js" />. Notice that, when loading this script, it simply sets window.myFancyFunction and does not do anything more. Still very trivial here, should have no problem.
Lastly, in your Flutter Web code, i.e. Dart code, call that window.myFancyFunction function. For example, Flutter Web : How to run javascript using dart js says you can do import 'dart:js' as js; js.context.callMethod('myFancyFunction', ['some arguments']);

There is any method for webview cache Optimization in flutter?

I use flutter_inappwebview for fetching the website into the flutter app. I want to save all the resources like JS and CSS file content into the cache from website during webview start and then when I call same website the resources will intercept and inject the cached files into the webview. Is this possible.. If possible then how.. please explain with example. Thank you.
note: caching is already enabled for this plugin by default. but what you're asking is offline-mode which flutter_inappwebview plugin does not support yet.
the cache you're refering to is not the cache that browsers use (mobile or desktop) what you're refering to is basically called offline-mode in the world of browsers.
in regard to the flutter_inappwebview plugin there is already an issue (or two) about this feature you're looking for. and i believe it is not implemented yet.
you should keep an eye on these github issues issue-561 & issue-366
That flutter_inappwebview package has already a property, cacheEnabled with default parameter, true. You don't need to do anything about this. If you don't want to store cache files, then you can set it to false.
///Sets whether WebView should use browser caching. The default value is `true`.
///
///**NOTE**: available on iOS 9.0+.
bool cacheEnabled;
And, the clearCache property with the default value, 'false'.
///Set to `true` to have all the browser's cache cleared before the new WebView is opened. The default value is `false`.
bool clearCache;

How do I get the proxy settings of an android/ios device using flutter?

I am trying to build an app using flutter and I would like to know how to retrieve the proxy settings of the device through flutter.
It's probably safe to assume that the HttpClient doesn't pick this up automatically, but you might want to test that.
So, now you need to interact with native code using plugins. There is already a rich library of plugins providing everything from battery level to video player. I can't see proxy in there anywhere, so you need to write your own plugin (which is just one of the standard flutter project types: app, package (just Dart code allowed) and plugin). A plugin is a bit like a package (other projects can depend on it) but includes native code too. It also includes a mini-app so that you can test your plugin code while developing it.
Your plugin will end up being similar to the existing Connectivity plugin, so you may want to copy from there. In your Android method implementation you will replace
NetworkInfo info = manager.getActiveNetworkInfo();
with
ProxyInfo defaultProxy = manager.getDefaultProxy();
You have return two values, the host name and the port, so put these in a Map
Map<String, String> map = new HashMap<String, String>();
map.put("host", defaultProxy.getHost());
map.put("port", Integer.toString(defaultProxy.getPort()));
result.success(map);
Bonus points if you submit your changes to the Connectivity plugin.

How to access global object in ember-cli app

In a regular emberjs app you can do
App.__container__.lookup("controller:application")
How can I achieve this is the latest version of ember-cli? I can't see any global application object to refer to.
Say you generated your app like this:
ember new kittens
Your debug statement would be:
Kittens.__container__.lookup("component:bootstrap-datepicker")
In Ember CLI when you define an initializer you can do something like:
ember generate initializer my-cool-init
And in the file: app/initializers/my-cool-init.js have something like:
export default {
name: 'my-cool-init',
initialize: function initialize(container/*, application*/) {
var foobar = container.lookup('controller:application');
// inject or preload stuff etc
}
};
http://emberjs.com/api/classes/Ember.Application.html#toc_initializers
http://emberjs.com/guides/understanding-ember/dependency-injection-and-service-lookup/
2 options
Ember Inspector Chrome extension
Use ember-export-application-global addon to expose your app as a global variable
Ember Inspector Chrome extension
Check out the Ember Inspector on the Chrome web store. It is a Chrome extension that provides debugging and inspection tools for your Ember app.
You can visually access the container, your current view hierarchy, a list of your Ember-Data store's contents, etc.
For example, if you open the inspector on discuss.emberjs.com you can see that there are 11 controllers and you can inspect each one to see their attributes. You can even send the objects to the console so you can play with them programmatically.
Use ember-export-application-global
The other way is to use the ember-export-application-global ember-cli addon package. This package sets a global variable that contains the reference to your application. This allows you to access the container the way you originally mentioned.