Flutter widget preview - flutter

Let's suppose i am debugging an already built app and i needed to see the widget/screen and how it looks(without running the application and going through all the different screens to reach the desired one) ,
i know there is an annotation (#preview) in jetpack compose for native android to preview the widget in question isolated from the whole app ,
in the meantime to preview a certain widget i put it in
void main() => runApp(ParticularScreen());
is there any other option ?
ps : i think there is a plugin for vs code called preview
https://marketplace.visualstudio.com/items?itemName=jamesblasco.flutter-preview
i am looking for exactly the same but with android studio

Related

How to make the flutter app shows as it's an IOS version app inside android

I have a flutter app on an android device, it shows the app with the android adaptive things such as the date picker, the app bar, the dialogs...
I want to try a version of the app like it's on IOS, I mean I want that date picker shows as the IOS's, also for the app bar.
I'm pretty sure that this is related to the MediaQuery, but I just don't know what is it.
I know that I can show forcefully the widgets from the Cupertino library, however, I don't want to do it, I want just to get how the app will show when it runs on IOS with the current code.
Thank you !
Wherever you're setting your theme, you can simply set the platform property on it to TargetPlatform.iOS.
This should allow the theming to use iOS-specific widgets rather than their android counterparts. Note that this may not work everywhere; if Dart:io's Platform were used incorrectly in your code or 3rd party code for theming, this would not be overridden.

Can we add image path (of local database) to the android APP widget (Home Screen Widget)?

Context: I am creating a flutter app wherein the screenshot of a particular app-page needs to be shown in app widget.
On Android side, we are using Kotlin (which I have no idea of, I don't even know if this thing is possible).
Path provided by flutter will be like:
/data/user/0/com.example.myboardapp/app_flutter/20220613_151934.jpg

Flutter test goldens : possibility to emulate system bars to test SafeArea?

I have a android/ios flutter app.
I handle SafeArea so my design/buttons does (or does not depending on the cases) conflits with system bars (navigation bar, status bar, notch)
But when i run my integration widgets tests (testing the full app with flutter test in headless mode, not in a real/emulated device) and I use the goldens matches (screenshot of the app), no SafeArea is used by the runner, so I can't test theses cases.
Question: is there a way to force/simulate fake SystemsArea to appear on each of my goldens to ensure my app behave normally with it ?
Thanks

Flutter Platform Specific Navigation Approaches

I've just looking at Flutter for the first time and have a question around navigation. I have a single project targeting iOS, Android and Web.
I'm looking at Navigation Drawers here:
https://material.io/components/navigation-drawer/flutter#using-a-navigation-drawer
Is it possible to use a Standard Drawer if the target is Web and a Modal if targeting mobile?
I can't quite find anything in the docs around varying things on different platforms or idioms.
You could design custom drawers for each platform and show the specific one by checking the user's platform using the kIsWeb constant.
For example:
import 'package:flutter/foundation.dart' show kIsWeb;
if (kIsWeb) {
// how the web version drawer widget
} else {
// show the non-web version drawer widget
}
Reference taken from https://stackoverflow.com/a/50744481/5882307

How can I get the on screen keyboard for flutter web apps running on a touch screen

I am building flutter for the web, and I want to use it on a touch screen. My app runs great and takes input from the mouse, but when I want to use a text input field the app works with the physical keyboard that I have attached since I'm running in chrome on my Macbook. I would like to use this web app on a touch screen kiosk type of setup though so I wanted to always bring up the virtual (on screen) keyboard for text entry.
I tried:
#override
void initState() {
SystemChannels.textInput.invokeMethod('TextInput.show');
super.initState();
}
And this does force open the virtual keyboard if I run on a virtual tablet for example, but didn't work for me when I ran the exact same flutter app in chrome.
I'm running with v1.9.1+hotfix.3-pre.1, on Mac OS X 10.14.6 18G103
Does Anyone know a way to force flutter to always use virtual on screen keyboard?
I don't think there's a native function in Flutter to invoke the desktop virtual keyboard. As a workaround you can either use virtual_keybaord_multi_language plugin that creates a keyboard within the app or you can enable the virtual keyboard by default on the device. If you're running on Windows, switching to tablet mode should automatically invoke the softkeyboard when a TextField is active.
Edit: This seems to be a valid use case, you can track the feature request on this ticket.