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.
Related
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. 🙂
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());
I'm trying to merge large existing web app into sails.js. so I moved the folders into assets and build a custom route , 'GET /': '/assets/client/launch.html' and get 404 when I point my browser to http://localhost:1337/ as the / is correctly redirected to http://localhost:1337/assets/client/launch.html which produces the 404.
Now the file exists in the folder assets/client (and in .tmp), so I am thinking the Sails router is getting in the way.
I would leave the client (70K lines of JS) that generates all the UI dynamically and sailjs server that provides authentication separate and enable CORS but my customer wants client packaged with server. This type of operation is simple in frameworks like ASP.NET MVC but am wondering if Sails is up to the task.
Well, If everything you tried did not work out. There might be another solution ,
First of all since you are talking about sails app I am assuming other bundle must be sails as well ,
So here is what you do-
Change the port for another app that you want to attach to this.
Second whenever you want to go to page on another app simply redirect the client to another port ie
in html or esp put a href tag with different port.
<a href="localhost:PORT/route_to_file">
</a>
I got it working by placing my app into assets where we need to launch from assets/client/index.html as there would be too many dependencies to change. As I said above could not just add a route as Sails must getting in the way. However as in Chapter 3.2.2 of Sails in Action I generated a static asset npm install sails-generate-static --save. then I redirected to assets/client/index.html. As an aside that book is great and would highly recommend it.
We have faced this type of problem.We are Developing phonegap app.We don't changed any code.But unfortunately my eclipse stop.And then we changed project location.then we open html page in browser.We got error like this
Please guide to us.
You can test your app inside a web server, that solved my problem, or you can simply delete "history.replaceState()" in your jquery.mobile.js file, if you don't use the browser history in your mobile app
Waiting for chrome developers to fix this issue from the last update.
very new at this. Could someone tell me what is the best method of submitting a form when using phonegap and JMQ? What I want to be able to do is passing the form data to a php file and then having the results passed back into app so that the user isnt directly accessing the php file at any point.
I found the following page link which basically does what I want but I keep getting "Origin null is not allowed by Access-Control-Allow-Origin" when testing out the code. So I'm guessing this will only work if the app is located on a server also?
Any happy would be great. thank <3
To test your solution on the computer you need to launch chrome from the terminal with the argument --disable-web-security. See this answer: Disable same origin policy in Chrome
In your Phonegap application you add a line of code to your config.xml in the www-folder: <access origin="*.yourdomain.com" />. Build, and you are now allowed to request all domains and subdomains from yourdomain.com. For more details on whitelisting see http://docs.phonegap.com/en/3.0.0/guide_appdev_whitelist_index.md.html#Domain%20Whitelist%20Guide
You are not able to make post through the local files, so Yes, you need to have it running in a Web Server.
But if you deploy your application, it should work either in a emulator or in your device.