Flutter Tutorial - Slider
Вставка
- Опубліковано 22 лип 2024
- Create a Flutter Slider as a horizontal or vertical Slider with different colors, shapes, and with custom labels.
Click here to Subscribe to Johannes Milke: ua-cam.com/users/JohannesMilke...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/slid...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Range Slider Tutorial: • Flutter Tutorial - Ran...
Slidable - Swipe To Action Tutorial: • Flutter Tutorial - Sli...
Switch Tutorial: • Flutter Tutorial - Tog...
Dismissible - Swipe To Action Tutorial: • Flutter Tutorial - Dis...
Slide Transition Animation Tutorial: • Flutter Tutorial - Sli...
Buttons 2.0 Tutorial: • Flutter Tutorial - New...
Buttons 2.0 For Web Tutorial: • Flutter Tutorial - New...
Text Banner Tutorial: • Flutter Tutorial - Mat...
Material Banner Tutorial: • Flutter Tutorial - Mat...
SnackBar Tutorial: • Flutter Tutorial - Sna...
FlushBar Tutorial: • Flutter Tutorial - Flu...
TIMELINE
0:00 Introduction Slider
0:22 Slider
1:22 Change Slider Color
1:49 Set Slider Label
2:53 Change Colors In Slider Theme
6:11 Change Slider Size
7:45 Side Labels For Slider
9:19 Top Label For Slider
13:40 Ticks & Shapes For Slider
16:28 Cupertino Slider
17:44 Disabled Slider
18:44 Vertical Slider
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 - Наука та технологія
This might help you :)
👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com
Source Code: github.com/JohannesMilke/slider_example
Range Slider Tutorial: ua-cam.com/video/KPxq3SLjg98/v-deo.html
Slidable - Swipe To Action Tutorial: ua-cam.com/video/TmSKRUVKNsQ/v-deo.html
Switch Tutorial: ua-cam.com/video/PVuJ-If0AuU/v-deo.html
Dismissible - Swipe To Action Tutorial: ua-cam.com/video/cswTKnXtSqk/v-deo.html
Slide Transition Animation Tutorial: ua-cam.com/video/cxxHE0TTGbU/v-deo.html
Buttons 2.0 Tutorial: ua-cam.com/video/ytlDKJBxW_A/v-deo.html
Buttons 2.0 For Web Tutorial: ua-cam.com/video/V1Evs000yv8/v-deo.html
Text Banner Tutorial: ua-cam.com/video/tmv42IcXh9M/v-deo.html
Material Banner Tutorial: ua-cam.com/video/tmv42IcXh9M/v-deo.html
SnackBar Tutorial: ua-cam.com/video/UkudAgCEhBI/v-deo.html
FlushBar Tutorial: ua-cam.com/video/H-XEIkUfN4M/v-deo.html
This is exactly what i need, thank you. Another long video for weekend
It's you again for the save.
Thanks a ton!
hi mr.milke you just amaze us with your videos thank you very much
@JohannesMike, you saved my day, Thanku so much
Nice simple approach for that vertical slider, works great as level indicator. Even though I have used that RotatedBox several times as well, it never occurred to me that it can perform magic on Sliders too, thx for this nice tip! 💙
@@HeyFlutter Nice thing with Flutter’s extremely composable widgets is that you can come up with creative solutions like this 👍 Don’t need an API for everything, just small flexible Widgets you can use to compose what you want, wrap it all as a custom widget and call it a day! 💙
Thanks, Mike! 🙂 Yeah, it is a nice trick until the Flutter SDK supports vertical sliders by default. 💪
Just Don't Break the consistency
Awasome content.
Is there any option to change the thumb shape circle to an arrow
Hi man, thanks for the Flutter classes. I would like to be a subscriber to your channel here on UA-cam. I noticed that you use Git for support. Do you plan to make the support option available here through the Google platform? grateful
Thank you much much much
Percebi que é a maior dificuldade colocar gradiente em Slider.
Awesome tutorial👌👌
Thank you so much for this tutorial!!
If possible please make a deep dive tutorial on dio package.
#flutter #happycoding
@@HeyFlutter excellent sir
And thank you so much for sharing a great content and stay healthy!
thnxxx ❤️
You are welcome, tayyiba yousaf!
Hi Johannes, thanks for the video. When using trackShape: RoundedRectSliderTrackShape(), the corner radius becomes 0 when the value is 0 or 100. Do you know how to fix that?
@@HeyFlutter , thanks. I don't see much customization in this class. for example, trackRadius is hardcoded in paint() method - I was wondering if you have an example overcoming this limitation.
Wrap with a cliprrect widget with border radius
Thank You Liz Brownwood! Follow this link: api.flutter.dev/flutter/material/RoundedRectSliderTrackShape-class.html
I hope you will get your answer 🙂
Can you make the labels visible at all times and no only when the slider is selected? Or an alternative?
Thank you, Alex F!😊, This is not possible with this in-built slider widget
The vertical slider breaks when built for web. It works, but visually it is smeared when rendered in chrome, firefox and edge.
Seems to be fixed in the latest update
Can I also customize the value indicator? Like adding some borders or setting a size of it?
Thank You Jjamppong! Yes you can. Follow this link to learn more about it: api.flutter.dev/flutter/material/Slider-class.html 🙂
Keep going👍👍please try to make google fit integration.. Really need it. Waiting.. Thanks
Thank you, Sumayya! 🙂 I have added it to my list of ideas, however, I release already other videos for the near future.
bro i have created two silders on a page one below the other but the problem i am facing is when i move any slider the other slider updates its value ...so what to do i am stuck
Thank you, See The World! 🙂. Set state causes the widget to rebuild. This causes your functions that build the sliders to be invoked every time on rebuild. So instead of using a function and return a slider, create a separate widget that builds your slide
@@HeyFlutter Thanks for replying bro i solved that problem by wrapping the slider theme and slider with stateful builder inside a showmodalbottom sheet
@@HeyFlutter But now the problem which has arised is I have a text below the slider to show the user that how the fontsize has affected the text using slider but the text isn't changing as the slider moves...
Where does the setState() come from? It says it's not defined
@@HeyFlutter Thanks
Thanks, Eric! 🙂 You need to be within a Stateful class to have access to setState. Learn more about it here: ua-cam.com/video/FL_U8ORv-2Q/v-deo.html
Can u add image instead of the circle 🔴 can anybody tell this how to do
Thank You @crazy_gamers_0079! Follow this link: stackoverflow.com/questions/58116843/flutter-how-to-add-thumb-image-to-slider
I hope you will get your answer 🙂
my slider is changing value but not moving
@@HeyFlutter i am using getx with stateless widget
You need to call setState within the onChanged property, Mohammed! See the source code for more details: github.com/JohannesMilke/slider_example/blob/master/lib/widget/slider/slider_color_widget.dart