I am making a website with flutter
codingfries.com
Can someone check what the hell is happening when I click on Desktop View on chrome browser in mobile phone. The website starts to behave weirdly.
This is supposed to happen as the layout changes. Width of screen changes when you emulate Desktop view on mobile phone. For handling such cases, flutter has media queries which can be used to change layouts based on screen size changes.
For more info refer the official documentation.
https://flutter.dev/docs/development/ui/layout/adaptive-responsive
Related
I want to create a hybrid mobile app using ionic capacitor. When user logs in the app should open the main angular app in a hidden webview to initialize the angular app. The webview should be hidden for this time. After this when a user clicks on any links in mobile app, it should open in the webview and this time the webview should be displayed. The webview should open in the app container and not in the browser window (like InApp browser). Please help me if anybody have explored this kind of solutions.
My existing app is built using Xamarin and its built on the above concept.
I have tried the InApp browser but it does not give a good impression to the end user expecting a complete mobile app.
What you want to do is more or less possible if I've understood you well. I've done it in my job. We have a ionic app, but then there are some native screens developed natively for Android (with Java) and iOS (with Swift). With ionic you can call native code from Javascript. For that you need to make your own local Capacitor plugin: https://capacitorjs.com/docs/plugins/creating-plugins
In a plugin, the ionic Javascript function will trigger a native function (Java/Kotlin for Android - Swift/ObjectiveC for iOS). Once there, you can freely create native screens (Android = Activity, iOS = Storyboard/Controller) and then launch your native screens in the app. In our project most of the app is ionic, but we developed our own native screens such as a PDF Viewer, a Web browser, a QR scanner, etc.
But an app is not like a website, an app is a stack of screens. Which means that everytime you access a new screen, it's added to the top of the stack and the user can go back to the previous one. So, ionic will launch first. Inmediately after starting the app (or whenever you want) you can move the user to a native (android/ios) screen. However, if the user presses the native android back button, he will come back to ionic. If you want to prevent that, you need to code that behavior yourself (google android prevent back button). Likewise, you "can't" make the user go from the native screen to ionic, you can bring him back to ionic by navigating back programmatically.
Perhaps you can also change the launch activity to use a different one, and then later launch the ionic activity with native code. But I haven't done this myself and it could break ionic, so I can't advice you through this path.
I hope my answer helps, but I'm not sure I understood what you want to accomplish.
Hi I made a simple web with Flutter and I made it responsive, so I checked with chrome dev tools if all works properly and it does.
Like this picture, that is from Chrome dev tools
The thing is that when I deployed with firebase hosting, I tested it on an Iphone 8 plus with safari and the menu is not showing well, and I don't have any idea of why
As you can see the menu is cutted. Also if you know how to remove the annoying bottom white bar that is created only on mobile web I will appreciate it.
the app from chrome on desktop and mobile are different. the correct one is the one from desktop. the app on the mobile device (in this case iOS) has the images cut out from the screen or completely moved, plus there is a sort of zoom. If from Safari on mobile I select "Request Desktop Website" the site is displayed entirely and correctly. how can i force this default setting in flutter 2.0 web?
Probably will need to feed in the platform density property to your material app https://api.flutter.dev/flutter/material/VisualDensity/adaptivePlatformDensity.html
I am writing an hybrid mobile app with ionic.
I can test my application in browser with this command:
ionic serve
But I see my app in full browser width and height.
I saw on some tutorial a screen inside the browser that shows a mobile screen, where I can change screen size, orientation and other options.
I do not manage to open this kind of layout in my browser.
You can use the Device Mode of the Chrome Dev Tools:
https://developers.google.com/web/tools/chrome-devtools/device-mode/
Or.. the Safari Web Inspector
https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html
Or, you can use
ionic serve --lab
I am doing some compareson between Smart TV platforms way to develop applications and I wonder if Google TV applications only are available in "Full screen" mode? In other words taking up the whole screen.
Samsung Smart TV have three different application layouts available, see link: http://www.samsungdforum.com/upload_files/files/guide/data/html/html_2/getting_started/intro_to_samsung_smarttv_apps.html
Full screen, Single-wide application and ticker. This specifyes how much space the application takes up on the screen so the user can for example watch tv while using the application, because the application only takes up a part of the screen.
I found this FAQ:
Can I use picture-in-picture (PIP) in my Google TV Android application?
No. The picture-in-picture (PIP) feature is only available for live TV. You can't use it in your Android application, nor can you run an Android application in the PIP window.
From that answer I want to say that Google TV applications can only be used in full screen mode. Am I right?
Thanks for helping
Yes they can only be run in fullscreen mode. That is to say only one app can have focus at a particular time. You can however make your app transparent for the most part to allow whatever is underneath it to show through. This post has a good solution Full screen transparent activity (no title & status bar) doesn't work.... why?