I have a tree structure like the following, basically a Row inside a SingleChildScrollView, where the children of the Row are Draggables.
Positioned(
top: 250,
left: 30,
child: Container(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: initialState.map((f) => LongPressDraggable(
child: f,
feedback: Transform.scale(scale: 0.4, child: f),
childWhenDragging: Container(),
)).toList(),
),
),
),
),
The problem is that the Draggable seems to be consuming any gesture, so that, when tapping (long press in this case), the drag effect works, but no other gesture seems to work, so basically scroll does not respond.
I tried using, instead of LongPressDraggable, a regular Draggable and use affinity property, but even with that, the scroll does not respond, just the drag.
Any help or suggestion?
For anyone else dealing with this (at the end stupid situation)....
It turns out that the problem does NOT come from the Draggable itself.....
For some reason, putting the SingleChildScrollView inside a Positioned prevents this from scrolling....
Found a clue in this bug: bug report
So that, the solution proposed in the bug about giving double values to the top, bottom, left, right properties of the Positioned did not work well for me.
So...I solved it by using exactly the same code, but using Align widget instead of Positioned.
Related
I have the following widget StackedIcons
reuturn Container(
color: Colors.green,
child: Stack(
clipBehavior: Clip.none,
children: [
CircleAvatar(), Positioned(left: 15, child: PlusOne())
]),
);
which I want right aligned inside another widget
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [StackedIcons(match: match)]
)
and this is what I get
This looks good in terms of what I want to achieve (the plus one on top of the user avatar). However it overflows the parent container.
If I use right offset for positioned the order of the icons will be inverted and I don't want that.
If possible I would like to specify to Stack place the element below the current one (rather than on top).
The output I want is to have this widget rigth aligned without going over the padding of the parent. If I remove the Clip.none behaviour I get
A possible solution might be to place your PlusOne inside the green Container, and then give the Avatar some offset on the right instead.
return Container(
color: Colors.green,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(right: 15, child: CircleAvatar()),
PlusOne(),
]),
);
I'm not sure how this would affect things if you were to have multiple avatars and then the plus icon, but if you haven't tried this, it might work for you.
I'm trying use IndexStack in my app. But I have a problem with Stack and ElevatedButton. I trying press button and it don't response anything to me. But the blue button bellow is still working well
Thank for concern about my issue.
Codepen: https://codepen.io/sucanabo/pen/xxqPrRw
How Stack widget works, is that it takes the first child from the children list that you provide it and makes it the base of the rendering.
Whatever children you provide it after the first child, will be rendered on top of the base child.
So, when your Positioned child is becoming the base, your ListView child (which is the second in the children list) is being rendered on top of your Positioned widget, which is hence blocking all the interaction.
If you want this to work with your architecture, move the ListView as the first child and your Positioned as the second child, like this,
Stack(
clipBehavior: Clip.none,
children: [
// First the ListView
ListView(
padding: EdgeInsets.fromLTRB(20.0, 50.0, 20.0, 20.0),
children: [],
),
// Then the Positioned
Positioned(
top: -35.0,
left: 0,
right: 0,
),
],
),
I'm using GesturedDetector + Container in ListView as children, and it works fine.
but sometimes it's hard to scroll if I touch the Children when scroll.
Because GestureDetector detects my scrolling as tap, so the whole ListView doesn't scroll.
If I change the onTap to onLongPress, it solved, but not what I want.
So, Is there any great solution to my situation?
Now I only have an idea that makes children's margin bigger, reducing the chance that children are being touched.
I've tried the following code to try to reproduce your issue but it doesn't happen. When I drag the ListView moves up and down, when I tap it prints the String. Try this code on your app to see if the issue also happens.
ListView(
children: List.generate(50, (index) {
return GestureDetector(
behavior: HitTestBehavior.translucent, // You can try adding this to help
onTap: () => print('item $index'),
child: Container(
alignment: Alignment.center,
child: Text('item $index'),
height: 40,
),
);
}),
)
I have a Stack inside a Container with fixed size. The Stack has Positioned children with InkWell children inside. If I push a child to the left with e.g. left: -15, the InkWell is still visible outside the Container, however not clickable anymore outside of the Container.
Here the simplified version of the code:
Container(
width: 300,
height: 100,
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Positioned(
top: 0,
bottom: 0,
left: -15,
child: InkWell(
onTap: () {},
child: Padding(
padding: EdgeInsets.all(15.0),
child: Text("Test"),
),
),
),
],
),
);
I am trying to make the overflowing part (the 15 pixels to the left) of the InkWell clickable too. Right now I can only click everything inside the container.
The reason I am doing this is to make buttons easier clickable, while not moving the visible text to a different location.
Sadly:
It is intentional that widgets in the overflow area of a stack do not react to gestures and that's unlikely to change. I recommend that people with this (or similar) problems refactor their app to keep all interactable elements within the bounds of a stack.
source: https://github.com/flutter/flutter/issues/19445
In short, don't use overflow. Refactor your layout to make sure it's well contained inside the bounds of its parent.
I have a layout with two TextField and I am worried about all the items being resized when the keyboard is shown.
The layouts with and without the keyboard are in the picture below.
When the keyboard is shown all the widgets (TextField Text and Button) resize to the top.
As my widgets are wrapped into a SingleChildScrollView, even if the screen is small we can scroll to see all the items, therefore, there isn't a problem.
Widget _buildCamposLogin() {
return Form(
key: _formKey,
child: Container(
margin: EdgeInsets.only(bottom: 50.0, left: 30.0, right: 30.0),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
_buildLoginText(),
_buildCampoCPF(),
_buildCampoSenha(),
_buildSubmitButton(),
_buildCadastroText(),
],
),
),
),
);
}
So, the problem is I feel weird about moving everything to the top, shouldn't be better to move only the TextField which was focused and the other things above this TextField, instead of moving everything above and below the TextField which was focused.
If you think this is better, what would be the solution to move only the TextField and widgets above to the top?
Why my question is not duplicated
In the marked question, the guy asks how to prevent the keyboard from moving the widgets. And the answers say to set resizeToAvoidBottomInset: false in the Scaffold. That's is completely different from what I am asking.
I do want the keyboard to move the widgets to the top as it does. The problem is that it moves all my widgets, the 2 TextField the RaisedButton and the 2 Text at the bottom. I would like to move only the TextField which was shown as the following example.
Note the difference between these two pictures below and the others I've already uploaded.