First, I have a CustomScrollView that has several SilverGrids as children.
CustomScrollView(
controller: _scrollController,
slivers: <Widget>[
_grid1(),
_grid2(),
_grid3(),
],
)
Then I have a button that controls the CustomScrollView to scroll to just show Grid2 when pressed
RaisedButton(onPressed: () {
_scrollController.animateTo( _getGrid2Offset(),
duration: Duration(milliseconds: 200), curve: Curves.linear);
},)
But I don't know how to calculate the position of Grid2 relative to CustomScrollView
The answer is you can't (right now) to calculate this value directly.
You will have to calculate the offset yourself which will cover most of the basic cases. If you have a list of items with the same height then you can do a simple
var offset = index * height + somethingElse
and give this value to the widget. If your case is more complex then you should create a function to calculate it from all the factors like size,type,margin,padding.
Related
I have a layout where I have a row and inside this row, I have a custom expansion tiles list and a custom widget, which is a rectangle with a fixed width of 5 pixels, the height of the rectangle must be the same, as the expansion tile's height.
To make the rectangle the same height as the expansion panel, I used intrinsic height.
So, the structure is this IntrinsicHeight: Row: [ExpansionPanel, Container]
The problem is that when I use IntrinsicHeight all animations are broken.
Animation in the expansion tile list is working, but the container which contains the row does not resize following the animation, but does it without any intermediate steps.
I have tried to use different types of animation.
Implicit tween animation builder
return TweenAnimationBuilder(
tween: Tween<double>(begin: 0, end: opened ? 1 : 0),
duration: Duration(milliseconds: 600),
builder: (_,double value, __){
return ClipRect(
clipBehavior: Clip.antiAlias,
child: Align(
alignment: Alignment.bottomCenter,
heightFactor: value,
child: value != 0 ? body : null,
),);
}
);
Cross fade animation
return AnimatedCrossFade(
firstChild: body,
secondChild: Container(height: 0,),
duration: Duration(milliseconds: 600),
crossFadeState: opened ? CrossFadeState.showFirst : CrossFadeState.showSecond,
sizeCurve: Curves.ease,
);
Changing animation type didn't fix my problem.
My questions are following:
Is there an option to make an animation of size simultaneously using IntrinsicHeightWidget
If there is not such an option, Is there an option to make a Rectangle widget with the same height as an expansion tile list, but without the IntrinsicHeight widget.
I have captured a video to show how the problem looks like.
https://www.youtube.com/watch?v=xpQ8QHwHUWQ
I have seen similar problems, but I didn't get success implementing them in my case.
Flutter - Animate change on height when child of container renders
Stretch children of a Flutter Row to the maximum *natural* height
How to stretch Containers inside Row to maximum available height?
Please check the video / gif:
I have a pageview that will make the current tab active. I need to ensure the active tab is always visible even if the user swipes the screen multiple times. It is working from the left to right. But when we try back from right to left it's not behaving as expected.
PageView file
PageView(
controller: pageController,
onPageChanged: (int page) {
_duaWidgetState.currentState.updateBtn(page + 1);
Scrollable.ensureVisible(
_duaWidgetState.currentState.activeBtn.currentContext);
},
children: loaded
TabBarWidget with scroll view file
GlobalKey activeBtn = GlobalKey();
var _selectedTab = 1;
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(vertical: 20),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List.generate(widget.numberOfTab,
(index) => tabBarItem(index + 1, widget.numberOfTab, activeBtn)),
),
),
);
}
Container that uses the Key
Container(
key: activeBtn,
margin: EdgeInsets.only(left: 20),
padding: EdgeInsets.symmetric(
vertical: 10,
horizontal: 24,
),
No One answered my Question. But, after a lot of effort and time. I found a workaround to fix this problem. Hope this is a bug and will fix by the flutter team in the coming updates.
Scrollable.ensureVisible(_duaWidgetState.currentState.activeBtn.currentContext);
This function has an optional argument called alignment which can be adjusted to make sure the selected element/button is in the center of the viewport. (In my case horizontally center).
My widgets are horizontally scrollable, so I need to update the page number according to the result from PageView(), Here when I used
alignment: 0
Its working fine from left to right swipes of page view. But with this alignment when i swipe page from right to left to go to previous page in the PageView widget, the ensureVisible is not working like expected. The selected element/button is out of the view. I experimented and found that when I used
aligment: 1
The ensureVisible is working fine from the swipes from right to left but at the same time. when I scroll left to right the same problem occured.
Finally, so I managed to do some workaround to fix this behavior. The solution is to store last page index in a variable and check whether the last page is greater than the new page then alignment: 0 and if the last page less than the new page aligment:1 like that.
PageView(
onPageChanged: (int page) {
if (lastPage < page) {
Scrollable.ensureVisible(
_duaWidgetState.currentState.activeBtn.currentContext,
alignment: -0.0100,
);
} else {
Scrollable.ensureVisible(
_duaWidgetState.currentState.activeBtn.currentContext,
(Perfect For font size 24)
alignment: 1.005,
);
}}
Hope my answer will help someone in the future.
I modified the original ensureVisible() a bit and this works in both directions in my case:
// `contentAnchor` is the global key of the widget you want to scroll to
final context = contentAnchor.currentContext!;
final ScrollableState scrollable = Scrollable.of(context)!;
scrollable.position.ensureVisible(
context.findRenderObject()!,
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
I have a Stack with two Columns.
First column contains contains only one child (1) with InteractiveViewer which has defined height (for example 250). It changes its content's zoom and translation based on scroll offset of SingleChildScrollView from second column. It shouldn't be pushed out of the screen while scrolling, so it's under the scroll view in a stack.
The second column have SingleChildScrollView with top padding (2) OR first view (3) that matches the (1) height.
Now I'd like to make the top padding (2) or view (3) not scroll the SingleChildScrollView but pass those touch events to InteractiveViewer. Doesn't matter whether the solution use padding or empty view, I just wanted to note here than what I want can be achieved with padding or view. I tried both but failed.
I tried the GestureDetector, IgnorePointer and AbsorbPointer, but seems like the SingleChildScrollView always get the touch events. I haven't found a way to make the top padding not scrollable too.
Basically I'd like to achieve something similar to the attached gif, except that I don't need the "Collapsing Header" text animation and app bar. Just pay attention to the mountains that hide below the scroll view. The scroll view should take entire screen once the scroll offset is equal padding/view height (250 in this example).
Is that possible somehow? My logic behind InteractiveViewer is way more complicated than the example provided below, I just simplified it to make the question easier to understand.
Stack(children: [
Column(
children: [
Container( // (1) Widget that should get the touch events
height: 250,
child: InteractiveViewer(...)
),
],
),
Column(
children: [
Expanded(
child: SingleChildScrollView(
padding: EdgeInsets.only(top: 250), // (2) Either not scrollable padding
child: Column(
children: [
Container(height: 250), // (3) or not scrollable first item
Container(...)
],
),
),
),
],
),
]);
I have a ListView in Flutter that I allow users to dynamically add items to. After adding an item I would like for the list to scroll to the item that was added. I've attached a ScrollController to the ListView so I could use animateTo to scroll, but I'm unsure of how to determine the offset to scroll down to. I had something like this:
_scrollController.animateTo(
addedIndex.toDouble() * 100,
curve: Curves.easeOut,
duration: const Duration(milliseconds: 300),
);
where addedIndex is the order that the item was added to the list. That doesn't quite work though, and seems like it would only work if I could figure out the height of each item in the list, which I'm not sure how to do. Is there a better way to figure out exactly where to scroll to?
First, create a new globalKey.
final GlobalKey globalKey = GlobalKey();
Second, add globalKey to the widget you want to move to.
Then, get the widget location based on globalKey.
RenderBox box = globalKey.currentContext.findRenderObject();
Offset offset = box.localToGlobal(Offset.zero);
The widget position obtained is relative to the current page display status , widget height includes status bar and AppBar height.
status bar height
import 'dart:ui’;
MediaQueryData.fromWindow(window).padding.top
AppBar height 56.0
scrollView's offset need to add
double animationHeight = _controller.offset + offset.dy - MediaQueryData.fromWindow(window).padding.top - 56.0;
_controller.animateTo(animationHeight, duration: Duration(milliseconds: 500), curve: Curves.decelerate);
hope it will help you.
I implemented SlideTransition for a widget in flutter, and it slides in as expected. The issue is that before the animation is called, the space where the slider is going to be displayed later is empty.
How can I make the parent to give this space to other widgets in the layout until the moment that a slider comes into view?
I was thinking about giving a slider the initial height of zero, but then the widgets inside the slider would act funny as the height changes in sync with sliding. I wonder if there is a simpler way.
The parent is:
new Scaffold(
appBar: _appBar,
body: new Column(
children: <Widget>[
new Expanded(
child: _body;
}),
),
new SlideTransition(
position: _sliderPosition, //
child: _slider,
),
],
);
And the position is defined as:
_sliderPosition = new MaterialPointArcTween(
begin: const Offset(0.0, 1.0),
end: Offset.zero,
).animate(_animationController);
I solved this issue by replacing _slider with _buildSlider() which returns null until a slider is needed.
This is also better for performance as there is no need to render a slider if it's hidden.
Bumped into the same issue with a SlideTransition taking the full height during a vertical slide. In the end I achieved the slide effect by using a SizeTransition instead, and setting its axisAlignment property accordingly (-1, 0, 1 for top/center/bottom in my case).