I have flutter application which uses different webview plugin for each platform(mobile, web, window).
Though I am able to import platform base on web and mobile, I am not able to import for windows.
I have tried adding else condition if it is not mobile or web, but it is taking mobile plugin.
This is how I import package for web and mobile (Working).
import 'package:eam_flutter/form/mobileui.dart'
if (dart.library.html) 'package:eam_flutter/form/webui.dart'
as multiPlatform;
This is how I import package for web, mobile and windows (Not Working, it is showing mobile webview exception since it doesn't support desktop).
import 'package:eam_flutter/form/windowui.dart'
if (dart.library.html) 'package:eam_flutter/form/webui.dart'
if (dart.library.io) 'package:eam_flutter/form/mobileui.dart'
as multiPlatform;
How can I specify conditional imports for windows?
For anyone else finding this, note that the accepted answer is not an answer to the question that was asked. The answer to the question that was asked is that you cannot. There is no way to use conditional imports to get different behavior between mobile and desktop; see this comment from the Dart team.
Since there is no conditional import support for window since it comes under dart io.
I have this workaround and found it working.
I end up creating file for each platform with different package import.
import 'package:flutter/foundation.dart' show kIsWeb;
import 'dart:io' as io;
if(kIsWeb){
{
return WebPage(); //your web page with web package import in it
}
else if (!kIsWeb && io.Platform.isWindows) {
return WindowsPage(); //your window page with window package import in it
}
else if(!kIsWeb && io.Platform.isAndroid) {
return AndroidPage(); //your android page with android package import in it
}
//you can add others condition...
Maybe we no longer need conditional import.
Look at the code below:
import 'package:package1/package1.dart';
import 'package:package2/package2.dart';
const keepFunc1 = bool.fromEnvironment('KEEP_FUNC1');
dynamic result2;
void main() {
if (keepFunc1) {
result2 = Calculator1()..addOne(1);
} else {
result2 = Calculator2()..addOne(1);
}
runApp(const MyApp());
}
If KEEP_FUNC1 environment variable is not specified to true. The package1 and the class Caculator1 won't be packaged into apk or ipa.
For more details, see the answer I wrote here.
So we can import all packages and use a const environment value to decide what packages to import. The tree-shaking mechanism is smart enough to remove unused parts.
Check this example
you need to create 2 files one for web & another for os and use condition on import
Related
I have flutter 2.10 SDK but there is no documentation on native web Replacements. please anyone throw light on this issue.
What you need to do is to execute code based on the host platform.
First import the relevant headers
import 'dart:io' show Platform;
Using Platform APIs now you can detect the host platform and execute your codes for target platforms:
void myCode() {
if (Platform.isWindows) {
// do something specific for Windows here
} else {
// do something for other platforms
}
}
I see that Flutter has conditional import statements, but after looking at some examples I’m still confused.
If I want to have main.dart import package “package:xyz/xyz.dart” only when the user is on web, how can I achieve that in the simplest way? Thanks for any tips.
We could import a package only for the web users by the use of a conditional import:
import 'package:xyz/mobile.dart'
if (dart.library.html) 'package:xyz/web.dart';
The code above imports package:xyz/web.dart only if dart.library.html is available, which happens to be the case for the web platform.
As the time am asking this question, is there any official or an update that enables me to remove the # symbol in the flutter web app url.
I have seen some work arounds to achieve this but they end up causing other issues like: people not able to access the webpage without the hash # in the url
From this answer
There is a package call url_strategy in pub.dev. You only need to import in into pubspec.yaml and copy the code below into your main.dart file. It will remove the # in your flutter web URL
import 'package:url_strategy/url_strategy.dart';
void main() {
// Here we set the URL strategy for our web app.
// It is safe to call this function when running on mobile or desktop as well.
setPathUrlStrategy();
runApp(MyApp());
}
I am trying to make an anime app using Flutter. For that I needed an REST API but I fortunately found a dart API. The problem is I cannot understand how to incorporate it in my app. This would really help me reduce the work load.
I am attaching the github link.
https://github.com/charafau/jikan-dart
If you are talking about how to include a package in your flutter Application, then you need to do the following:
add the package dependencies in the pubspec.yaml file
Get the package by running pub get
and then import the packages in your app using import
steps by step instructions also available here: https://dart.dev/guides/packages
also if you check the utilization of the API in the example code, you can find this example:
import 'package:jikan_dart/jikan_dart.dart';
main() async {
var jikanApi = JikanApi();
var top = await jikanApi.getTop(TopType.manga, page: 2);
print('result $top');
}
I'm using Quasar and the PWA starter kit, with VueJS.
I want to know how to declare once a set of components used throughout many pages in a Vue app.
I seem to need to have a huge import declaration in every page
I tried to import once in main.js but there is a conflicting
import Quasar from 'quasar'
so I can't add to that or change it to
import {
Quasar,
QCard,
.... etc
} from 'quasar'
as the {} seems to break the import.
Also can't import twice (duplicate import error).
What is the way to import components once for a whole app?
Or get at the Vue object so it can be used in another way to import inside a different component?
You can import specific components to register globally in the main.js file when you register the Quasar plugin.
For example, in you want to be able to use the <q-btn> and <q-icon> components anywhere in your application you could do this:
import Quasar, { QBtn, QIcon } from 'quasar'
Vue.use(Quasar, {
components: { QBtn, QIcon }
})
Here's the documentation.