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.
Related
Is there any package to design below screen like. I tried lot of time on Online to get solution, but i didn't get any solution.
Can any one help me how to develop carosual card like below image ?
I've used this carousel slider package once.
also, this video might help. Kind of similar to your needs.
(I'll update the answer once I get to my computer.)
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.
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 am building a flutter application for a donation Kiosk, that would be deployed on tablets that connect to card readers.
I would like the home screen presented to users to contain a custom animation that can be loaded from a disk file (or downloaded) so that we could develop these custom animations for each NGO with ought building separate apps for each case.
The animation should be dynamic, meaning it should be able to take some parameters from the flutter app (ex: number of donations from the last 24h) and change the layout slightly (ex: show a number of trees based on that number).
I found some animation libraries but all of them would mean coding them inside the app, which is not the best scenario for us.
Is this possible? Can you help me by pointing in the right direction :)
Thank you!
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.