cupertino option tiles ,ios settings page style - flutter

I'm wondering which or how can design settings page like that
1-every option has a own value in right if it's has
2-hit under tile option
3- the divider not full width
is it by ListTile !! or there is another widget ?

There are multiple widgets uses in the above design you can not create it with single widget
Widgets You can use
Text,Containers,ListTile,CupertinoButtons and more
Try yourself and Best of luck

Related

Create Vertical List in Flutter

I want to create this type of listview using flutter.
https://dribbble.com/shots/6872462-Food-ordering-app-Animate
You can find out more by clicking on this link. But I don't know how to create this type of list. I mean, you can see in the GIF that the list is indexed based.
A fixed indexed item container is colored.
How can I achieve it?
Flutter provides you with a widget very similar to the result you want to achieve called NavigationRail.
You will not have the animation by default, but you can maybe search in the source code of this widget how to create a custom widget that will implement animations.

How to best place elements in Flutter

I need the best way to place elements on my Profile page. Everything is explained on the image.
Everything in red does not exists on the app, it's only to understand better
So I used first a Row and inside I placed 3 Expanded Widget. Then inside the second Expanded I used a column for my Name, Bio and Row(3 text with borders). I need that to be optimized on Android and iOS
My questions :
Is Expanded the best way here ? (I want to give a height to the box)
What is the best widget to wrap a text around a box with borders and background colors ?
What is the best way to place the Name at the start of the box while other children are on the middle ?
What is the best way to place the Parameters icon at the top of the box ?
For the profile pic, is the CircleAvatar the best Widget?
Thanks !

Should I always use a SafeArea at the top level of my flutter screens?

I am curious if I should always use a SafeArea widget at the top level of my screen. I mean....when would I want my content blocked by things like a notch? For me it seems like the answer is never.
So should I not just use SafeArea on every page? If so, should it be above or below the Scaffold widget?
You don't have to use SafeArea on every screen. It actually depends if an AppBar is used or not, because the AppBar automatically calculates the values and adds the required padding.
If you use it above a Scaffold the area where the padding is applied would be black. On the other hand, if you use it below the Scaffold the color of the area would depend on the app theme, probably the Scaffold background color.
If you won't add an app bar or add it. if you want to adjust the screen to be responsive using MediaQuery and you don't need any scroll inside the screen use it.
Use it as the first widget in the body of the scaffold.

which class or widget to use a better responsive layout in the flutter?

This class or widget is useful to create a responsive layout.
AspectRatio
CustomSingleChildLayout,
CustomMultiChildLayout,
FittedBox,
FractionallySizedBox,
LayoutBuilder,
MediaQuery,
MediaQueryData,
OrientationBuilder.
Which is to use the better responsive layout.
iDecode already told you that it all depends on what you need. here take a look at official documentation, https://flutter.dev/docs/development/ui/layout.
And here is my advice
Use row when you need Horizontal layout
Use column when you need Vertical layout
Use singleChildScrollView when you need scrolling layout
Use either GridView or listView when you need repetitive view
Use Expanded, Flexible, Limitedbox, flexiblebox for adjusting the size of the widget
Mine favourite : Rows for Horizontal, Column for vertical, Scrollview for Extra data exist in the page or UI not fitted in the screen, ListView for TableView UI etc
For best fitting layout: IS Expanded, AspectRatio

how to zoom in & out in GWT

i created a widget, say MyBox, which has many other widgets. i have to use that widget on different page, however on different page, the size of the widget is different, on some page it's smaller, on other page it's bigger. Just wonder is there any way in GWT to zoom in & out the widget? Thanks
You can set the width and height of a widget, and the normal kinds of "zooming" that happen with HTML will happen to your widget too. If you want inner widgets to resize automatically, check out Layout Panels in GWT 2.0 and later.