Flutter Tutorial - How To Create Horizontal ListView | Scrollable Row | Cards, Text, Image

Create a scrollable horizontal ListView, a scrollable Row in Flutter with the ListView widget or the Flutter SingleChildScrollView widget. We will set the ListView dynamic height and use ListView Separated to create space between items in a ListView. Learn the difference between ListView and ListView Builder, the difference between ListView and SingleChildScrollView in Flutter.
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/hori...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Horizontal Image Slider Tutorial: • Flutter Tutorial - Bui...
Alphabet AZ Scroll List Tutorial: • Flutter Tutorial - Alp...
Scroll To Index/Item In ListView Tutorial: • Flutter Tutorial - Scr...
Slidable & Dismissable In ListView Tutorial: • Flutter Tutorial - Sli...
Expandable ListView Tutorial: • Flutter Tutorial - Exp...
Scroll To Top & End In ListView Tutorial: • Flutter Tutorial - Scr...
Fix Text Overflow In Row Tutorial: • Flutter Tutorial - Fix...
Fix Bottom Overflowed By Pixels Tutorial: • Flutter Tutorial - Fix...
TabBar Tutorial: • Flutter Tutorial - Cre...
Show Multiple Floating Action Buttons Tutorial: • Flutter Tutorial - How...
Bottom Navigation Bar Tutorial: • Flutter Tutorial - Bot...
Hide AppBar On Scroll Tutorial: • Flutter Tutorial - How...
Hide Bottom On Scroll Tutorial: • Flutter Tutorial - How...
Deep Dive SliverAppBar Tutorial: • Flutter Tutorial - Sli...
Show/Hide StatusBar Tutorial: • Flutter Tutorial - Sho...
Slivers & Sticky Headers Tutorial: • Flutter Tutorial - Sti...
TIMELINE
0:00 Introduction Horizontal ListView
0:17 Row Overflow On Right Side
0:45 Create Scrollable Horizontal ListView
1:32 Fix Bottom Overflow For Horizontal ListView
2:16 Set ListView Dynamic Height / Create SingleChildScrollView And Row Widget
2:55 Difference Between ListView And SingleChildScrollView / ListView VS SingleChildScrollView
3:19 Difference Between ListView And ListView Builder / ListView VS ListView Builder
3:52 ListView Space Between Items / ListView Separated
4:16 Create Image Card List / Create Image Card ListView
7:13 Card OnPressed / Card OnTap In Horizontal 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/horizontal_listview_example

[@webpro9083]

You prove the quote "The little things matter". These little widgets explained one by one is more valuable than full-page designs

[@maheshverma6148]

Thank you so much for teaching us brother. Your tutorials are not just random ones, you actually know what problems beginner developers go through and make videos to solve the problems. You're great brother. GOD bless you.

[@HeyFlutter]

Glad you liked it, @maheshverma6148 😀

[@goldenlife6166]

Great work johannes, really appreciate your commitment towards people like me who loving you lot

[@lesptitsoiseaux]

I love your dedication we hear in your voice. For you, this is truly your calling.

[@HeyFlutter]

Glad you liked it, @lesptitsoiseaux 😀

[@lesptitsoiseaux]

@@HeyFlutter I'm writing an app that I hope can solve trust between people, and I did a lot so far thanks to your videos. I appreciate you man. Cheers from Vancouver! :)

[@kibromhs7566]

You know how to help Thanks man keep it up

[@ultramaxx1155]

Nice Tutorials!!

[@bimugdhasatyal7626]

Short and sweet. Thanks for the video

[@HeyFlutter]

Glad you liked it, @bimugdhasatyal7626 😀

[@atultiwari7361]

Thankyou for your master contents ,

[@AzoeJame]

Great work . thank you

[@dicksonguinajnr1449]

Thank you so much my brother..

[@huguesbomo9297]

you are so great thank you

[@ChrisHalden007]

Great video. Thanks

[@HeyFlutter]

You are welcome, ZobDeMouche007!

[@abdifitaahshariif5866]

Great job keep it up.Please make video vertical scroll view thanks

[@andyrenton1962]

Thanks so much I'm looking forward to sharing our production app with you - your tutorials have been invaluable in making it happen

[@MohamedGamal-xj8dq]

i need to told you That i love you . Best channel

[@pash64]

Bro I like this.

[@HeyFlutter]

Thank you, @pash64! 🙂

[@thomasmabika7291]

are there really no other flutter concepts you haven't already covered? some advanced concepts maybe? Will there be a horizontal listview 2022 or 2023 video? What's the difference between this video here and the one from last year?

[@albertotroncon9885]

when you put inside the itemBuilder and in particular in buildCard() the sentence "(items:index)" gives you error, after when you go forward the sentence changes but you hide the transformation so for me its difficult to understand what I have to write within the ().

[@albertotroncon9885]

@@HeyFlutter thank you, I solve the problem when I put (item: items[index]), but I have another question: have you ever used the function ScrollSnapList, and if yes which package did you import in order to work the code?

[@mohammedhamdan5323]

thanks . but how if we want to scroll only one time and it is show one index every time user scroll i mean the same but index come in the center

[@sherifsaidelahl7585]

Perfect! .. how can I add to the list an auto scroll (animation) like an addvertisement + keeping the capability of scrolling it manually?

[@sherifsaidelahl7585]

@@HeyFlutter will wait for that, will be grea adition

[@ritiksaxenaofficial]

Great

[@saurabhswani]

Sir please make video on Dio package of flutter for json parsing

[@user-gt4kr1hn5u]

How add images from asset Instead urlimage?

[@kgetgamingentertainmenttec8243]

Hi amazing tutorial i had one question is there a way i can add button to the card item instead of hard coding buttons for each card

[@HeyFlutter]

Thank You Kirubel Berhanu! Follow this link: stackoverflow.com/questions/71476036/create-additional-cards-on-button-press I hope you will get your answer 🙂

[@kgetgamingentertainmenttec8243]

@@HeyFlutter Thanks 🙂

[@cavidanbagiri7837]

Krasava

[@rashidkhan1845]

Sir I want to navigate every time a different page after clicking one of the shoes

[@MetaTesla]

Great video! Btw do you happen to know how to solve listview.builder rebuilding widgets when scrolling? It seems i set my widgets's property(isAddToCart) true since i press the toggle event but once i scroll(horiztontal)and come back to false.

[@HeyFlutter]

Thank You Teddy! Follow this link: stackoverflow.com/questions/52078972/flutter-scrollable-body-with-horizontal-list-and-grid-as-children I hope you will get your answer 🙂

[@prakashbasnet1156]

What if I want a listview.builder insider column which is scrollable? How can we solve this problem? Can you make a short tutorial about that?

[@prakashbasnet1156]

@@HeyFlutter I hope this future is soon!

[@pranavvariar2751]

Hey how can I make this a reusable widget?

[@jacktheripper571]

Hey, i have a background pic on my app and i couldn't manage to put my items nicely. Height is double.maxFinite in my body because of background image. What can i do?

[@HeyFlutter]

Thank You Yunus Ozkaya! Follow this link: medium.com/flutter-community/flutter-widgets-stack-positioned-the-whole-picture-5ac7310c306b I hope you will get your answer 🙂

[@jacktheripper571]

@@HeyFlutter Thank you for the reply, i fixed it.

[@kajalkamani537]

How can create list inside map data

[@fish-qr3by]

Hi, i encountered an issure at 'itemBuilder: (context, index) => buildCard(item: index),' the error showed that The argument type 'int' can't be assigned to the parameter type 'CardItem'. may i know how can i solve this

[@HeyFlutter]

Hey, zengyu chen! error is well explaining itself, you have 2 options. 1.) Either you can change argument type of buildCard() method to int 2.) Or you can pass card item in your buildCard() widget

[@fish-qr3by]

@@HeyFlutter hi thanks for your reply but what does it mean by pass card item in my buildCard() widget?

[@fish-qr3by]

Would appreciate if you could remember what's the unfinished line 'itemBuilder: (context, index) => buildCard(item: index),' @5.35 because it is blocked tq!

[@atonyamekyemensah5660]

same here I can't see what's on there @@fish-qr3by

[@atonyamekyemensah5660]

I've figured it out man change this line "itemBuilder: (context, index) => buildCard(item: index))," to this "itemBuilder: (context, index) => buildCard(item: items[index]))," it would work @@fish-qr3by

[@sachinrajput9491]

again hello @Johannes you wrap Listview.builder in Container with heigth = 256 .... there is any solution you remove Container height because again it is not responsive if we add new widgets.

[@HeyFlutter]

Thank You Sachin Rajput! Follow this link: stackoverflow.com/questions/49704497/how-to-make-flutter-app-responsive-according-to-different-screen-size I hope you will get your answer 🙂

[@sachinrajput9491]

@@HeyFlutter ​ i am not asking about different screen sizes. my question is if we add 2-3 more Text widgets then we have to increase container height from 256 to 320 or something . is there any solution for this height will increase automatic.

[@shakilahmed5636]

Hello sir, I'm not getting the confirmation email after requesting for a access to this source code. I've checked spam folder as well. Please help me get access to this source code.

[@HeyFlutter]

Thanks, Shakil Ahmed! 🙂 Learn more about it here: github.com/JohannesMilke/sponsorware#2-why-didnt-i-get-an-email-even-if-i-have-sent-already-a-request-on-your-website

[@gamerankster-uranusplayer-6611]

Bro, when will you make video about PayPal.

[@XxLordStarLinkxX]

in the minute 5:30 how you make itemBuilder: (context, index) => buildCard(items: index), ), i have error even if i add the Widget buildCard({ required CardItem item, the error continue help pls!

[@Teitaischool]

@@HeyFlutter I had the same problem. It was incorrect in the video

[@SantoshYadav-lc3hi]

How you solve this problem.I am also getting same problem.

[@Teitaischool]

@@SantoshYadav-lc3hi itemBuilder: (context, index) => buildCard(item: items[index]),

[@URIXMX]

@Ahmad Amro life saver!

[@subak4532]

@@Teitaischool thank you so much

[@yusuefarsha]

sir, how to convert data from listview to paragraph?

[@HeyFlutter]

Thanks for the idea YUSUF BADRIAWAN 😀, i have added it in my list of future videos

[@ash.2626]

How to set height dynamically in listview.builder for horizontal scroll direction

[@HeyFlutter]

Thank You Ashwini D! Follow this link: stackoverflow.com/questions/70977252/horizontal-listview-builder-with-items-of-dynamic-height I hope you will get your answer 🙂

[@AjayAnandM]

Hey Flutter, thanks for a wonderful video !! I had occured an error at 05:23 to 05:33 second and i tried to go for your github repo, daaamn lots of shits to do, cant i get it for freee lol so many things needed to do for that link ,and its a shame 🤥 im really disappointed

[@HeyFlutter]

Thank You @AjayAnandM!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware

[@prometheusli101]

how can i horizontally scroll on web

[@prometheusli101]

@@HeyFlutter thank you. but it doesn't work

[@wahidesmail5764]

Didn’t work with me

[@HeyFlutter]

Thank you, @wahidesmail5764! 🙂. Please try to provide enough details with your question

[@exciharits4232]

Nice try, but you are so stingy in showing the screen. 🙏

[@HeyFlutter]

Thanks for your feedback, El- Madiuny! 🙂

[@user-gt4kr1hn5u]

How add images from asset Instead urlimage?

[@user-gt4kr1hn5u]

How add images from asset Instead urlimage?

[@user-gt4kr1hn5u]

How add images from asset Instead urlimage?

[@HeyFlutter]

Hey 😊, @user-gt4kr1hn5u! Check out this video: kzbin.info/www/bejne/d5LGmmqKp7qosLM