Develop Reference

How should I treat gray-out area on pixcel device？

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

How to solve ElevatedButton error in flutter

I am new to flutter and I am developing an app in Flutter. While I am doing this, I try to add ElevatedButton which is the latest version of RaisedButton, and its return error and I am also not sure why. I will insert the error code image and would be grateful if someone tells me what is the reason for the error and how to solve it. Thank you

You need to add a child widget (it is required in addition to onPressed function). Here is a sample code for Elevated Button. You can adjust it based on your needs:
ElevatedButton(
style: ElevatedButton.styleFrom(
onPrimary: Colors.white,
primary: Color(0xffccbbd7),
minimumSize: const Size(330,70),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(5),
),
),
),
onPressed: () {},
child: const Text('click'),
),

You Forgot the child Widget inside ElevatedButton, in this button onPressed and child widgets are required
Refer ElevatedButton
Try below code
ElevatedButton(
onPressed: () {
// write your onPressed function here
print('Button Pressed');
},
child: const Text('Press Me'),
),
Your result screen->

Well, elevated button should have child inside. Can be text, icon or image
ElevatedButton(
onPressed: () {
print('Tombol baru saja ditekan!');
},
child: const Text('Hit me!'),
),

Is there a widget in flutter that allows you to create such a view?

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 make a replica UI of a calculator app using Flutter and I am stuck in a few things

I have been able to make a major part of the UI but few elements are still creating a problem for me.
This is the screenshot of the original UI of the app.
Original Screenshot
And this is the screenshot of the UI that I have been able to make up till now using Flutter
Screenshot of UI made with the help of flutter
Now can you please help me regarding how can I make that '=' container go to the extreme right just like in the original screenshot. And as well how should I align the first row on the same level as in the original UI.
This is the code that I have made for the container having all the digits.
Expanded(
child: Container(
decoration: BoxDecoration(
color: Color(0xFF212121),
borderRadius: BorderRadius.only(topRight: Radius.circular(10.0), topLeft: Radius.circular(10.0)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.remove, color: Colors.grey, size: 40.0,),
Buttons(
widget1: Text('AC', style: kNumber2TextStyle,),
widget2: Icon(Icons.backspace_outlined, size: 25.0, color: Colors.white,),
widget3: Text('%', style: kNumberTextStyle,),
widget4: Text('÷', style: kButton2TextStyle,),
),
Buttons(
widget1: Text('7', style: kNumberTextStyle,),
widget2: Text('8', style: kNumberTextStyle,),
widget3: Text('9', style: kNumberTextStyle,),
widget4: Text('x', style: kButtonTextStyle,),
),
Buttons(
widget1: Text('4', style: kNumberTextStyle,),
widget2: Text('5', style: kNumberTextStyle,),
widget3: Text('6', style: kNumberTextStyle,),
widget4: Text('-', style: kButton2TextStyle,),
),
Buttons(
widget1: Text('1', style: kNumberTextStyle,),
widget2: Text('2', style: kNumberTextStyle,),
widget3: Text('3', style: kNumberTextStyle,),
widget4: Text('+', style: kButtonTextStyle,),
),
Buttons(
widget1: Text('.', style: kNumberTextStyle,),
widget2: Text('0', style: kNumberTextStyle,),
widget3: Text('( )', style: kNumberTextStyle,),
widget4: Container(
padding: EdgeInsets.all(30.0),
color: Color(0xFFFFBE00),
child: Text('=', style: kNumberTextStyle,),
),
),
],
),
),
)
Please help!

there are several ways to achieve this, as learning curve, I recommend you read how flexible / expanded works
Colum and inside it, rows, each row will contain the buttons, use flexible or expanded in order to occupy the entire row not matter the display.

I'm testing comments on my Flutter App. Application shows yellow bar when comment is too many characters to the right 175 pixels to the right [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
title: Row(
children: [
Text(
commentdoc['username'],
style: mystyle(20),
),
SizedBox(
width: 15.0,
),
Text(
commentdoc['comment'],
style:
mystyle(20, Colors.grey, FontWeight.w500),
),
],
),

You can try with this.
Row(
children: [
Expanded(
child: Text(
commentdoc['username'],
style: mystyle(20),
),
flex: 1,
),
SizedBox(
width: 15.0,
),
Expanded(
child: Text(
commentdoc['comment'],
style: mystyle(20, Colors.grey, FontWeight.w500),
),
flex: 2,
)
],
),