Develop Reference

Flutter, Android and IOS bottom navigation bar size is different

An overflow error occurred due to the bottom navigation bar height in ios, the layout that worked well on all Android devices.
It seemed to be because of the extra space because of the format of turning off the app by pulling it up from the bottom, which is governed by the IOS operating system.
it is super annoying I forcibly increased the bottom navigation bar height because of IOS, but the design is now bad in Android. Anyone know how to solve it?
--UPDATE
Scaffold(
bottomNavigationBar: Container(
height: 50,
child: BottomNavigationBar(
...
),
),
)

Try add SafeArea on top of Container :
Scaffold(
bottomNavigationBar: SafeArea(
child: Container(
height: 50,
child: BottomNavigationBar(
...
),
),
),
)

You can easily make height different for both platforms:
height: Platform.isIOS ? 50:40
So here if the Platform is IOS the height will be 50 or it will be 40.

Hey i tried custom painter and i realized that for iphone 13 the height is 90 pixel for bottom navigation bar and for android the height is different which is the value of kBottomNavigationBarHeight. So i declared this value in my constant file such as double btmNavigationBarHeight = Platform.isAndroid ? kBottomNavigationBarHeight : 90;. Hope it helps anyone with the same problem

Using Align inside of ListView to align Widgets left/right

My application shows profile of users. A feature I wish to add is to allow "like"ing of profiles by users. For this, I am using a Listview to show all profile content.
The problem is when adding a LikeButton, it gets centered, which is expected. I want to move it to the (top) right.
Align appears like a more viable and elegant solution that doing something like this (see below) but I cannot get Align it to work (it remains centered).
ListView(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [LikeButton()],
),
// rest of profile information
Using a Container with width: double.infinity doesn't work with Align either - it remains centered.
Container(
width: double.infinity,
child: Align(
alignment: Alignment.topRight,
child: LikeButton(),
),
)
Is using a Row my only option or is there a better way?

Since LikeButton is a Row or Column it self, You can't Align it like that,
You can use its properties to align it
ListView(
children: [
LikeButton(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
)
],
)
or just wrap it inside a SizedBox and align that box
Container(
width: double.infinity,
height: 500,
alignment: Alignment.topRight,
child: SizedBox(
width: 100,
height: 100,
child: LikeButton()),
)
Row takes the size of its children so your first code won't align it vertically
You didn't give height in you're Container code so Aligning it by topRight would be meaningless

You can Stack the LikeButton() onto Container(child:Row()) and position it to top right by giving values to topRight parameters.

how to add a MediaQueryData to a spacific padding?

How to add a specific padding to bottom using MediaQueryData ?
Padding(
padding: const EdgeInsets.only(
bottom:8.0,
),
)

I think you mean
MediaQueryData mediaQueryData = MediaQuery.of(context);
And to get width and height of the device screen:
mediaQueryData.size.width;
mediaQueryData.size.height;
Then you can do something like this
Padding(
padding: EdgeInsets.only(
bottom: mediaQueryData.size.height * 0.05 // means 5% of screen height
),
)

I think you need to add spacing from the bottom and you're using a wrong widget for that, you should either use a SizedBox or provide a dummy child to your Padding.
For instance:
Column(
children: <Widget>[
SomeWidget(),
SizedBox(height: 20), // provides padding from bottom
],
)
If this isn't something you're looking for, I request you to update your question by adding more details of what you're trying to achieve.

Padding widget always takes a const value in flutter and MediaQuery based value is not treated as constant.
So in case you need to provide a bottom padding add SizedBox widget below your widget to create the required free space as follows:
SizedBox(
height:MediaQuery.of(context).size.height*0.1,
),
So this will give a space equivalent to one tenth of the screen height. Likewise you can adjust padding by changing the multiplication factor.

How to set size for launch screen icon?

I am trying to setup a launch screen that will flow seamlessly into a personal splash screen in flutter.
The goal is that I have the logo, centered on both Launch and Splash, that is lets say 10px from both left and right of a portrait only app.
I don't understand what image size I would need to be able to set this up properly on Android. I have drawable-**** folders with varied sizes but they don't fit correctly. Other than 'centering' the image in the Android xml I don't know how I would make it 'fit width' basically.
On iOS my icons show up as centered in the LaunchScreen.storyboard but are super tiny (96x96). If I manually resize the image to fit the way I want(in Xcode view scene), when I run the app I get a warning saying that the view does not have unlatching constraints and it will be shown as the original small size.

launch screen icon use fit function
for example
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Image.asset('repo/intro.jpg' width: 100 , height: 100, fit: BoxFit.fill,),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
https://api.flutter.dev/flutter/painting/BoxFit-class.html
apple launch Storyboard use fit too

Native splash screen width and height

I'm using flutter_native_splash to create native splash screen for both android and ios but i need to specify the height and width of my app logo which appears in this splash screen because i'm using the same logo for some animation in the next screen, so i need them to be in the same width and height
Update 1
this is the code of the image i'm using in the next screen
AnimatedAlignPositioned(
duration: const Duration(milliseconds:500),
alignment: Alignment.center,
moveByChildHeight: change ? -0.5 : 0,
child: Image.asset(
'assets/images/splash.png',
width: ScreenUtil().setWidth(250),
height: ScreenUtil().setHeight(250),
fit: BoxFit.fill,
filterQuality: FilterQuality.medium,
),
),