When I developed a screen on my android mobile then its looks perfect...but when I run screen on another android mobile then its not looks perfect...what is the solution of this problem
You shouldn't use absolute positioning and absolute sizing, you need to make your app flexible. The main problem that new flutter users face is their content gets overflowed. Most of the times to fix this issue you must wrap your widgets with some sort of scroll, such as SingleChildScrollView.
Check this link for more details regarding overflowing and this link for more details on adaptive apps.
Adding to what Mohammed said, also endeavor to declare your media query heights, widths and work with it at every point you need absolute values.
You can always use MediaQuery to make your app responsive and fit well in any screen. Here, you can find some info about it and a nice video that explains how it works.
use flutter_screenutil plugin , for adapting screen and font size ,
this is the link
https://pub.dev/packages/flutter_screenutil
In addition to what Mohammed said, I'll recommend using "Device preview" during development to see how your app is faring across multiple screen sizes and platforms, and I'll also not recommend fix positioning and sizing instead go for flexible positioning, this is here your use of minAxisSize, maxAxisSize, crossAxisAlignment.stretch and so on will be more useful.
Related
I want to create user guide for each screen using flutter
i have tried to use flutter_intro but its not really effective
I want something like this shown in image below with little more effective design.
and it can highlight widgets in screen .
or it would be better if its animations will be bit bubble animations
You can have a look at the showcaseview package which exactly does what you need.
I am working on mobile app that represents a gamebook.
It contains episodes and each of them is built of one or more pages of text.
For every episode I use PageView with children Columns(with nested Text and RichText) for each page. The screen orientation is locked on portraitUp and the textScaleFactor - on 1.0.
The problems I found with this approach are related with the different screen characteristics of mobile devices:
I need to determine the amount of text for every child of the PageView.
But how much text will not bottom overflow on the smaller screens?
My approach till now is to test on relatively small devices with resolution close to 360 x 640 logical pixels and to leave some extra space below text.
Additionally I could make every page of the PageView scrollable, thus preventing overflow at all, but this will produce bad UX by my opinion.
I use font size suitable for devices with the mentioned resolution.
But on considerably bigger screens it will not look pretty.
So, is there good approach to determine how much text to place on each page of the PageView and to scale the font size according to mobile device size and screen characteristics?
Also, I will appreciate if anyone suggest better way to compose such book-like mobile app with Flutter(using different set of widgets).
Thanks for your time.
#Milenb If you can add text pagination then I think it will solve your issue. You wan't need to scale down/up on the basis of screen height. If you look in to this thread then you will know how to do this.
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.
I'm looking to see if anyone has experience with this. I'm a developer first and a designer second, so this is really not my strongest suit.
I have a project I'm working on where the goal is to get image and text side-by-side in landscape mode on the iPhone. I'd like to be able to zoom in on the image using a pinch like normal, but not zoom in on the text as well while that is happening. I don't know if this is even possible or what kind of hacks it would take to get it working.
If someone thinks this is bad in general from a UI perspective, I am open to suggestions.
I have considered keeping two copies of the image (low and high res) and then swapping them out inside of div with an overflow: scroll; so users can get a zoomed version and then scroll around. It doesn't give you the full effect of zooming, but it might accomplish a similar goal. I don't know if this would work either.
If anyone has suggestions or experience on the subject, please chime in. Thank you!
To do this in mobile safari you would probably have to use javascript. Theres a jQuery plugin here: http://plugins.jquery.com/project/pinch
Might be of some help
If you want to use Mobile Safari, then you will need a touch framework like jTouch to simplify things.
Natively, you should put your image and text inside a UIScrollView, and return the image view in the the viewForZoomingInScrollView: (in the scroll view's delegates) to the image view.
Is that what you want?
I'm trying to optimize our News pages for iPhone. One problem I've noticed is that I'm able to tap and move the page horizontally (i.e. wiggle).
My question is, how I can prevent this horizontal movement from happening?
All of our News pages have this problem. Here are a couple examples:
With picture
Without picture
Something is definitely set greater than your device width. Add the following to your css to find the culprit.
* {
border-style:solid;
}
You can then narrow down your search by setting border-color:red; to individual classes/tags/ids.
Add "overflow-x: hidden" on the body.
You can try setting user-scalable=0; and see if that has any effect.
This just happened to me too and it was the result of an extra closing div tag. Once I removed the extra </div>, the horizontal "wiggle" didn't happen any more.
I too, had the iPhone "wiggles" on a web page. It ended up being caused by an image that was wider than the column width it sat in (it was the last column in the row using Twitter Bootstrap). You might be thinking "obvious", but it's hard to spot when the image background matches the page background.
Just make the image responsive, or smaller than the column width - that solved it for me.
Taking the idea from other websites, most of big sites have a mobile site. look at those (the only one i know is facebook m.facebook.com) you can maybe see how the css is done. possible way of doing this is %. I would suggest to take out the sidebar for the mobile version. big pictures should be taken out or be resized so the browser doesn't have scroll bar side to side.