TOP 12 ListView Widgets | Flutter Tutorial
VloĆŸit
- Äas pĆidĂĄn 27. 07. 2024
- 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: czcams.com/users/JohannesMilke...
đ 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 :-) - VÄda a technologie
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: czcams.com/video/TlbbIQykHK0/video.html
TOP 10 Flutter Widgets: czcams.com/video/gK288ZfzjCc/video.html
Neumorphism Tutorial: czcams.com/video/A2Bbhr3DGd0/video.html
Hide AppBar On Scroll Tutorial: czcams.com/video/xzPXqQ-Pe2g/video.html
Hide/Show AppBar & Floating Action Button On Scroll: czcams.com/video/Zs3D6vs7h-k/video.html
Bottom Sheet Tutorial: czcams.com/video/TXYuaiukw7E/video.html
Popup Dialog Tutorial: czcams.com/video/4pn-_md5Ol4/video.html
Scaffold Widget Tutorial: czcams.com/video/fcakQFrJVFQ/video.html
Hide Bottom On Scroll Tutorial: czcams.com/video/pr_Go9I19SA/video.html
Bottom Navigation Bar Tutorial: czcams.com/video/xoKqQjSDZ60/video.html
Animated Bottom Navigation Bar Tutorial: czcams.com/video/95PEDLxEEtg/video.html
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?
Thanks for sharing! All of your videos are great! Always clear and easy to understand! Many thanks!
Great video and really helpful! I hope you will make a series on state management using providers one day đ
Good job, God bless you for all your effort !!!
Thank you so much my brother.. God Bless
My crazzy guy, thanks 4 all the excellent work you have done â đ
Wow!! this video is amazing.. thanks a lot!!
Very useful information and tips đ
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...
Thank you for sharing information with everyone. People around here really appreciate this
Glad to hear that, Thank you Mohamad Dody! đ
Thanks so much
Great Video
Thats great video, You can also make video on Sliver kit, which also have SliverList and other kind of cool stuffs
Thank you
Powerful intro đ„
i agree
cool, Exactly what is needed
Super teacher
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!
Glad it was helpful, @chaddrobertson5805 đ
Nice video sir..
This video is gold
Thanks, Mario Luque! đ
Amazing
You are wonderful đâ€đ
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
ê°ìŹí©ëë€ ìŽ ìì ëë¶ì íëŹí°ë„Œ ìœêČ ë°°ìž ì ìë€ì.
ì ë§ ì ì©í©ëë€
Youâre most welcome, ëŽê° ë§ë ê”êž°.! đ
Love from India â€ïž
Thx
You are welcome, ìœë!
How to create nested re orderable list view as in Google tasks app?
Sir how to create uber app backund php flutter
Great tutorial, u think u can make a a tutorial how to create a Picker Menu Height and Weight pls?
@@HeyFlutter thanks
Create a video on AWS in flutter sir.
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
GetX bad, provider is better
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?
How many types of state are there and what is the difference between runapp and main function
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 đ
Can you please make a video on flutter pdf and pos printer for windows?
@@HeyFlutter thank youđđâ€ïžâ€ïž
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 ??
Thank you, Vipul Ghate! Check out this video: czcams.com/video/ZHdg2kfKmjI/video.html&ab_channel=JohannesMilke
12:08 Is there any advantage using showSearch and SearchDelegate over the method shown here?
Thank you, slideslipping! đ. It depends on the requiremnet of the app.
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.
Thanks for adding into out knowledge, Đ Đ°ĐŒĐžĐ»Ń Đ Đ°Ń ĐŒĐ°ŃŃĐ»Đ»ĐžĐœ đ really appreciated, but rendering all and optimized rendering are two different things.
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"
@@HeyFlutter Thank you, I have never found a wonderful person like you
Thank You Zakaria Houache! Follow this link: github.com/flutter/flutter/issues/69502
I hope you will get your answer đ
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?
Post your code
@@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?
My brother can you try to do search listview
@@HeyFlutter thank you so much my brother đ
why don't you create a course i would buy it
Yeh bro
Create a Pich in and Pinch out Features like iPhone in Flutter .Please Sir
MEEEEEGAAAAAA!!!!!! đ€©đ€©đ€©
Glad you liked it, @marcodinic đ
!firstComment
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);
}
@@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
@@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