I have a weird extra spacing when clicking into a textfield in Flutter, that above the normal iOS keyboard some extra grey box appears. Can anyone help me where this comes from and how to get rid of it? The video shows how it appears.
Thanks!
Found it, thanks for the help!
I have a setup with tabs at the bottom and had in from former tests these 2 properties set to false in the scaffold setup:
child: Scaffold(
// resizeToAvoidBottomPadding: false, <-- caused the extra space
// resizeToAvoidBottomInset: false, <-- caused the extra space
body: buildTabs(context),
This is happens when you have a scaffold that is a child of another scaffold and one of them has backgroundColor: property set to a value. You can set scaffoldBackgroundColor: property in your theme and remove color properties in the scaffold itself and this should fix your issue!
This issue happens when you nest a Scaffold inside another Scaffold.
I added the following property to the outer Scaffold to solve the issue:
Scaffold(
...
resizeToAvoidBottomInset: false,
)
In my case I had this structure which cased the whitespace:
Scaffold(child: PageView(children: [//some containers, Container(child: SingleChildScrollView( child: Column(children: [//some children widgets])))]));
then I moved the SingleChildScrollView from wrapping the column to wrap the first container and that fixed the issue
Scaffold(child: PageView(children: [//some containers, SingleChildScrollView( Container(child: Column(children: [//some children widgets])))]));
This happen because we use white color in scaffold property backgroundColor
which cause an issue.
Remove Color property from Parent Scaffold widget and if you want to use color in parent widget so you can use theme property scaffoldBackgroundColor.
Related
I am using CheckboxListTile. I just want to increase the size of the Checkbox, without affecting the size of overall CheckboxListTile. If it were Checkbox only widget, I would have used Transform.scale to increase the widget size.
Is it possible to achieve what I want? Or i would have to use Checkbox?
Thanks
As mentioned here (https://api.flutter.dev/flutter/material/CheckboxListTile-class.html#instance-properties) there is no any property or method provided by CheckboxListTile to control size of Checkbox. So, having a custom tile with checkbox makes more sense here.
Something like in code below:
Row(
children: [
Transform.scale(
scale: 1.5,
child: Checkbox(value: mail, onChanged: (value) {}),
),
Text(
"Check Me",
)
],
),
Also wrapping the row in Inkwell with onTap changing state similar to that of onChanged in Checkbox will have almost same experience as CheckboxListTile where tapping on any part of tile checks or unchecks the box.
You can even use a ListTile with a CheckBox. The source code for CheckboxListTile (https://github.com/flutter/flutter/blob/52b3dc25f6/packages/flutter/lib/src/material/checkbox_list_tile.dart#L124) exactly does that. Be sure to use on tap with handlechange as done in the source to get the effect of value change on tapping anywhere in the tile.
Edit: I think my descirption wasn't all too clear. I need the heigth between app bar und nav bar as a double so I can size other things with that.
I'm done coding the logic for my app and have just started with implementing the design someone made for me. A lot of the elements in my app are scaled according to the available height. The problem, I'm not quite sure how to get that reliably. So...how do I get the height indicated by the red line in the screenshot (taken from the design):
My approach:
availableHeight = MediaQuery.of(context).size.height - appBarHeight - BottomNavHeight - ?
Questions:
Is there a way to figure out the height of the bottom navigation? I have the appBarHeight as I control it manually.
And what else has to be substracted from the total height? Are there default paddings or anything else?
What is the effect, if I wrap everything in a SafeSpace widget? How do I account for that? (Nor sure, if I will yet).
It looks like you are just trying to get the available area for you to use.
In that case, just use LayoutBuilder widget. It will give you the area available at the spot where you use it.
For example:
return Scaffold(
appBar: AppBar(title: const Text('LayoutBuilder Example')),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
print(constraints.maxWidth);
return FlutterLogo();
},
),
);
i think u wanna to try get remainder layout between appbar-navbar, it's automatically fully using so nothing difficult
New to flutter. I'm currently working through a flutter course where I practice adding packages to play sounds by building a xylophone. When adding multiple buttons for each sound file, flutter was telling me "The parameter 'child' is required" and has me insert it at the end of the TextButton with a null property. The code worked fine without it on there but dart analysis kept giving me a warning. Sample code after inserting child listed below.
children: [
TextButton(
onPressed: () {
final player = AudioCache();
player.play('note1.wav');
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
), child: null,
I cannot seem to find why this was warning me but reading the documentation it looks like maybe because it was expecting text for text button? Can anyone explain or point to why it does this?
Thanks in advance.
EDIT
As user #Saddan says, the TextButton class includes box constraints, meaning it will still have a size even without a child.
The real reason why you need a child widget is a bit more boring: There are very few reasons why you would want to have a TextWidget without a child, and even if you did, as I mention later in my answer, a more common approach to this is to use Container, which can be understood as an empty widget, because of this, the child property is considered required on the text widget (with null-safety, you get a compile-time error and without it, you get a lint warning like in the question).
The reason why child: null is added automatically is that flutter doesn't know what you want as your TextButton's child, but I believe you are meant to replace null with whatever else.
ORIGINAL ANSWER
A TextButton should always have a child because if it doesn't it will not display anything, a text button can't size itself so it will always have the same size as its child, you need to put something on the child property or the text button will not know what to look like.
Now, you are passing null as the child, I will have to admit, I didn't think that was possible, I also don't think flutter likes this idea very much (If you activate null-safety, this code will throw a compile-time error). I think you should instead use Container, which is an empty-by-default widget as the child property:
TextButton(
onPressed: () {
final player = AudioCache();
player.play('note1.wav');
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
),
child: Container(),
You can also use the container with some color, some width or some height if you want:
Container(
color: Colors.red,
width: 20,
height: 20,
);
Your assumption is quite right. Its expecting a Widget ,if specific its expecting a TextWidget which consider a label or name of your button. Probably you're using an old version of flutter framework so its accepting null value of child but as I'm using 2.5.3 it's not accepting null value and you must need to provide it.
Hello I am trying to show some data to user with ListView but I get exactly this error:
*RenderFlex children have non-zero flex but incoming height constraints are unbounded.
My Code is Exactly Like Below,
Expanded(child:
ListView(children:tWidgets),),]);
My Code works fine without ListView like this
return Column(children: tWidgets,);
Expanded Widgets only work inside Row and Column widgets, they cannot be used outside of these two widgets, so your solution will be like this
return Column(children: [
Expanded( child: ListView(children: tWidgets,),)
],
);
try
ListView(
shrinkWrap: true,
https://api.flutter.dev/flutter/widgets/ListView-class.html
I solved this issue by fixing the order of my interface.
ListView was inside a Column and that column was also inside another column. I simply deleted a column.
if you are facing with this problem check the hierarchy of your interface.
As you know, the ListTile comes packaged with 4 widgets:
a) title:
b) subtitle:
c) leading: can be an icon or text I suppose
d) trailing: can be an icon or text I suppose
But I want to add a 5th:
e) chipSection: [which accepts a row of chips]
Can someone advise me on how I can establish this? What do you recommend??
Thanks
Well you can't add 5th option directly without changing source code which I wouldn't recommend.
There are few options:
Use a Column and make ListTile and ChipSection it's children. Tho in this case you have to add elevation to ChipSection.
Make a Custom Widget say myListTile, add arguments for title, leading, subtitle,trailing and chip Section.
Inside Custom widget return a Card Widget, add Column as its child, and then add:
Icon/Test widget for leading,
Text widget for Title
Another Text Widget for subtitle
Icon/Test Widget for Trailing
Your chip section
as columns, children.
Use Padding + Column's mainaxisaligment property to manage their alignment.