Integrate an App Widget into an ionic project - ionic-framework

I'm developing an app widget on Android Studio beside an ionic project.
My goal is to to integrate my app widget into the ionic project permitting users having access to the widget by downloading the app.
I started copying pasting some file into the folder platform/android/src
but I get the error package R does not exist.
I don't know if it is the right way to do it.
If so, which library shall I import to fix this error. I already tried the android.jar from the android-sdk.
Is there any other easiest way to achieve this?
I just want to precise that the widget doesn't communicate with the ionic app, it make just http request to a Rest API.

It is because the hybrid does not have the Class R that manages that part. I'll leave some examples of how I do.
Instead of using R.layout.new_app_widget
context.getPackageName(),context.getResources().getIdentifier("new_app_widget", "layout",context.getPackageName());
or
context.getResources().getIdentifier("new_app_widget", "layout",context.getPackageName());
Instead of using R.id.btn_action
context.getResources().getIdentifier("btn_action", "id",context.getPackageName());
Instead of using R.string.app_name
context.getResources().getIdentifier("app_name", "string",context.getPackageName());
Instead of using R.drawable.icon
context.getResources().getIdentifier("icon", "drawable",context.getPackageName());

Related

Firebase 9 & Flutter: How to initializeApp?

I am desperately trying to figure out how to initializeApp with Flutter (not React Native).
I know about the functions to use, but I can not find the firebaseConfig I need to pass into the function.
And no matter what I search for, every resources references to React Native, like as if nobody codes with Flutter since Firebase 9 has been released anymore (or I am the only dummy which is not able to resolve this by myself).
Can someone tell me where to get the firebaseConfig object from?
If I add a new app to my project, I only get the google-services.json, which does NOT include the firebaseConfig object I need to pass.
I understand your confusion now, let me explain. When the guy in the video talks about Firebase v9 he is talking about the SDK version which in the case of Javascript (which I suppose is his main topic in his channel) is currently 9.17.1 an the version 9 has been around since 2021 so it is not new. The different SDKs have their own versions for each platform so thinking it will be the same in every SDK is a mistake by itself. You can check the SDKS here. So there is no Firebase v9, there is a Firebase SDK for javascript version 9. They managed in that way in javascript and in flutter it is not the same. Being that the last update in the flutter SDK was literally yesterday I'm pretty sure they have their reasons to not implement the same functions in flutter since 2021.
Now, one of the thinks the guy talks in the video is deconstructing, which is something common in javascript. The way you do this in flutter is by using show.
So you would be doing this for example:
import 'package:cloud_firestore/cloud_firestore.dart' show FirebaseFirestore, QuerySnapshot; //Add everything you would be using
This way only the specific parts of the library will be imported and the amount of code the Dart VM has to load will be reduced.
As of the access to documents, it is still the same but you can easily create a helper class that contents your references to your collections and then just use that class to reduce the boilerplate code created by the firebase SDK.
You have to install the Firebase CLI and run firebase init.
You need to use the package firebase_core that will give you access to the class Firebase so you can use it to initialize your app Firebase.initializeApp() you can pass the default options for the current platform using Firebase.initilizeApp(options: DefaultFirebaseOptions.currentPlatform) usually your IDE will automatically import the corresponding package but in case it does not you would have to import 'firebase/firebase_options.dart';
An useful link to the documentation: Add Firebase to your Flutter App

Error in Custom Widget of FlutterFlow: "Target of URI doesn't exist: 'package:video_video_player.dart'"

I am following a tutorial to use Custom Widgest in FlutterFlow, re-using dependencies from pub.dev. However many people in the YouTube comments (including myself) hit an error whilst trying to compile the custom widget. The widget is an official Flutter.Dev widget for a video player.
I have tried searching for this error, however most responses involve installing more packages and restarting Android Studio etc, however this error is happening within FlutterFlow itself, which I haven't seen an answer for.
Original tutorial:
https://www.youtube.com/watch?v=jM2gwA2VHyc&ab_channel=JamesNoCode
Pub.dev link:
https://pub.dev/packages/video_player/example
Thankyou in advance!
First pf all you have to add dependenc of video player imleft side you are suggested to add video player dependency forst of all add it and you can esaily use it.
You can simply ignore the error because FlutterFlow can't detect the dependency in real-time.
Just hit Compile & Preview button and it magically works.

Flutter Web - how to test flutter web application opens in Chrome on desktop?

There is a button on a web page that makes an API call to third party application. And in return third-party application gets rendered on a web page.
Now, the third-party application (https://goknow.me/#/) is developed in flutter and I know nothing about flutter. I'm using java, selenium and webdriver for end to end testing. I'm using same set of tools for the rest of the application and it's working fine.
While inspecting in chrome, the DOM look like this:
Flutter application has a form and I want to find an element so that I can send inputs during testing automation. By searching online I found this appium-flutter-driver. I've also included the required jar in my project. With selenium webdriver I'm not able to find an element in flutter application that renders in Chrome browser on desktop.
Here's the code:
import pro.truongsinh.appium_flutter.FlutterFinder;
import pro.truongsinh.appium_flutter.finder.FlutterElement;
protected FlutterFinder find;
WebElement iframe = driver.findElement(By.xpath("//iframe[#id='know-iframe']"));
driver.switchTo().frame(iframe);
find = new FlutterFinder(driver);
FlutterElement elm = find.text("Email");
elm.click();
elm.sendKeys("hello world");
During testing automation I want to select fields in form and send inputs to those fields.
How to find an element in flutter web application that renders in another web application in Chrome browser on desktop?
Flutter Web is very different from normal web frameworks such as React or Vue. Looking at the official doc, it renders either into HTML elements (but still not the usual elements you see everyday), or directly draw onto a Canvas.
In addition, since it is a third-party app, it is mostly likely that you are not able to change their code. Thus, your appium-flutter-driver mostly will not work, because it says:
Under the hood, Appium Flutter Driver use the Dart VM Service Protocol with extension ext.flutter.driver, similar to Flutter Driver, to control the Flutter app-under-test (AUT).
You know, Dart VM service is only available when you run the Flutter app by source code in debug mode, or at least when you have control to the source code.
Therefore, my suggestion is: Can you treat the Flutter application as a "picture" instead of a DOM tree, and try to locate the buttons?
you can try using io.github.sukgu that helps you to work on the shadow elements. I was able to automate the scenario that you mentioned. Below is the detailed code.
Step 1 add the below dependency
<!-- https://mvnrepository.com/artifact/io.github.sukgu/automation -->
<dependency>
<groupId>io.github.sukgu</groupId>
<artifactId>automation</artifactId>
<version>0.1.3</version>
</dependency>
Step 2 use the below import in the test file
import io.github.sukgu.*;
Step 3 Below is the entire code that worked for me
WebDriver driver = new ChromeDriver();
driver.get("https://goknow.me/#/");
WebDriverWait wait = new WebDriverWait(driver,20);
wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.id("know-iframe")));
Shadow shadow = new Shadow(driver);
WebElement emailField = shadow.findElement("input[id='email']");
emailField.sendKeys("hello world");
Flutter team recommends using Flutter for "app-centric experiences" as "Progressive Web Apps, Single Page Apps, Existing Flutter mobile apps", but Flutter web app can also be embedded in a iframe tag.
They say:
At this time, Flutter is not suitable for static websites with text-rich flow-based content. For example, blog articles benefit from the document-centric model that the web is built around, rather than the app-centric services that a UI framework like Flutter can deliver.
You can read more about how a Flutter web app is deployed here.
When a Flutter app is built for the web, the page is rendered in 2 ways:
HTML renderer (on mobile browsers)
CanvasKit renderer (on desktop browsers)
I hope now you know a little more about Flutter framework. 🙂

How to use deep link in flutter web using navigator 2.0 on my webserver?

I can refresh(reload) and deep link when I launch debug in IDE(vscode)
However when I published to own webserver(I made web resource from this command 'flutter web build'), My webserver is intercept my url and return 404.. :(
It can enter from main page only
Webserver is runing on golang and Flutter web using navigator 2.0
How can I solve this?
I can't find reference of flutter navigator 2.0 in web.
Please save my life
The problem because removed hash(#) in url
I was follow this
How to remove hashtag (#) from url in web flutter
but this is cause that problem
When I back to original url(include hash), problem solved.
Please have a look at this code sample that uses new MaterialApp.router() constructor to handle url path.
In the parseRouteInformation of the RouteInformationParser you get the raw url and it's up to you how are you going to interpret the data. For instance, in the above sample the route is converted to object TheAppPath and later handled by RoutePageManager and RouterDelegate.

Flutter Adding Account with AccountManager?

Query
I want to adding account with AccountManager in Flutter.
I have googled but I found in Android not in Flutter; I found flutter package:
https://pub.dev/packages/account_manager_plugin
this package get all account but never to add new account.
any body help me...
Currently, there is no available plugin that has all the features of Android’s AccountManager. You’ll either have to dive into its source to jumpstart and create your own plugin, wait for one to be available, or integrate your own Android-specific code.