I'm sorry that I have never see or used an actual device with android OS such as Google pixcel, but I found that gray-out area on top of screen like screen shot below.
*This is "Pixcel 4 API 30 mobile emulator" called from vsCode.
And I found this kind of dead area on Pixcel 5 emulator as well, but am not sure that this is somthing in common for all android OS.
Finally, I'd like to ask that if I should avoid something to display here or this is only emulator matters and do not have to care about this ?
In case that I have to care this area with developing by flutter, should I intentionally separate code or design between these kind of device and the others, as I'm usually using Iphone emulator and actual machine but have never seen this area and beleive I need not to care this kind of area and adopting top-margin for this problem.
Thanks for your helpful comment.
Code Added:
class holder extends ConsumerWidget {
#override
Widget build(BuildContext context, WidgetRef ref) {
ref.watch(_modalProvider );
return Scaffold(
body: Column(
children: [
Container(
margin: const EdgeInsets.only(bottom: 10),
// flex: 1,
child: Container(
margin: EdgeInsets.only(top: 40),//should I do this to avoid this area?
width: double.infinity,
height: 40,
// color: Colors.grey,
alignment: Alignment.topLeft,
child: Image.asset('images/flutter.png'),
),
),
Flexible(
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
Folders(
name: "list",
subTitle: null,
),
],
)
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
floatingActionButton: Container(
width: 50.0,
child: FloatingActionButton(
backgroundColor: Colors.white,
child: const Icon(
Icons.search_sharp,
color: MyStyle.mainColor,
),
onPressed: () {
ref.read(_modalProvider.notifier).update((state){
showTopModalSheet<String?>(context, DumyModal());
});
},
),
),
);
}
}
That area will be also visible in real devices so you should take that area into consideration. But Scaffold widget will start the rendering from below that point so you don't have to think about it.
İf you want to change color of that area, you can
Container(
decoration: BoxDecoration(color: Color.white),
child: SafeArea(
Scaffold:...
)
)
It also effects IOS and Android devices differently, I believe that is why it is only visible in some devices
Related
What is this black rectangle space that pops on top of the keyboard when clicking on a text form field? The issue only occurs when on an Android device using the web browser. It also seems very inconsistent as you can see on the GIF, sometimes it occurs, sometimes it does not. I could not figure what it is because there were no error logs occurring when doing remote debugging. In the remote debugging, the keyboard displays on the middle(the black thing) and there is some white space on the bottom (see second picture below). Would you know what could be causing this? This app is running on an older version of Flutter by the way which is 2.10.5 so was this a known issue? I've added the Scaffold code below and TextFormField for reference. If someone can point me to the right direction, it would be much appreciated!
This is the code for the main Scaffolding:
return Scaffold(
backgroundColor: Colors.black87,
body: SafeArea(
bottom: false,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(Images.backgroundImg),
fit: BoxFit.fitHeight)),
child: PageLayout(
header: NotAuthorizedHeader(
isBackPress: false,
),
child: LoginLayout(
onLogin: props.login,
loading: props.isAuthenticating,
authMessageError: props.authMessageError),
getMoreList: () {},
loadingMore: false,
),
),
),
);
Then this is the text form field snippet:
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
placeholder,
style: GoogleFonts.poppins(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppColors.gray3),
),
const SizedBox(height: 10),
TextFormField(
validator: validator,
onChanged: onChanged,
keyboardType: keyboardType,
obscureText: obscureText,
style: GoogleFonts.poppins(
color: AppColors.gray10,
fontSize: 13,
fontWeight: FontWeight.w400),
decoration: InputDecoration(
filled: true,
fillColor: AppColors.gray9,
hoverColor: AppColors.gray9,
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(4),
),
),
onEditingComplete: () {},
onFieldSubmitted: (value) {
onSubmit();
},
)
],
);
I have solved this problem after further testing. Apparently the black rectangle was being caused by the resizeToAvoidBottomInset: true property of the Scaffold on mobile web browsers. So the fix was to set the Scaffold property resizeToAvoidBottomInset: false when the platform is on web.
I have a very simple animation for a splash screen of a shaking jar that I made in Adobe After Effects and exported it via LottieFiles extension as json, it works normal but every couple of times when I open the app the animation glitches (see pictures below), I can't figure it out and have tried searching for a solution without any success. The problem is the glitching happens random (sometimes it's a couple of times in row when I open app, sometimes it's every x times). This was tested on multiple android devices with same result.
Code for splash screen:
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: isDarkMode()? const Color(0xFF31302f) : const Color(0xFFfcfaf6),
body:
Align(
alignment: Alignment.topCenter,
child: Column(
children: [
SizedBox(height: height(context)*0.08),
Stack(
children: [
Image.asset(
isDarkMode()? 'assets/crnikruh.png' : 'assets/bijelikruh.png',
height: height(context)*0.3,
width: height(context)*0.3,
),
Padding(
padding: EdgeInsets.only(top: height(context)*0.01),
child: Lottie.asset(
'lottie/jaranimation.json',
width: height(context)*0.3,
height: height(context)*0.3,
frameRate: FrameRate.max,
fit: BoxFit.fill,
),
)
],
),
],
),
),
);
}
}
This is the normal view
This is the animation with the problem
I've found a workaround for this issue. It's not quite the solution but it works. So, I think the problem was it wasn't loading properly every time and the trick that helped me was that I wrapped the lottie asset with visibility widget and delayed the visibility by 50 milliseconds, so it got that extra 50 milliseconds on startup to properly load the asset.
i have flutter app project and i publishing him on play store but my app have like a custom scroll view contain some pictures that i want to update them every 2 week can i update him without releasing my app and building again ??
is the database like (SQF lite) will benefit me to this topic
the code in below contain some picture that i want update them i wrote it like example
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(child:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Explore", style: TextStyle(color: textColor, fontSize: 24, fontWeight: FontWeight.w600),),
],
)
),
IconBox(child: SvgPicture.asset("assets/icons/filter.svg", width: 20, height: 20,),)
],
),
);
}
and thanks
I need to implement such a widget in Flutter. Full version of the page, where this widget is going to be used is here Maybe you know build-in widgets, which could help me. But if there are none, what is the best way to implement this widget?
You can use a ListTile
ListTile(
leading: const Text("Lbikgabsb"),
trailing: Column(
children: [
const Text("900 P"),
const Text("2"), // add your decoration to the background
),
],
),
),
Alternatively you can use:
SizedBox(
height: your_height,
width:double.infinity,
child: Row(
children:[
Text("Lbikgabsb"),
Column(
children: [
const Text("900 P"),
const Text("2"), // add your decoration to the background
],
),
),
You can choose whichever approach works best for your app
I am trying to use Navigator.pop(context); in an appbar but the problem is that it shows a black screen and then you have to press the back button on android then it pops current black screen, so where is this black screen coming from that I don't know and in iPhone there is no back button so that why it is stuck in that screen. Please do help me
This is the code where I am using this Navigator code.
#override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
appBar: new AppBar(
elevation: 0.0,
backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
actions: <Widget>[
new IconButton(
icon: Icon(Icons.settings_power),
onPressed: () {
Navigator.pop(context);
}),
],
title: new Text(
"PROLOG",
style: new TextStyle(color: Colors.white),
),
centerTitle: true,
),
);
}
and the most strange thing is that I am using this piece of code in another class its working fine. So where is the problem...
The reason why you're getting a black/blank screen after calling Navigator.pop(context) is because there's no widget/screen beyond the current Navigator stack.
In Flutter, SystemChannels.platform.invokeMethod('SystemNavigator.pop') is used to remove the topmost Flutter instance. As mentioned in the docs, the method should remove the current Activity from the stack in Android. The behavior is a bit different on iOS though.
If you're trying to implement this function to close the app, this is highly discouraged. This is pointed out on Apple's archived doc. I'm trying to search for an updated reference, but navigating through Apple's Developer docs is challenging.
Anyway, I've made some changes to your code snippet if you'd like to try this out.
Add this in your imports
import 'dart:io' show Platform, exit;
As for the code, exit(int) is used for iOS. It's recommended to use an exit code from the range 0...127 as mentioned in the docs. While SystemChannels.platform.invokeMethod('SystemNavigator.pop') is used for other platforms (mainly Android in this case).
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
appBar: new AppBar(
elevation: 0.0,
backgroundColor: Color.fromRGBO(30, 30, 30, 1.0),
actions: <Widget>[
new IconButton(
icon: Icon(Icons.settings_power),
// if Platform is iOS call exit(0)
// else call the preferred method
// https://api.flutter.dev/flutter/services/SystemNavigator/pop.html
onPressed: () => Platform.isIOS
? exit(0)
: SystemChannels.platform.invokeMethod('SystemNavigator.pop'),
),
],
title: new Text(
"PROLOG",
style: new TextStyle(color: Colors.white),
),
centerTitle: true,
),
);
}
Demo