I need to hide my FloatingActionButton when scrolling a SingleChildScrollView. I found something about how to hide it when the user scrolls down and then show it when the user scrolls up, but that's not what I'm looking for.
I want the button to remain hidden only during the scroll. I also tried playing with the NotificationListener but didn't come up with a solution
Hide until you don't get any more notifications.
NotificationListener<UserScrollNotification>(
onNotification: (notification) {
if (_show) setState(() => _show = false);
_timer?.cancel();
_timer = Timer(const Duration(milliseconds: 200), () => setState(() => _show = true));
return true;
},
child: <your widget>
)
Related
I made an automatic scrolling bar in flutter, the way I made it scroll automatically by using a combination of a timer and scroll controller, and then I linked the scroll controller to a regular ListView.builder, blew is the implementation of my way to do it
#override
void initState() {
super.initState();
int _length = widget.items.length;
currentItems = widget.items;
// scroll smothly to the end of the list then reverse the scroll
bool isAscending = true;
_timer = Timer.periodic(const Duration(milliseconds: 3000), (timer) {
if (isAscending) {
_currentIndex++;
if (_currentIndex == currentItems.length) {
isAscending = !isAscending;
}
}
if (!isAscending) {
_currentIndex--;
if (_currentIndex == 0) {
isAscending = !isAscending;
}
}
_scrollController.animateTo(_currentIndex * 304.0,
duration: const Duration(milliseconds: 3000), curve: Curves.linear);
});
}
my problem here is when I navigate to another screen or press the phone's home button and stay away from this widget for a while and then come back, I'd find it scrolling so fast to catch the currentIndex ( which is far away from where I left it ) in a period of time that I specified for the .animateTo method, I'm guessing the solution is to somehow pause the timer when I'm not in the same route, but I didn't find any reference of how to implement that
i want to add lazy loading for my app but when i put the new controller. the controller didn't work with the NestedScrollView that i've made.
my new controller:
final controller = ScrollController();
in my initstate:
controller.addListener(() {
if (controller.position.maxScrollExtent == controller.offset) {
getStoryUser();
}
and i put the controller into list view but its didn't work with the NestedScrollView that i've mentioned earlier. any solution for this matter? any help will be valuable thank you.
Attach this _scrollController with your scrollview
if ((_scrollController.position.pixels >
_scrollController.position.maxScrollExtent - 20)) {
if (_isLoading || _loadMore || ((_media.media?.length ?? 0) < 30)) {
return;
}
_pageNumber++;
_loadMore = true;
if (mounted) setState(() {});
await _loadData();
_loadMore = false;
if (mounted) setState(() {});
}
everything is fine to remove the focus from text field except for WillPopScope function, after i press back button the keyboard dismiss but the focus line still in the textfield.
let me know if you need more information about the code
removeFocus Code
void removeFocus() {
FocusManager.instance.primaryFocus?.unfocus();
}
WillPopScope Code
onWillPop: () async {
removeFocus();
return true;
},
i mean this blue line won't dismiss
This is what I am using in my project:
onWillPop: () async {
FocusScope.of(context).requestFocus(FocusNode());
return true;
},
Change your removeFocus() method as the following:
void removeFocus() {
FocusScopeNode currentFocus = FocusScope.of(context);
if (!currentFocus.hasPrimaryFocus) {
currentFocus.unfocus();
}
}
I have a requirement where I need to hide/show a widget ocassionally.
The widget is sitting right at the bottom of my layout. Immediately, the app loads I initially hide the widget by calling _slideAnimationController?.forward(); and then I noticed the widget is hidden but a white background was left behind by the SlideTransition widget, how can I remove this white background?
I don't want my users to know that there is a widget at the bottom until it is actually necessary to display it again using the SlideTransition.
Here is my code:
void initControllers() {
_scrollController.addListener(_scrollHandler);
_slideAnimationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 100));
_slideAnimOffset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 1.0))
.animate(_slideAnimationController!);
_slideAnimationController?.forward();
}
void _scrollHandler() {
if (_scrollController.position.atEdge) {
if (_scrollController.position.pixels != 0) {
_slideAnimationController?.reverse();
} else {
_slideAnimationController?.forward();
}
}
}
Here is my build method:
.....
SlideTransition(
position: _slideAnimOffset!,
child: Container(width:100,height:100), //When the animation runs and the container is hidden, a weird white background is left off. I don't want that white background at all. Once it is hidden, it should be fully transparent.
),
.....
And my initState is as below:
#override
initState() {
tintSystemChrome();
initControllers();
super.initState();
}
Any insights would be truly appreciated.
Thank you.
I have a similar problem to yours.
I ended up using the AnimatedAlign to achieve the slide in/out animation.
Here is the sample code:
AnimatedAlign(
duration: const Duration(milliseconds: 100),
alignment: Alignment.topCenter,
heightFactor: isVisible ? 1.0 : 0.0,
child: Container(width:100,height:100),
);
I am trying to animate navigation between two pages. I managed to animate the loading of the second page by following Reso Coder's Tutorial. But I also needed to animate "exiting" animation for the current page.
I managed to achieve it using Animated Widget (stanim). When a user clicks on the navigation button, I just start the animation, and when the animation finishes it runs the navigation code. This works somewhat like what I needed but the animation looks janky when page animation finishes and PageRouteBuilder animation starts.
_controller = AnimationController(
vsync: this, duration: Duration(milliseconds: duration))
..addStatusListener(
(status) {
if (status == AnimationStatus.completed) {
if (widget.nextPageBuilder != null) {
Navigator.push(
context,
PageRouteBuilder(
transitionDuration: Duration(milliseconds: duration),
pageBuilder: (context, animation, secondaryAnimation) =>
widget.nextPageBuilder(animation),
),
);
}
}
},
);
Here is navigation logic
return ForwardButton(onPressed: () {
_controller.forward();
});