Develop Reference

Flutter Safe Area issue

I am developing an app where I need to use the safe area to avoid unnecessary swiping. Though I have implemented the safe area in a custom container to render the screens, it leaves a white margin on top.
When I add these parameters to the SafeArea() widget,
top: false,
maintainBottomViewPadding: true,
the white space goes away. However, the size of the app bar is too big. This is the minimal code
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class DashboardActivity extends StatefulWidget {
#override
_DashboardActivityState createState() => _DashboardActivityState();
}
class _DashboardActivityState extends State<DashboardActivity> {
#override
Widget build(BuildContext context) {
return SafeArea(
//top: false,
//maintainBottomViewPadding: true,
child: Scaffold(
backgroundColor: Colors.white,
resizeToAvoidBottomInset: true,
appBar: CupertinoNavigationBar(
backgroundColor: Colors.grey,
leading: InkWell(
child: Icon(
Icons.arrow_back_ios,
color: Colors.white,
),
onTap: () => Navigator.pop(context),
),
middle: Text(
"Dashboard",
),
),
body: Text(
'This is an example use of SafeArea',
),
),
);
}
}
This only happens on tall displays, i.e. something more than an 18:9 aspect ratio.
Can someone tell me what's wrong and how can I fix this?

SafeArea is basically the same Padding widget. The difference is it adds padding to its child widget when it is necessary (For example, it will indent the child by enough to avoid the status bar at the top of the screen).
The reason why it is working on smaller screens is that SafeArea doesn't add any padding there (it is like to have something like this padding: EdgeInsets.symmetric(vertical: 0))
When you are wrapping your Scaffold inside SafeArea on taller screens it is calculating necessary padding value and adding it to Scaffold.
This is why you are getting this:
The correct use case of SafeArea is to use it inside body:.
Flutter AppBar and CupertinoAppBar widgets is handling device screen types by themselves.

flutter blur effect is not working on iOS (ImageFilter.blur)

I am using flutter 2.0.4 and dart 2.12.2
I use following code to add blur effect.
It is working fine on Android but does not provide blur effect on iOS devices.
Is there any work around for this ?
Or is there some minimum version of iOS this is working?
Container(
width: SizeConfig.screenWidth,
height: SizeConfig.screenHeight,
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 5.0,
sigmaY: 5.0,
),
child: Container(
width: SizeConfig.screenWidth,
height: SizeConfig.screenHeight,
decoration: BoxDecoration(
color: Colors.grey.shade200.withOpacity(0.5)),
),
),
),
)
on Android blur effect is active
on iOS grey shading is active but blur effect is not active
Can anyone provide some solution for this?

This has been a long running issue with seemingly no fix yet and seems specific to certain use cases.
More on it here
If you haven't already tried this, what I would rather suggest is to try creating a Stack and have your your Container on top of whatever view your are trying to blur.

Flutter Overflow Pixel issue

This is from London App Brewery completed Flutter project "BMI Calculator": https://github.com/londonappbrewery/BMI-Calculator-Flutter-Completed.git
I'm not sure if caused by my outdated android phone or the android screen is too small, but I'm getting Bottom Overflow Pixels For example, the top two cards have an error message of Bottom Overflow by 19 Pixels, the center card has an error of Bottom Overflowed by 60 pixels, and bottom two cards have an error of Bottom Overflowed by 56 pixels.
Additionally, if I rotate my phone to 90 degrees, the card image size decreases dramatically, as you can see from the second image.
Please help me fix this.
Thank you
class _InputPageState extends State<InputPage {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text('BMI CALCULATOR'),
),
body: Column(
children: <Widget[
Expanded(
child: Row(
children: <Widget[
Expanded(
child: ReusableCard(
colour: colorCode,
cardChild: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget[
Icon(
FontAwesomeIcons.mars,
size: 20.0,
),
SizedBox(
height: 5.0,
),
Text(
'MALE',
style: TextStyle(
fontSize: 10.0,
color: Color(0xFF8D8E98),
),
)
],
),
),
)]),),
]));
}
}

This is happening because your UI takes up too much space for your phone! You have two options to solve this.
Either you wrap your overflowing widgets in a scrolling widget, like SingleChildScrollView, this will let you scroll the Widget if it is too large.
Or you calculate the size of the widget based on device size. You can do that by using the MediaQuery class:
MediaQuery.of(context).size.height Can be used to get device height for instance.
Have a look at this article if you want to go down that path. https://medium.com/tagmalogic/widgets-sizes-relative-to-screen-size-in-flutter-using-mediaquery-3f283afc64d6
Of course you could also just reduce the size of your Widgets so it fits on your device. Thats fine for Tutorial purposes, but if you actually want to publish an App, go with the MediaQueryapproach.
Good luck!

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