Can flame components (flutter flame) be widgets within a Flutter app? - flutter

Can flutter flame (https://flame-engine.org/) be used to create a "flame widget" which can be used within a Flutter app? (i.e. as opposed to having a full flame game, for which you might do flutter widget overlays)
For example say you had a Flutter app, but say within Screen/Page XXX one wanted to have a clock widget (analogue). So in this case in terms of in Flutter how you would create the graphics for an analogue clock could Flame be used for this?
If yes are there any examples of how to do this? (be trying to find some with no success so far, so not sure).

All Flame games are added to the GameWidget, and this GameWidget can be put anywhere inside of your Flutter widget tree.
Do note that if you don't want your game to be reset when the widget tree is rebuilt, keep a reference to is outside of the GameWidget.
final game = YourGame();
/// Your flutter widget tree
...
child: GameWidget(game: game);
...
For the specific example you had with an analogue clock it might be possible to use a SpriteAnimationWidget.

Related

Flutter : Samsung Galaxy Watch 4 Classic - Rotating Bezel

So, I am using wear plugin for this, the first exciting thing I wanted to try out was scrolling through a ListView or a PageView using the rotating bezel. But that didn't happen. I searched too, but didn't find anything for flutter.
Is setting up a custom method channel the only way for now? Are there any details I'm missing out on?
UPDATE : Native method requires a View object to use view.setOnGenericMotionListener. Since flutter renders it's own views, I can't access it via method channel. Please correct me if I'm wrong and if it's possible to put a listener on the view generated by flutter itself.

Animation in iOS 14 widget

I can't find solution to implement kind of ProgressBar in Widget. I see, that Text component should be changed if has type .timer for example. I see default widget Clock, with nice animation of moving arrow. But am I able to implement custom animation in widget?
According to a Frameworks Engineer on Developer Apple Forum:
Animations and pan/zoom gesture do not work in widgets built with WidgetKits. Checkout https://developer.apple.com/videos/play/wwdc2020/10028/, where what works and doesn't.
Throughout the WWDC20 Meet WidgetKit video mentioned above, Apple stresses that Widgets are not mini-apps, so they don't support gesture based views (like scroll views) or animations. Widgets are meant to only have glanceable information. From WWDC20 Meet WidgetKit Video Transcript:
These widgets are not mini-apps. We do not support scrolling within the widget, interactive elements like switches and other system controls, nor videos or animated images.

How to make this user interface

I'm trying to learn how to develop Flutter application and I want to know how to make user interface in Flutter like what is shown in the picture
I'm not going to just give you the code to make this UI, but I'll help you. I'd recommend a GridView with a crossAxisCount of 3 so you can align the buttons like this. Then I'd separate out the 0 button and surround it with a Center widget so that it's centered.
If you're just learning, I suggest making simple UIs first to get a grasp of how the framework works, then you can move to intermediate UIs like this one.

Does flutter take care of all screen sizes

I had an app idea and i want to develop it in either flutter or react native. I chose flutter because I want to learn a new language (Dart) and i know it's still in beta but I don't need to care about a lot of users for at-least 2-3 months since i am gonna learn dart first and then develop it. So my question is
Do i have to take care of different screen sizes just like in android or does flutter handle that for me?
Do i have to take care of API levels like android or does flutter take care of that? Thank you.
Do i have to take care of different screen sizes just like in android or does flutter handle that for me?
Like Android, Flutter use DP as unit when sizing it's widgets. So pixel density has no effect.
On the other hand, you still have to make your app "responsive".
Flutter provides a few widgets that help. Such as AspectRatio.
Do i have to take care of API levels like android or does flutter take care of that? Thank you.
Usually, no. There's a plugin for quite a lot of the "low level api".
Sometimes you may need one that hasn't been implemented yet. And you'll need to create it yourself using Platform Channel. You can find help here
This is a late answer, but I hope it will help someone
In responsive UI we don’t use hard-coded values for dimension and
positions.
Use MediaQuery to get the real time size of the window.
Use Flexible and Expanded widgets to get a flexible UI that works
with percentage rather than hard coded values.
Use LayoutBuilder to get the ConstraintBox of the parent widget.
You can get the orientation of the device using MediaQuery or
OrientationBuilder.
from this article
Yes, you have to adjust the size of the UI according to screen size, you can use.
MediaQueryData media = MediaQuery.of(context);
var size = media.size;
this will give you screen size of the device.

How to make dart Widgets fully transparent to see platform native view under FlutterView?

I want to create a video chat app, using some platform native SDK like WebRTC to implement the video part, using flutter to implement other interactivity, how could I achieve that?
In Android, I try to hook the createFlutterView method, create a FrameLayout to hold the FlutterView and other native views under FlutterView, and make it as Activity's content view by setContentView.
FlutterView is a subclass of SurfaceView, so I can make it transparent like this:
flutterView.setZOrderOnTop(true);
flutterView.getHolder().setFormat(PixelFormat.TRANSPARENT);
To make FlutterView's surface background transparent, I declare android:colorBackground as #00000000 in my theme, according to FlutterView's source code.
With those setup, I can see the view under FlutterView for a short period, after that it's covered by Widgets declared in dart code. I think that short period is the dart code load time.
To verify that, I create a pure Android project with the same views as above, but without any dart code. In that project, views under FlutterView show well all the time.
So, my question is, how to make dart Widgets fully transparent to see platform native view under FlutterView?