TOP 12 ListView Widgets | Flutter Tutorial

  Рет қаралды 33,405

HeyFlutter․com

HeyFlutter․com

Күн бұрын

These are the TOP Flutter ListView Widgets! We cover Pull To Refresh, Infinite Scrolling ListView, Nested Columns and ListViews and more.
Click here to Subscribe to Johannes Milke: kzfaq.info...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/top_...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
TIMELINE
0:00 Intro
0:10 1. Pull To Refresh
1:24 2. Infinite Scrolling ListView
4:48 3. Spread Operator
5:25 4. Nested Columns and ListViews
7:11 5. SingleChildScrollView
9:04 6. ListView With JSON Data
1:16 7. Sticky Header
12:07 8. Search & Filter ListView
13:45 9. Reorderable ListView
14:27 10. ListView With Navigator
15:51 11. Horizontal ListView
17:02 12. Vertical ListView
18:09 BONUS: Grouped ListView
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)

Пікірлер: 72
@HeyFlutter
@HeyFlutter 2 жыл бұрын
This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com ALL Source Codes: github.com/JohannesMilke/top_listview_widgets TOP 7 AppBar Widgets: kzfaq.info/get/bejne/itKSlayC3tGse2Q.html TOP 10 Flutter Widgets: kzfaq.info/get/bejne/nbFia5uLy-DOc5c.html Neumorphism Tutorial: kzfaq.info/get/bejne/d5hylcujmKqrlGQ.html Hide AppBar On Scroll Tutorial: kzfaq.info/get/bejne/ruCAi9SCkrbJYps.html Hide/Show AppBar & Floating Action Button On Scroll: kzfaq.info/get/bejne/kNljd5mn2J3MXZ8.html Bottom Sheet Tutorial: kzfaq.info/get/bejne/ir6JqMSa2tHbZ3k.html Popup Dialog Tutorial: kzfaq.info/get/bejne/ataeYMKeyZuznGg.html Scaffold Widget Tutorial: kzfaq.info/get/bejne/nMmRnrR317C6doU.html Hide Bottom On Scroll Tutorial: kzfaq.info/get/bejne/ptiPetJqrpedg3U.html Bottom Navigation Bar Tutorial: kzfaq.info/get/bejne/rtV7pLSbuKq-ZmQ.html Animated Bottom Navigation Bar Tutorial: kzfaq.info/get/bejne/b5uAeKd93auppJs.html
@marklai4567
@marklai4567 2 жыл бұрын
Thanks for sharing! All of your videos are great! Always clear and easy to understand! Many thanks!
@JihedMrouki
@JihedMrouki 2 жыл бұрын
thank you for sharing these tips and for the uploads it helps alot, could you also do a mini series on state management ? provider ,riverpod, bloC ,getX and the differences between them?
@suneelasiddiqui4957
@suneelasiddiqui4957 2 жыл бұрын
Great video and really helpful! I hope you will make a series on state management using providers one day 😊
@yalamoussalancineyeo1893
@yalamoussalancineyeo1893 2 жыл бұрын
Good job, God bless you for all your effort !!!
@Musicstations221
@Musicstations221 2 жыл бұрын
My crazzy guy, thanks 4 all the excellent work you have done ✔ 👍
@dicksonguinajnr1449
@dicksonguinajnr1449 2 жыл бұрын
Thank you so much my brother.. God Bless
@mohamaddody1338
@mohamaddody1338 Жыл бұрын
Thank you for sharing information with everyone. People around here really appreciate this
@HeyFlutter
@HeyFlutter Жыл бұрын
Glad to hear that, Thank you Mohamad Dody! 😊
@hashankannangara8723
@hashankannangara8723 2 жыл бұрын
Wow!! this video is amazing.. thanks a lot!!
@muhammadissasabbagh1540
@muhammadissasabbagh1540 2 жыл бұрын
Very useful information and tips 😃
@chaddrobertson5805
@chaddrobertson5805 Жыл бұрын
Been trying to get off of my arse and build some more complicated / user friendly projects. This video is superb, and has definitely helped me do just that. Thank you!
@HeyFlutter
@HeyFlutter Жыл бұрын
Glad it was helpful, @chaddrobertson5805 😀
@mustafashaikh7829
@mustafashaikh7829 2 жыл бұрын
Nice video and good teaching on point to point. Can you make a video upload file from list view builder and show progress indicator on selected index...
@mrishalap
@mrishalap 2 жыл бұрын
Powerful intro 🔥
@aslahflutterdev5954
@aslahflutterdev5954 2 жыл бұрын
i agree
@harimakani2316
@harimakani2316 2 жыл бұрын
Great Video
@attituderecord7589
@attituderecord7589 2 жыл бұрын
Thanks so much
@hassanosama357
@hassanosama357 2 жыл бұрын
Thats great video, You can also make video on Sliver kit, which also have SliverList and other kind of cool stuffs
@crazy-man
@crazy-man 2 жыл бұрын
cool, Exactly what is needed
@user-ks5rv8wz4w
@user-ks5rv8wz4w 2 жыл бұрын
Thank you
@cavidanbagiri7837
@cavidanbagiri7837 2 жыл бұрын
Super teacher
@cookie0119
@cookie0119 Жыл бұрын
감사합니다 이 영상 덕분에 플러터를 쉽게 배울 수 있네요. 정말 유용합니다
@HeyFlutter
@HeyFlutter Жыл бұрын
You’re most welcome, 내가 만든 국기.! 🙂
@marioluque4786
@marioluque4786 Жыл бұрын
This video is gold
@HeyFlutter
@HeyFlutter Жыл бұрын
Thanks, Mario Luque! 🙂
@minafaried
@minafaried 2 жыл бұрын
Amazing
@jigneshji3228
@jigneshji3228 2 жыл бұрын
Nice video sir..
@uvaismohammad4216
@uvaismohammad4216 2 жыл бұрын
You are wonderful 💙❤🚀
@sarathrkrishnan6610
@sarathrkrishnan6610 2 жыл бұрын
Love from India ❤️
@__mothership__8475
@__mothership__8475 2 жыл бұрын
Hi johannes, I am getting difficulty in fetching date , time from google sheet api . Can you make a short video on storing date, time to google sheet api and fetching in app. Will be really helpful for me
@typescripter
@typescripter Жыл бұрын
Thx
@HeyFlutter
@HeyFlutter Жыл бұрын
You are welcome, 코도!
@sleepingsaintz
@sleepingsaintz 2 жыл бұрын
How to create nested re orderable list view as in Google tasks app?
@kareemobaid6618
@kareemobaid6618 2 жыл бұрын
i really like all of that, you are my super hero sample for flutter, a question, why don't you use getX ? is it cause of a reason you have, it could help us if we know it, or what? thanks for all of that
@antongrekov7710
@antongrekov7710 2 жыл бұрын
GetX bad, provider is better
@ein44sam
@ein44sam 2 жыл бұрын
13:33 When you return to first page after BookPage you will get focus to TextField and the keyboard will pop out. How to prevent this behavior?
@xXxXxMrGamexXxXx
@xXxXxMrGamexXxXx 2 жыл бұрын
Great tutorial, u think u can make a a tutorial how to create a Picker Menu Height and Weight pls?
@xXxXxMrGamexXxXx
@xXxXxMrGamexXxXx 2 жыл бұрын
@@HeyFlutter thanks
@slideslipping
@slideslipping 2 жыл бұрын
12:08 Is there any advantage using showSearch and SearchDelegate over the method shown here?
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank you, slideslipping! 🙂. It depends on the requiremnet of the app.
@mdshahidali3132
@mdshahidali3132 2 жыл бұрын
Create a video on AWS in flutter sir.
@__mothership__8475
@__mothership__8475 2 жыл бұрын
Hi Johannes, lets say I have 3 json data with 5 elements each and i want to create a search Listview for the combination of all. How can I do it ??
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank you, Vipul Ghate! Check out this video: kzfaq.info/get/bejne/kK6UmpWcy7HRmn0.html&ab_channel=JohannesMilke
@bhabhayt398
@bhabhayt398 2 жыл бұрын
How many types of state are there and what is the difference between runapp and main function
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank You BHABHA YT! Follow this link: stackoverflow.com/questions/58883728/what-is-the-difference-between-main-function-and-the-runapp-function-in-flutte I hope you will get your answer 🙂
@lifebest4404
@lifebest4404 2 жыл бұрын
Sir how to create uber app backund php flutter
@winneze1
@winneze1 2 жыл бұрын
Hi sir, i'm stuck with the scrollableController at chat ui screen, how to make it scroll to the newest mesage when init the screen. I try addListener but somehow when the chat screen init, i have to manual scroll a little bit and it execute the scroll. I dont know what happen? Can do you an example for that?
@gauravthakkar802
@gauravthakkar802 2 жыл бұрын
Post your code
@winneze1
@winneze1 2 жыл бұрын
@@HeyFlutter Here is the code sir: The function that i want to fire when enter the chat screen: bool _isScrollToEnd = false; void _scrollListener() { if (chatData != null && !_isScrollToEnd) { Timer(Duration.zero, () async { await _scrollController.animateTo( _scrollController.position.maxScrollExtent + 150, duration: const Duration(milliseconds: 1000), curve: Curves.fastOutSlowIn, ); }); _isScrollToEnd = true; } } In initState: _scrollController.addListener(_scrollListener); Then I put the controller into a ListView.Builder. The problem is when enter the chat screen. And the chat data is loaded. But it's not automatically scroll down to the end, when use my hand to scroll a little bit, the function is execute. I don't get it what is with this weird behavior?
@okeyshourovroy2769
@okeyshourovroy2769 2 жыл бұрын
Can you please make a video on flutter pdf and pos printer for windows?
@okeyshourovroy2769
@okeyshourovroy2769 2 жыл бұрын
@@HeyFlutter thank you🙏🙏❤️❤️
@zakariahouache5442
@zakariahouache5442 2 жыл бұрын
thenks sur!,,, Is there a function so that when the Internet is cut off, it does not work WebView and when the Internet returns, it works WebView automatically ,And when the internet is weak it works "is Loading"or "circiller progresidec idicaitor"
@zakariahouache5442
@zakariahouache5442 2 жыл бұрын
@@HeyFlutter Thank you, I have never found a wonderful person like you
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank You Zakaria Houache! Follow this link: github.com/flutter/flutter/issues/69502 I hope you will get your answer 🙂
@user-jm7mm3qo6n
@user-jm7mm3qo6n Жыл бұрын
Hello. Thank you for the video, it's very useful. But, I think that I found a mistake. You told that if we use just a ListView without .builder(), then ListView render all elements. I just tested it and found out that the ListView itself optimises the rendering and parameter cacheExtent works as well.
@HeyFlutter
@HeyFlutter Жыл бұрын
Thanks for adding into out knowledge, Рамиль Рахматуллин 🙂 really appreciated, but rendering all and optimized rendering are two different things.
@dicksonguinajnr1449
@dicksonguinajnr1449 2 жыл бұрын
My brother can you try to do search listview
@dicksonguinajnr1449
@dicksonguinajnr1449 2 жыл бұрын
@@HeyFlutter thank you so much my brother 🙏
@computerprogrammer9279
@computerprogrammer9279 2 жыл бұрын
Yeh bro
@marco_di
@marco_di Жыл бұрын
MEEEEEGAAAAAA!!!!!! 🤩🤩🤩
@HeyFlutter
@HeyFlutter Жыл бұрын
Glad you liked it, @marcodinic 😀
@mdshahidali3132
@mdshahidali3132 2 жыл бұрын
Create a Pich in and Pinch out Features like iPhone in Flutter .Please Sir
@gataka534
@gataka534 2 жыл бұрын
why don't you create a course i would buy it
@olawoleoyedele4212
@olawoleoyedele4212 2 жыл бұрын
!firstComment
@__mothership__8475
@__mothership__8475 2 жыл бұрын
For showing Search & Filter ListView, I am fetching data from Google Sheets like this way, The problem here is when you search for something it will appear as suggestion but when you backspace what you search for the entire list is not there , you had to go back and visit search page again for List to show. How to solve this issue? List books = []; @override void initState(){ super.initState(); getBooks(); } Future getBooks({int index = 0}) async{ final books = await GoogleSheetApi.getAllBooks(); setState(() { this.books = books; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Search & Filter'), ), body: Column( children: [ Container( margin: EdgeInsets.all(16), child: TextField( controller: controller, decoration: InputDecoration( prefixIcon: const Icon(Icons.search), hintText: 'Book Title', border: OutlineInputBorder( borderRadius: BorderRadius.circular(20), borderSide: const BorderSide(color: Colors.blue), ) ), onChanged: searchBook ), ), Expanded( child: ListView.builder( itemCount: books.length, itemBuilder: (context, index) { final book = books[index]; return ListTile( title: Text(book.title ), ); })) ], ), ); } void searchBook(String query) { final suggestions = books.where((book) { final bookTitle = books.name.toLowerCase(); final input = query.toLowerCase(); return bookTitle.contains(input); }).toList(); setState(() => books = suggestions); }
@__mothership__8475
@__mothership__8475 2 жыл бұрын
@@HeyFlutter there is no error message , the code is working but let’s say there are three books named (hello, world,there) . If I search world then book with world as a suggestion will be there but I don’t want to search for that and I erase the sentence world and type hello , then there is no suggestion as the list is not there now something like that
@__mothership__8475
@__mothership__8475 2 жыл бұрын
@@HeyFlutter I think this is because I am making an empty list first List book = [] and then getting the list using getBook method And Giving book list to suggestion in setState But you did not make it empty first You did List book = allBooks So there your list is not empty first Maybe this is the issue here So how to get all List like that when using api Data without setting it empty first and then initialise in initState
AspectRatio (Flutter Responsive Design)
0:54
HeyFlutter․com
Рет қаралды 11 М.
Top 10 Widgets every Flutter Developer should know!
10:18
HeyFlutter․com
Рет қаралды 35 М.
Despicable Me Fart Blaster
00:51
_vector_
Рет қаралды 19 МЛН
마시멜로우로 체감되는 요즘 물가
00:20
진영민yeongmin
Рет қаралды 29 МЛН
ПРОВЕРИЛ АРБУЗЫ #shorts
00:34
Паша Осадчий
Рет қаралды 2 МЛН
How Many Balloons Does It Take To Fly?
00:18
MrBeast
Рет қаралды 142 МЛН
KMP vs. Flutter - Who Will Win The Cross-Platform Battle?
16:19
Philipp Lackner
Рет қаралды 35 М.
Every Flutter App needs this!
10:15
HeyFlutter․com
Рет қаралды 54 М.
Flutter Firebase Authentication [2024] The Cleanest Way
23:32
HeyFlutter․com
Рет қаралды 145 М.
How Ai Is About To Transform The World’s Economy
19:19
Andrei Jikh
Рет қаралды 150 М.
Best 30 Flutter Widgets, Packages & Tips
5:11
Flutter Mapp
Рет қаралды 118 М.
Futures and Streams (Flutter FutureBuilder, StreamBuilder)
13:10
HeyFlutter․com
Рет қаралды 30 М.
Ever thought why We fail as Flutter Developer?
8:19
HeyFlutter․com
Рет қаралды 8 М.
Flutter Null Safety (!, ?, ??, late, ...)
3:07
HeyFlutter․com
Рет қаралды 17 М.
Unbounded height / width | Decoding Flutter
4:54
Flutter
Рет қаралды 135 М.
Why I Chose Rust Over Zig
33:18
ThePrimeTime
Рет қаралды 79 М.
iPhone socket cleaning #Fixit
0:30
Tamar DB (mt)
Рет қаралды 13 МЛН
Hisense Official Flagship Store Hisense is the champion What is going on?
0:11
Special Effects Funny 44
Рет қаралды 3,2 МЛН
$1 vs $100,000 Slow Motion Camera!
0:44
Hafu Go
Рет қаралды 23 МЛН
Samsung Galaxy 🔥 #shorts  #trending #youtubeshorts  #shortvideo ujjawal4u
0:10
Ujjawal4u. 120k Views . 4 hours ago
Рет қаралды 7 МЛН
НЕ ПОКУПАЙ СМАРТФОН, ПОКА НЕ УЗНАЕШЬ ЭТО! Не ошибись с выбором…
15:23