Wikitude
How can we help you today?
Samples for Flutter / Wikitude Studio for Flutter
Wikitude Technical Support
Hi Nagyeong,
Thanks to you for using it!
I will try to answer the questions one by one:
1) The Flutter Samples that we are talking about are the ones in 2) https://github.com/Wikitude/wikitude-sdk-samples. We are preparing a Flutter application showing the usage of the plugin which will be delivered as soon as possible.
2) To execute those samples you need to copy them into a folder inside your Flutter project, import them in the .yaml file as an asset dependency (remember that Flutter requires to import all the specific folders, not only the root path of the example) and then call architectWidget.load(path, successCallback, failCallback). As said in 1) we are preparing a project with all this
3) Wikitude Studio is the tool you can use to generate an AR environment. Once it is created, you can export it and include it in your html project. Here is a little tutorial of how to use it: https://www.wikitude.com/external/doc/documentation/8.6/flutter/targetmanagement.html#image-targets
I hope you have some doubts taken away.
Thanks again,Aitor.
Thank you for your reply.
I copied '05_InstantTracking_1_SimpleInstantTracking' into my Flutter project folder, imported all of them in the .yaml file as an asset dependency, and wrote 'this.architectWidget.load("<<PATH TO>>/05_InstantTracking_1_SimpleInstantTracking/index.html", onLoadSuccess, onLoadFailed);' in onArchitectWidgetCreated() method and also in _incrementCounter() to see if the code works or not. However, I think I'm doing wrong because I still see 'Flutter Demo Home Page' only.
Also, thank you for your reply about Wikitude Studio and I'll be waiting for a Flutter application:)
Regards,
Nagyeong
Hi again,
Thank you for updating SDK for Flutter.
I remember you're preparing a Flutter application showing the usage of the plugin, but try to use the plugin by myself.
So I have additional questions with the updated version 8.7.0(released 2019.08.13).
1. In my opinion, there are a few things to be changed in Setup Guide(https://www.wikitude.com/external/doc/documentation/latest/flutter/setupguideflutter.html#setup-guide-flutter) according to the new version.
- A name of dependency should be changed from 'wikitude_plugin' to 'augmented_reality_plugin_wikitude' because the name in pubspec.yaml is changed.
- In case of importing the ArchitectWidget, it should be changed as well (Setup of the ArchitectWidget part)
Would you check them and tell me if I miss something?
2. I modified AndroidManifest.xml file according to Setup Guide Flutter page and it's the one in android\app\src\main folder. However, debug and profile also have AnroidManifest.xml file. Is it right?
3. I didn't have initState() method, so made it. I searched the Stateful Widget lifecycle, but have no idea why isn't initState() executed though build() is executed. Do you have any idea?
4. Truly confused about the ArchitectWidget initialization part.
Let me tell you what I did.
- I modified main.dart of the new basic flutter project and added architectWidget = new ArchitectWidget(
onArchitectWidgetCreated: onArchitectWidgetCreated, licenseKey: wikitudeTrialLicenseKey, startupConfiguration: startupConfiguration, features: [ "image_tracking", "geo" ], ); to _incrementCounter() because initState() wasn't executed.
architectWidget.load("index.html", onLoadSuccess, onLoadFailed); also to _incrementCounter(), and it was executed.
(*No parameter in onLoadSuccess and the method returns void. String parameter in onLoadFailed and the method returns void.)
However, when I checked the values related to load method by printing them, worldLoaded was Closure: () => void from Function 'onLoadSuccess':., worldLoadFailed was Closure: (String) => void from Function 'onLoadFailed':., _architectWidgetState was null.
- So I thought there was a problem here.
(in architect_widget.dart)
The value of them are as the below. (Printed license key, startupConfiguration, and features)
Now I'd like to ask you,
4-(1) Are worldLoaded and worldLoadFailed correct values? Can I use relative directory depending on assets to url of index.html?
4-(2) Would you tell in detail what I should write when initializing the ArchitectWidget? (Especially in onArchitectWidgetCreated and startupConfiguration)
It seems like information about the camera according to startupConfiguration.dart. How can I assign appropriate value to startupConfiguration?
Sorry for asking a lot. Please keep in mind I want to use your plugin!
Regards,
Nagyeong
Wikitude Technical Support
Hi Nagyeong,
I will try to answer your questions one by one,
1) You are right. We missed to modify the name in the examples of the documentation. We will apply those changes as soon as possible.
2) Yes, it is right. You just need to modify the manifest that is in the app/src/main folder to make it work.
3) initState() is an overriden method coming from the State class that we extend. In the next link: https://appdividend.com/2018/12/16/how-to-create-stateful-widget-in-flutter/ you can see a way of creating a proper StatefulWidget.
4) I can't see any of the images you sent. Can you please send then again? From what i can see in the code you send, you can't call architectWidget.load() without having knowledge that the widget has been created, so i recommend you to call the load method within the onArchitectWidgetCreated() callback that is sent when creating the ArchitectWidget.
On the other side, onLoadSuccess and onLoadFailed are returning Future<void>. Future means that the callback is asynchronous. An example of the callback could be:
Future<void> onLoadSuccess() async {
}
Future<void> onLoadFailed(String error) async {
showSingleButtonDialog("Failed to load Architect World", error, "Ok");
}
For the StartupConfiguration, you can check the class within the plugin so you know the values you can set. There are 3 parameters to set:
- CameraPosition which can be BACK = back camera of the device, FRONT = front camera of the device or DEFAULT = whatever the device chooses.
- CameraFocusMode which can be ONCE = camera focus will be changed once, CONTINUOUS = camera focus will be changed continuously or OFF = no camera focus.
- CameraResolution which can be SD_640x480, HD_1280x720, FULL_HD_1920x1080, AUTO and sets the camera resolution.
The StartupConfiguration values are enum, so you just need to choose one of them for every parameter.
I hope i clarify some of your doubts. Don't forget to send me the images again properly so i can check them.
Regards,
Aitor.
Hello Aitor,
Here's #4 again including images.
4. Truly confused about the ArchitectWidget initialization part.
Let me tell you what I did.
- I modified main.dart of the new basic flutter project and added architectWidget = new ArchitectWidget(
onArchitectWidgetCreated: onArchitectWidgetCreated, licenseKey: wikitudeTrialLicenseKey, startupConfiguration: startupConfiguration, features: [ "image_tracking", "geo" ], ); to _incrementCounter() because initState() wasn't executed.
Actual code is this
architectWidget.load("index.html", onLoadSuccess, onLoadFailed); also to _incrementCounter(), and it was executed.
(*No parameter in onLoadSuccess and the method returns void. String parameter in onLoadFailed and the method returns void.)
However, when I checked the values related to load method by printing them, worldLoaded was Closure: () => void from Function 'onLoadSuccess':., worldLoadFailed was Closure: (String) => void from Function 'onLoadFailed':., _architectWidgetState was null.
- So I thought there was a problem here.
(in architect_widget.dart)
The value of them are as the below. (Printed license key, startupConfiguration, and features)
Thank you for your reply and the link related to StatefulWidget.
I'll try again after reading your reply thoroughly.
Regards,
Nagyeong
Good morning,
I followed your reply 2, 3, 4 and modified quite a lot.
I don't know the reason but initState() worked well after I made the widget again. Thanks.
By the way, createState() of StatefulWidget(in my case, 'MyHomePage') is executed automatically, but createState() of ArchitectWidget(in architect_widget.dart) isn't executed automatically though the ArchitectWidget object is constructed.
For some reasons, I think it's related to adding object to build() method/that and need to figure out how to add ArchitectWidget object.
But have no idea about 'how to add ArchitectWidget object in overhidddeen build() method, as any ther Flutter widget'(https://www.wikitude.com/external/doc/documentation/latest/flutter/setupguideflutter.html#setup-guide-flutter). I only found samples or explanation related to Scaffold when searching in Google. Can you give some advices to me?
Also, Can I right relative path for index.html according to the asset directory?
This is my Flutter OutLine.
Thanks,
Nagyeong
Wikitude Technical Support
Hi Nagyeong,
Regarding the createState() method, it can be because you are not adding the widget inside the build() method of your HomePage. I will attach an example of how to implement it.
In lane 19, you have the declaration of the ArchitectWidget, then it is created within the createState() method in lane 34 and used as part of your view in the build() method in lane 75.
Another important step is to use the pause() and destroy() methods and to declare the onArchitectWidgetCreated() callback so you know when to start loading an example.
For the last question, yes, you can write a relative path as long as it is included in the .yaml file in the assets section.
Regards,
Aitor.
Hello Aitor,
Thank you for the example.
This is exactly what I was looking for.
Thanks again,
Nagyeong
Hi Marco,
I haven't tried Flutter Stack widget to replace CSS/JavaScript code.
If you're interested in it, you can start a new topic:)
Hi, I tested it using the flutter Stack widget and it seems possible to avoid using css and javascript for the UI. Do you think it can work as an alternative in a real app project look up here?
Oh yes, we are about to finish an app following this approach. we will publish it probably in May
Will we be getting an update to the samples? Flutter 3 and new versions of Android are having issues.
Nagyeong Yeo
Hi, firstly, thank you for supporting Flutter.
I want to develop an AR program using Flutter. To use Wikitude on it, I read the official webpages including setup/start guide, documents, index.html and readme files related to them. However, I'm having trouble even in starting.
* Currently, I followed Setup Guide Flutter(https://www.wikitude.com/external/doc/documentation/8.6/flutter/setupguideflutter.html) and succeeded to build with wikitude plugin package.
Here are some questions, and I'd be glad if you reply to them.
1. Official webpage https://www.wikitude.com/external/doc/documentation/8.6/flutter/
I'd like to execute samples, which all of the included are complete augmented reality experiences which run in Flutter Samples app(as stated in that page). If Flutter Samples means the file here(https://github.com/flutter/samples), how can I run Wikitude samples in them?
2. wikitude-sdk-samples-master(https://github.com/Wikitude/wikitude-sdk-samples)
- How can I execute official examples or tutorials, including sample files in SDK, in Flutter? Opening 'index.html' in desktop, or mobilephone doesn't work.
- For example, in case of '05_InstantTracking_1_SimpleInstantTracking'(in wikitude-sdk-samples-master), should I translate JavaScript file in '/js' folder to Dart language by myself? Or is there any demo file which can be executed directly?
3. What I want to implement is 'Instant Tracking' function(0:22-0:34 in https://www.youtube.com/watch?v=bPqYoa0gY2M) in the Flutter App.
- What is the difference between Wikitude Studio and not using it?
- If I don't use Wikitude Studio, does it mean download SDK(Wikitude_Flutter_Plugin_8-6-0_0-0-1_2019-07-16_12-11-03) and write codes, using files in that folder, in Android Studio(Flutter)?
- If I use Wikitude Studio, how can I import it to Android Studio(Flutter)? Exporting the project to Android Studio?
Sorry for many questions, it's because I'm new to this kind of project and there is little information for FlutterXWikitude.
Regards,
Nagyeong