Flutter Tutorial - Scroll To Index/Item In ListView | Scrollable Positioned List

Scroll to any index in the ListView in Flutter and scroll to any position and item in the ListView programmatically in Flutter. Scroll to any widget in the ListView and detect which items are currently visible in the ListView.
Click here to Subscribe to Johannes Milke: kzbin.info...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/scro...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Scroll To Top/Bottom In ListView Tutorial: • Flutter Tutorial - Scr...
Preserve Scroll Position In ListView Tutorial: • Flutter Tutorial - Flu...
Show/Hide AppBar On Scroll Tutorial: • Flutter Tutorial - How...
Show/Hide Bottom Bar On Scroll Tutorial: • Flutter Tutorial - How... ´
Create Simple Scrollbars Tutorial: • Flutter Tutorial - Cre...
Draggable Scrollable Sheet Tutorial: • Flutter Tutorial - Dra...
Create Custom Scrollbars Tutorial: • Flutter Tutorial - Cre...
Deep Dive SliverAppBar Tutorial: • Flutter Tutorial - Sli...
Show/Hide StatusBar Tutorial: • Flutter Tutorial - Sho...
Slivers & Sticky Headers Tutorial: • Flutter Tutorial - Sti...
AppBar & Transparent AppBar Tutorial: • Flutter Tutorial - App...
Bottom Navigation Bar Tutorial: • Flutter Tutorial - Bot...
Animated Bottom Navigation Bar Tutorial: • Flutter Tutorial - Ani...
Page Transition Animation Tutorial: • Flutter Tutorial - Pag...
Hidden Drawer UI Tutorial: • Flutter Tutorial - Hid...
Scrollable Sheet Tutorial: • Flutter Tutorial - Dra...
Animated List Tutorial: • Flutter Tutorial - Ani...
Navigation Drawer Tutorial: • Flutter Tutorial - Sid...
Fix Bottom Overflowed By Pixels Tutorial: • Flutter Tutorial - Fix...
Expansion Tile Tutorial: • Flutter Tutorial - Exp...
Create Invoice PDF Tutorial: • Flutter Tutorial - Cre...
TIMELINE
0:00 Introduction Scroll To Index & Scroll To Item In ListView
0:19 Scroll To Item In ListView / Jump To Item In ListView
3:05 Item Jump To Start/Center/End Position Of Screen
3:38 Animate To Item In ListView
3:52 Scroll To Index In ListView
5:22 Detect If ListView Item Is Visible On Screen / Check Widget Visibility In ListView
6:12 Detect Completely Visible Items In ListView
7:19 Detect When Item/Widget Becomes Visible In ListView
7:47 Automatically Scroll After Build To Item In ListView
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke

[@HeyFlutter]

This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/scrolling_example

[@liamspiegel2444]

Hi Johannes, I have been looking for this information for hours. Your videos are so helpful, easy to understand and cool made that your youtube channel is the most helpful youtube channel on programming that I know. Thank you so much for this perfect video.

[@anugrahkorambeth431]

This is exactly what I was looking for! Thankyou for this awesome tutorial!❤️

[@satyamdubey4529]

You are the most passionate guy. Thanks 😊

[@booomit2804]

after wasting 3 hour finally i found it!! YOU ARE GOD MEN!

[@HeyFlutter]

Thanks, @booomit2804! 🙂

[@aashismaharjan7641]

Thank you very much for this video. After searching for days and days trying to add auto scroll to my project using anime to, jump to but in the end your code help to implement that with only two line of codes.

[@poomc5462]

Will you do an alphabetical listview for flutter next? This really like the content on this channel!

[@Study2_217]

Really Helped Bro

[@HeyFlutter]

Thank you, @StudyStorage-lh9gm! 🙂

[@AiEnthusiast999]

thanks for the example

[@paulapastragus7651]

Awesome! You're the best! Thanks !!!

[@eNONO-ot4zh]

You are magician. Thank u 😍

[@h3w45]

very helpful video

[@user-ks5rv8wz4w]

thank you

[@faisalmushtaq2287]

thanks! Had to use this today in my project

[@HeyFlutter]

Thank you, faisal mushtaq! 🙂

[@janammaharjan2699]

Thank you very much as always very grateful

[@HeyFlutter]

You are welcome, @janammaharjan2699 😊

[@erikapueblo6871]

This has been really helpful! Thank you! I tried it but had some problems when I used the Scrollable Positioned List inside a StreamBuilder. How can I access the Scrollable Positioned List in this case?

[@KevinCanoCB]

Thanks

[@pravinprince3221]

Thank you for the wonderful video sir it is very helpful for me and my team, Thanks again sir

[@HeyFlutter]

Glad to hear that, You are welcome @pravinprince3221! 😊

[@minhajraza2268]

thanks I used it for on page navigation in flutter and it works fine.

[@HeyFlutter]

Glad you liked it, @minhajraza2268 😀

[@reactnativedeveloper1682]

you always make good videos

[@HeyFlutter]

Thank you, ReactNative Developer! 🙂

[@medsed1133]

Super bro super !!

[@denzelgui6474]

very nice

[@manankoyawala5337]

Thanks Bro it works for me i suggest you all if you try to make textfeild validation auto scroll so you have to place validation key above form widget if you place key above singlechildscrollview it will not worked like this :- SingleChildScrollView( scrollDirection: Axis.vertical, child: Container( key: scroll, child: Form( key: widget.formkey, child: Column( children: [ const SizedBox(height: 10), TextFFeild(

[@HeyFlutter]

Great, thanks for sharing your knowledge with others, @manankoyawala5337! 🙂👍

[@sridharmarella8581]

Hi Joh, How to highlight the widget for a specific amount of time after scrolling?

[@aradhya1712]

Column is not recommended for Large lists.. I am not sure about scrollable positioned list

[@arvingabrieltrinidad2029]

Hi, can you do it in nested listview?

[@sridharmarella8581]

Can we add a sticky header to this having multiple sections?

[@b_rabbit9774]

thanks for this, but i need help. I have a book app where from reading page i have a bookmark button to save the current index/position of the listview. and from the main page if i click the bookmark button where the index of the saved position from reading page was set it will open the reading page and set the position to the index that was saved as bookmark. how to achieve that?

[@DraskoSaric]

Great video! What would be the most precise way to jump to the bottom of the list if widgets in the list have different heights?

[@HeyFlutter]

Thank You @DraskoSaric! Follow this link: github.com/flutter/flutter/issues/80445 I hope you will get your answer 🙂

[@mostcommunityofficial]

All your videos are awesome! an off-topic question, How could I put 2 conditions on the same line? ex: if (....) {} else if (....) {} but in one line of code. (with "?" and ":")

[@mostcommunityofficial]

@@HeyFlutter

[@aneeshgupta5634]

Hello sir..Thanks a lot for the content!.. I have used the Scrollable Positioned List and item listener as taught by you, but the issue is that the response in item listener is taking a bit long. I am using this response in item listener to update my bottom navigation view (which consist of 5 items). But the bottom view updates after 1 second (approx).. Can you please suggest me something on this..?

[@HeyFlutter]

Thank You Aneesh Gupta! Follow this link: stackoverflow.com/questions/49153087/flutter-scrolling-to-a-widget-in-listview I hope you will get your answer 🙂

[@ashishrana5773]

thank you very much. By the way do you have any example of auto scroll function which scrolls as per the speed defined by the user ??? I want page to be scrolled automatically and define speed like 0 1 2 3 …… thanks again

[@HeyFlutter]

Your idea is interesting, ashish rana! 😀 I'll try to cover in upcoming videos

[@ashishrana5773]

@@HeyFlutter that would be awesome …. I hope very soon .. 😂

[@josephkamande4502]

How can I scroll starting from where new messages start in chat app

[@brokercl]

how can get all docs from a firebase collection?

[@kamalCode]

Sir, please flutter navigator 2.0

[@devsang]

Can use this package is available with the grid view?

[@HeyFlutter]

Sure, Dev Sang! 🙂

[@FazzoHD]

How would you scroll automatically if data has been changed inside let's say inside an AppStateManager? I added a listener which would scroll to a specific index after a change in data, but when it scrolls to the index it would bounce back up/down either to the beginning or end (outside the listview). Hard to explain without showing haha

[@HeyFlutter]

Thank You tristan sp! Follow this link: kzbin.info/www/bejne/fJythqqwjrehaKs&ab_channel=DevStack I hope you will get your answer 🙂

[@ishanweerakoon9838]

how to set item with n index for middle of the screen don't use button .I want to set today as 0 index and yesterday as -1 index tomorrow as 1 index . Then want to scroll up and down sides. 5 by five .please help me

[@ishanweerakoon9838]

@@HeyFlutter It is with the button .I dont want to add the button I want just, user open the app it will automatically go the item of relevant index.

[@alphapro94]

Is there anyway that detect if ListView item is visilne on screen by using LisVIew,builder ?

[@HeyFlutter]

Thank You AlphaPro! Follow this link: stackoverflow.com/questions/57011733/find-out-which-items-in-a-listview-are-visible I hope you will get your answer 🙂

[@harwindersingh6880]

but it does not have scroll controller to add the listener to detect the user direction .

[@HeyFlutter]

Thank You Harwinder Singh! Follow this link: stackoverflow.com/questions/61353499/how-to-detect-the-last-direction-user-scrolled I hope you will get your answer 🙂

[@UCDAT]

Please tell me how to hide flutter WebView ugly scrollbar ...

[@HeyFlutter]

Thank You @cib_s! Follow this link: github.com/flutter/flutter/issues/133738 I hope you will get your answer 🙂

[@mohammedhamdan5323]

but could we detect if we reach the top or button using ScrollablePositionedList .. i cannot see any position in listener like normal ScrollController.position.pixels which listview.builder use it

[@HeyFlutter]

Thank you 😊, Mohammed Hamdan! Check out this video : kzbin.info/www/bejne/jojJmJKaZ9mSfs0

[@user-bh9oj6vq2v]

How can we get in touch with you ?

[@lovekeshsinghkhalsa4251]

Hi Milke, I ask you last time one thing is that one account for one device in app like WhatsApp. Prevent to open same account in multiple devices at the same time.

[@lovekeshsinghkhalsa4251]

@@HeyFlutter actually m using MYSQL as backend with php for server requests. Thanx

[@will4900]

i do the same thing but my widget doesn't get highlighted in scrollablepositionned list, is it normal?

[@will4900]

@@HeyFlutter I'll try again with the exact code from the repo

[@kishores-ik4zw]

can i achieve scroll to index without scrollable positioned package

[@HeyFlutter]

Thank You kishore s! Follow this link: stackoverflow.com/questions/49153087/flutter-scrolling-to-a-widget-in-listview I hope you will get your answer 🙂

[@kishores-ik4zw]

@@HeyFlutter tq

[@alisher_vt]

So you suggest to add a GlobalKey for a list item. But what about If list view contains 500 items. 500 GlobalKeys, don't you think it is too expensive?

[@HeyFlutter]

Thank You @SilencePrince! Follow this link: medium.com/@NALSengineering/flutter-from-zero-to-hero-part-7-the-power-of-globalkey-6abf818225a0 I hope you will get your answer 🙂

[@alisher_vt]

@@HeyFlutter Again.. GlobalKey is expensive and should be used for specific cases. Let's say I have 1K items in a list. I want to have possibility to scroll to any item . So do you suggest to create 1K global keys (per item)? So what I want to say is that I am not sure if your example will work in real world. Btw article you suggested me does not give any info related to this video.

[@hashankannangara8723]

❤️❤️😍😍

[@janarthanans1452]

i got an doubt...can anyone please reply to this comment.... what if i need to scroll for specific position when the scrolldirection is HORIZONTAL i tried the same method can anyone suggest some idea please

[@HeyFlutter]

Hello, @janarthanans1452! Follow this link: stackoverflow.com/questions/69345235/scrolling-to-a-item-in-horizontal-list-view-inside-vertical-list-view-in-flutter/76431628 I hope it will solve your problem. Thank You 🙂

[@iseng-.-]

how to do it in SingleChildScrollView?

[@HeyFlutter]

Thank You @playwithrmdhn9462! Follow this link: pub.dev/packages/scroll_to_index I hope you will get your answer 🙂

[@iseng-.-]

@@HeyFlutter it works thanks so much bro 😎✅

[@theelofiguy]

access to source code is not working

[@HeyFlutter]

Hey, @theelofiguy 🙂 you need to subscribe on github to access code

[@TYNEPUNK]

thanks very much!.. i used an array of keys like this keyForSearchingList = List.generate(50, (index) => GlobalKey(debugLabel: 'key_$index'),growable: true);

[@HeyFlutter]

You are welcome, TYNEPUNK!