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,
),
],
),
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 need to make a scrollable for all content for partiular page, but the problem is that I need to have dynamic list at the middle, which grows. So I use CustomScrollView. From top to bottom at slivers[] I have SliverToBoxAdapter decorated as I need, then SliverList and then another one SliverToBoxAdapter. This totaly what I need it is scrollable all together, byt decoration problem with SliverList. So i need to wrap somehow SliverList with the same style so it looks like content inside SliverToBoxAdapter (Borders, evevation, background etc). But I cant understand how to achieve this. The CustomScrollView accepts only Slivers..
I tried to put List inside SliverToBoxAdapter but it scrolls separately or...
Ive solved it but I think in comletely wrong way, with wrapShrink to True, but the Docs day it is very expensive.. And also weird because i moreover need to block scroll Physics with NeverScrollableScrollPhysics(). So looking for better solution
Maybe I do not need to use Slivers?
The general problem is I need vertically lets say Container then List (growable) and then another Container under the list, no matter how long the list are.
Like this
container
List with ability to
dynamically grow when user
taps button
Container strongly under
the List with button
by tapping which user add
the element to the List
Any solutions, ideas, advices ...
Thanks for attention)
Code for sake of simplicity
The BoxAdapter and SliverList
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Center(
child: Container(
child: Column(
children: [
Characteristics(),
],
),
),
),
),
// this is how I have done
// but do not like not lazy..
// if put SliverList directly cant decorate it..
SliverToBoxAdapter(
child: ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (contex, index){
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('Grid Item $index'),
);
},
itemCount: 20,
)
),
],
),
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.
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 Stack widget that contains two Image widgets, one image overlaying the other. One image has top set to 10 so it sits 10 pixels higher on the screen. Unfortunately the 10.0px gets cut off at the bottom of the screen. If I set an overflow.visible then I can see it.
I wrap the stack with a GestureDetector the 10.0px overflow is not inside the GestureDetector so when a user clicks on the bottom of the image, nothing happens. The images will be different sizes so I can't set a definite height.
Is there a way to increase the size of the GestureDector to the size of its children?
return new GestureDetector(
onTapDown: (x) => print('onTapDown'),
child: new Stack(
overflow: Overflow.visible,
children: [
new Positioned(
child: shadowImage,
top: 10.0,
),
new Positioned(
child: initialImage,
),
],
),
);
Can (should?) Stack expand its size to its positioned children?
No. But if you want the following, then your child should not be positionned.
Stack, if it has one, will size itself around the first non-positionned child.
So you could transform your shadowImage to
children: [
new Padding(
padding: const EdgeInsets.only(top: 10.0),
child: shadowImage
),
new Positioned(
child: initialImage,
),
],