The efficient way to implement a vertically translating widget on user drag - flutter

I want to translate a widget vertically as the user drags. I tried implementing it using two options:
AnimationController
Value notifier.
So when I use the animation controller the scroll is not very smooth and the widget is being scroll after a delay even when the duration of the animation is 1 milliseconds.
When I implement it using value notifier it is much better but still not as smooth as the ListView scroll. Is there a better way to scroll\translate a widget on user drag?

I found a better solution for this. Although it can be achieved using Gesture detector but that is not as smooth. Flutter has another wonderful widget for this and that is DraggableScrollableSheet.
If you want container for a Scrollable list that responds to drag gestures by resizing the scrollable until a limit is reached, and then scrolling this is the widget you should be using.
DraggableScrollableSheet(
initialChildSize: .70,
minChildSize: .70,
builder: (BuildContext context, ScrollController scrollcontroller){
scrollcontroller.addListener((){
});
return Container(
child: ListView.builder(
controller: scrollcontroller,
itemCount: widget.songs.length,
itemBuilder: (BuildContext context, int index) {
return buildSongRow(widget.songs[index]);
})
);
})
The above list will be place at the 70 percent of the height of the screen initially. When you scroll up it drags the list up to the top and then the list scrolls as a normal listview. When you reach the top while scrolling, the list drags down to the initial position(70 percent of height).

Related

Making parent adjust to size of child widget

I am using a ListView Builder, and that has to be wrapped inside a Container. If i don't give a height parameter then i get Vertical viewport was given unbounded height. Now, because of this if i only have 1 item in the list, any content comes after the container, which wastes a lot of screen real estate and doesn't look aesthetically pleasing.
How can i make the parent widget i.e Container() to adjust to the size of child widget ListView.builder() ?
Add this shrinkWrap: true to your ListView and Remove Height from container.
snippet code:
return Container(
child: ListView.builder(itemBuilder: (context, index) {
return listItem(itemArray[index]),
},
itemCount: itemArray.length,
shrinkWrap: true),
);

How to make scrolling page continue even when tabBarView reaches the top? Flutter

The code I ran was the code that was given by Griffins here: How To Move The TabBarView in the Center to The Top of the Page?
Everything is the same as the code given by Griffins.
However, when the tabBar was scrolled to the top and locked there, the content under each widget stopped scrolling too.
I want the content of the widget page to continue scrolling to its end, even when the tabBar is locked at the top.
Even if pinned and floating of SliverPersistentHeader was declared false, all it does is just to make the tabBar scrolled up, the content of the tabBarView still ends at the similar position. This is occurring for both tabBarViews.
So I'm suspecting it has something to do with the sliverfillremaining taking up the remaining height. Is there a way to overcome this? and show all the content of the tabBar?
Solved.
I changed the SliverFillRemaining to
SliverToBoxAdapter(
child: AnimatedBuilder(
animation: tabController.animation,
builder: (ctx, child) {
if (tabController.index == 0) {
return Page1();
} else
return Page2();
}),
)

Flutter: how to make card expand to whole screen?

I have some cards in gridview. I want ontap of any card, they should expand to whole screen.
this are the cards,
HAVE TO DELETE IMAGES BECAUSE OF CONFIDENTIALITY
I want them to expand to whole screen like this,
what I have tried,
-> I have tried using OpenContainer widget,
-> custom hero animation
but they both use pageroute but I want them to do it without the page route because there is some content like appbar which would be same for both screen so I don't want them rebuild it everytime user tap on any of the card.
if anyone can lead me to right direction that would be awesome
Take a look at this package: https://pub.dev/packages/animations
if you don't like using pageroute you can just switch your widget using StatefulWidget and Visibility.
And wrap your Card with InkWell then use the onTap / onPressed callback to set change the state so the Visibility will start work now
Create a function
Widget transition(Widget _child) {
return PageTransitionSwitcher(
duration: const Duration(milliseconds: 800),
transitionBuilder: (
Widget child,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
return SharedAxisTransition(
child: child,
animation: animation,
secondaryAnimation: secondaryAnimation,
transitionType: SharedAxisTransitionType.horizontal,
);
},
child: _child,
);
}
Add it on your scaffold:
transition(child:condition ? widget_1 : widget_2);
I'm not 100% sure what you meant by expand to the whole screen, but you probably need to use the Hero() widget, wrap each widget you want to expand with a Hero() widget and give it a tag: 'spo2' for example, make a new screen for the second image, wrap each card with a Hero() and the same tag in the previous screen for the expanded card.
For further reading check out https://api.flutter.dev/flutter/widgets/Hero-class.html
Try using a dialogue and animating the opening.

How to scroll to an index by its index number in flutter listview?

I have a listview . I want to go to a certain widget by it's corresponding index number.
I've tried with ScrollController, but it need offset value to jumpTo the index. But I want to jumpTo a widget by using its index number.
Please, help me to fix it
Thanks in advance.
Unfortunately, ListView has no built-in approach to a scrollToIndex() function. You’ll have to develop your own way to measure to that element’s offset for animateTo() or jumpTo(), or you can search through suggested solutions/plugins from other posts such as:
flutter ListView scroll to index not available
Flutter: Scrolling to a widget in ListView
(the general scrollToIndex issue is discussed at flutter/issues/12319 since 2017, but still with no current plans)
But there is a different kind of ListView that does support scrollToIndex:
ScrollablePositionedList
scrollable_positioned_list
dependency: flutter_widgets
You set it up exactly like ListView and works the same, except you now have access to a ItemScrollController that does:
jumpTo({index, alignment})
scrollTo({index, alignment, duration, curve})
Simplified example:
ItemScrollController _scrollController = ItemScrollController();
ScrollablePositionedList.builder(
itemScrollController: _scrollController,
itemCount: _myList.length,
itemBuilder: (context, index) {
return _myList[index];
},
)
_scrollController.scrollTo(index: 150, duration: Duration(seconds: 1));
(note that this library is developed by Google but not by the core Flutter team.)

BottomSheet always appear in expanded state, it's always in full height. Why is this happen? What's the possible cause of this?

I want to show a bottom sheet after the user tap on the FAB button. At first, it was working properly but I didn't know why it suddenly started to appear in full height/expanded state mode all the time.
I've tried with all type of bottom sheet listed in the document. It has the same problem.
// _scaffoldKey.currentState
// .showBottomSheet((context) => AccountView());
showModalBottomSheet(
context: context, builder: (context) => AccountView());
In the AccountView is a ListView, Currently, there's only one item. The bottom sheet height should only be equaled to the height of the ListTile. But it appears in full height instead.
You can use shrinkWrap: true, property in ListView or you can put AccountView() in a container and give it height.
Turn out I need to set shrinkWrap in the column to true.
Column(
shrinkWrap: true,
...
)