App Development Exam > App Development Videos > Flutter: Build beautiful native apps in record time > Flutter 32 - Slider and Progress indicator
Flutter 32 - Slider and Progress indicator Video Lecture | Flutter: Build beautiful native apps in record time - App Development
This video is part of 43 videos | Join course for free |
FAQs on Flutter 32 - Slider and Progress indicator Video Lecture - Flutter: Build beautiful native apps in record time - App Development
| 1. What is the purpose of a slider in app development? |  |
| 2. How can I add a slider in my Flutter app? | |
Ans. To add a slider in a Flutter app, you can use the Slider widget provided by the Flutter framework. You can specify the minimum and maximum values, and handle the onChanged callback to get the selected value.
| 3. Can I customize the appearance of a slider in Flutter? | |
Ans. Yes, you can customize the appearance of a slider in Flutter. The Slider widget provides properties like activeColor, inactiveColor, thumbColor, and trackHeight to customize the colors and size of the slider. You can also use a custom widget as a thumb by setting the thumbShape property.
| 4. How can I display the selected value of a slider in Flutter? | |
Ans. To display the selected value of a slider in Flutter, you can use the onChanged callback of the Slider widget. Inside the callback, you can update a variable with the selected value and use it to display the value in the UI, such as using a Text widget.
| 5. What is the purpose of a progress indicator in app development? | |
Ans. A progress indicator in app development is used to visually indicate the progress of a task or process. It can be used to show loading, file upload progress, or any other task that takes a significant amount of time. In Flutter, the CircularProgressIndicator widget can be used to display a circular progress indicator.
Text Transcript from Video
everybody this is Brian and this is the
thirty-second flutter tutorial today
we're gonna be doing a little bit
different
I know we've kind of gone through
checkbox' radios and a switch which all
follow almost the exact same design
pattern we literally could have just
changed one word check my radio switch
and it would have been the same darn
thing so today we're going to do some a
little different we're gonna cover
slider which is actually set up a little
bit differently and we're gonna cover
where is it gonna take me a minute to
find it here of course now I can't find
it's the linear progress indicator did I
pass it already there it is right here
the linear progress indicator basically
a progress bar so we're going to cover
both of those today all right so let's
just jump right on in here I'm going to
import the material package for dart we
need this for our material design
widgets we're going to set up our basic
code pattern here we never made function
we're going to extend a stateful widget
and we're going to extend the state of
that stateful widget and in here we're
going to say run app this is what
actually starts the application up I
make a new material app and the home
parameter is going to be a new my app so
we're just gonna make an incidence of
our class here alright so now that we
have that I'm going to actually create
our state here and in our state you
guessed it we have to do our build
function
all right so I've had a few questions
about why this is the way this is so
we'll kind of break it down a little bit
we need our import obviously for the
material design back to these widgets
that we're working with this is all
material design the main obviously is
where our starting point is which we
call run app then we're creating a new
material app which actually wraps in a
lot of the material design and the
things that we need from there we need a
stateful widget because we're going to
track state when we quote-unquote track
State we're just tracking that something
changed and we want to see those changes
now the difference between a stateful
widget and state is minut but major and
I know that's a complete contradiction
stateful widget means that something in
the widget will change state is the
thing that actually changed inside of
the stateful widget so while the
stateful widget itself is not changing
the state is changing the difference
between a stateless widget and a
stateful widget is the stateless widget
does not care about change whatsoever
where the stateful widget what we're
working with wants to track those
changes which is why we have to call
create state because we want to say hey
we have a state we're going to create it
and monitor it whenever the build is
called within our state the entire
screen is going to refresh or I should
say the parts of the screen that really
need to refresh all of this kind of held
I want to say like in memory sort of and
only the things that changed or really
tracked but then everything's
re-rendered to the screen so that's kind
of an answer to that
so in our build we're gonna return a new
scaffold remember scaffold is just kind
of well it's like a scaffold it's you
know you ever seen those building
scaffolds where they you know either
build a building or they're you know
cleaning windows or something they have
to build this structure so people can
walk around that's really what a
scaffold is all right so the app bar is
just our top blue bar here we're set the
title parameter to a new text
all right and then the body oops not
even there there we go
so the body is gonna be a new container
I'm still kind of out it I haven't done
tutorials in a while I'm trying to get
back into the swing of X and try and get
caught up really I've got a couple
personal projects that is not what I
wanted
32.0 because why not and for the child
we're going to do a new column and then
we have an array of widgets for the
children all right so in here this is
where the magic is going to happen we've
gotten our rate of widgets here and
we're going to say slider value is and
we're going to say zero for now we need
to go up here and actually create our
state notice this is a double not an INT
and then we have our arm changed here
which is going to be when the slider
actually moves around we haven't added
the slider yet so this takes a bit of
imagination break that down into our
function and then we've got our set
state we're going to just say value
equals the value so we're updating our
state all right now once I actually make
this work so there's a slider and you
notice how the default ones are value
and on change so it's very very similar
to what we've seen before and we're
going to
let's break this down so it's a little
easier to work with all right so slider
also takes some other properties we want
a minimum value of zero point zero
remember it's got to be a double and a
Max and we're going to say 100 point
zero so let's put that off to the side
for a second here put the value in there
so we want to say slider value is and
then whatever there our value in state
is and what's going to run this out of
the device so once this run we'll be
able to move the slider around and
actually see in real time that text
widget will change with the slider value
what we're going to do next after this
whole thing is actually working is we're
going to put the linear progress bar
under it typically a linear progress bar
goes right under this app bar but I want
it to stand out and you can actually
grab this you can see how it kind of
changes now you notice because it's a
double it's got this 52 dot plot all
this behind it so we're gonna modify
this a little bit we're gonna say value
round take care of that hot reload
should switch it yep sure enough hot
reload took into effect so now we've got
a nice min and Max and everything in
between so to add to the goodness here
we're going to put our linear progress
bar down here and we're going to tie
that into the same value so we can kind
of see what's going on there's our
linear progress indicator sorry if I
call that a progress bar I'm very used
to doing that yeah we're going to say
the value we're just going to tie it
into the value that we're using but
we're gonna multiply that by point zero
one that way we get an actual positive
number here nice and smooth let's
actually say
and let's just grab this not sure if we
can even do this but we're gonna try it
this may be a spectacular disaster but
I'm pretty sure we can do that alright
so there is our in all of its glory so
really what the progress indicator or
progress bar if you're from other
languages and frameworks just shows a
progress so the user can see so we would
say we're at 0% all the way up to 100
now the progress indicator notice 100%
is actually a one point zero anything
less than one means it's not there so
this is 56 or zero point five five eight
bla bla bla bla so just be mindful when
working with the progress indicator that
you have to give it that you can't say
it's at 50% you have to say zero point
five pretty simple pretty easy to learn
hope you guys found this educational and
entertaining I just like doing this it's
kind of fun but if you if you did find
this educational entertaining be sure to
visit my website void Ralph's calm for
the source code for this and all the
tutorials they're all out on github if
you notice any mistakes definitely
contribute helps out quite a bit and it
is getting to that time of year where I
need to pay for my web hosting this site
and all the tutorials are 100% funded by
your donations that's why there's zero
ads on these videos and I'm trying to
keep ads off of them because I think ads
on YouTube really suck so if you got a
few extra bucks feel free to throw it my
way and I will help pay the bills thank
you for watching
thirty-second flutter tutorial today
we're gonna be doing a little bit
different
I know we've kind of gone through
checkbox' radios and a switch which all
follow almost the exact same design
pattern we literally could have just
changed one word check my radio switch
and it would have been the same darn
thing so today we're going to do some a
little different we're gonna cover
slider which is actually set up a little
bit differently and we're gonna cover
where is it gonna take me a minute to
find it here of course now I can't find
it's the linear progress indicator did I
pass it already there it is right here
the linear progress indicator basically
a progress bar so we're going to cover
both of those today all right so let's
just jump right on in here I'm going to
import the material package for dart we
need this for our material design
widgets we're going to set up our basic
code pattern here we never made function
we're going to extend a stateful widget
and we're going to extend the state of
that stateful widget and in here we're
going to say run app this is what
actually starts the application up I
make a new material app and the home
parameter is going to be a new my app so
we're just gonna make an incidence of
our class here alright so now that we
have that I'm going to actually create
our state here and in our state you
guessed it we have to do our build
function
all right so I've had a few questions
about why this is the way this is so
we'll kind of break it down a little bit
we need our import obviously for the
material design back to these widgets
that we're working with this is all
material design the main obviously is
where our starting point is which we
call run app then we're creating a new
material app which actually wraps in a
lot of the material design and the
things that we need from there we need a
stateful widget because we're going to
track state when we quote-unquote track
State we're just tracking that something
changed and we want to see those changes
now the difference between a stateful
widget and state is minut but major and
I know that's a complete contradiction
stateful widget means that something in
the widget will change state is the
thing that actually changed inside of
the stateful widget so while the
stateful widget itself is not changing
the state is changing the difference
between a stateless widget and a
stateful widget is the stateless widget
does not care about change whatsoever
where the stateful widget what we're
working with wants to track those
changes which is why we have to call
create state because we want to say hey
we have a state we're going to create it
and monitor it whenever the build is
called within our state the entire
screen is going to refresh or I should
say the parts of the screen that really
need to refresh all of this kind of held
I want to say like in memory sort of and
only the things that changed or really
tracked but then everything's
re-rendered to the screen so that's kind
of an answer to that
so in our build we're gonna return a new
scaffold remember scaffold is just kind
of well it's like a scaffold it's you
know you ever seen those building
scaffolds where they you know either
build a building or they're you know
cleaning windows or something they have
to build this structure so people can
walk around that's really what a
scaffold is all right so the app bar is
just our top blue bar here we're set the
title parameter to a new text
all right and then the body oops not
even there there we go
so the body is gonna be a new container
I'm still kind of out it I haven't done
tutorials in a while I'm trying to get
back into the swing of X and try and get
caught up really I've got a couple
personal projects that is not what I
wanted
32.0 because why not and for the child
we're going to do a new column and then
we have an array of widgets for the
children all right so in here this is
where the magic is going to happen we've
gotten our rate of widgets here and
we're going to say slider value is and
we're going to say zero for now we need
to go up here and actually create our
state notice this is a double not an INT
and then we have our arm changed here
which is going to be when the slider
actually moves around we haven't added
the slider yet so this takes a bit of
imagination break that down into our
function and then we've got our set
state we're going to just say value
equals the value so we're updating our
state all right now once I actually make
this work so there's a slider and you
notice how the default ones are value
and on change so it's very very similar
to what we've seen before and we're
going to
let's break this down so it's a little
easier to work with all right so slider
also takes some other properties we want
a minimum value of zero point zero
remember it's got to be a double and a
Max and we're going to say 100 point
zero so let's put that off to the side
for a second here put the value in there
so we want to say slider value is and
then whatever there our value in state
is and what's going to run this out of
the device so once this run we'll be
able to move the slider around and
actually see in real time that text
widget will change with the slider value
what we're going to do next after this
whole thing is actually working is we're
going to put the linear progress bar
under it typically a linear progress bar
goes right under this app bar but I want
it to stand out and you can actually
grab this you can see how it kind of
changes now you notice because it's a
double it's got this 52 dot plot all
this behind it so we're gonna modify
this a little bit we're gonna say value
round take care of that hot reload
should switch it yep sure enough hot
reload took into effect so now we've got
a nice min and Max and everything in
between so to add to the goodness here
we're going to put our linear progress
bar down here and we're going to tie
that into the same value so we can kind
of see what's going on there's our
linear progress indicator sorry if I
call that a progress bar I'm very used
to doing that yeah we're going to say
the value we're just going to tie it
into the value that we're using but
we're gonna multiply that by point zero
one that way we get an actual positive
number here nice and smooth let's
actually say
and let's just grab this not sure if we
can even do this but we're gonna try it
this may be a spectacular disaster but
I'm pretty sure we can do that alright
so there is our in all of its glory so
really what the progress indicator or
progress bar if you're from other
languages and frameworks just shows a
progress so the user can see so we would
say we're at 0% all the way up to 100
now the progress indicator notice 100%
is actually a one point zero anything
less than one means it's not there so
this is 56 or zero point five five eight
bla bla bla bla so just be mindful when
working with the progress indicator that
you have to give it that you can't say
it's at 50% you have to say zero point
five pretty simple pretty easy to learn
hope you guys found this educational and
entertaining I just like doing this it's
kind of fun but if you if you did find
this educational entertaining be sure to
visit my website void Ralph's calm for
the source code for this and all the
tutorials they're all out on github if
you notice any mistakes definitely
contribute helps out quite a bit and it
is getting to that time of year where I
need to pay for my web hosting this site
and all the tutorials are 100% funded by
your donations that's why there's zero
ads on these videos and I'm trying to
keep ads off of them because I think ads
on YouTube really suck so if you got a
few extra bucks feel free to throw it my
way and I will help pay the bills thank
you for watching
Related Exams
About this Video
4.81/5
Rating
Apr 21, 2025
Last updated
Video Description: Flutter 32 - Slider and Progress indicator for App Development 2025 is part of Flutter: Build beautiful native apps in record time preparation.
The notes and questions for Flutter 32 - Slider and Progress indicator have been prepared according to the App Development exam syllabus.
Information about Flutter 32 - Slider and Progress indicator covers all important topics for App Development 2025 Exam.
Find important definitions, questions, notes, meanings, examples, exercises and tests below for Flutter 32 - Slider and Progress indicator.
Introduction of Flutter 32 - Slider and Progress indicator in English is available as part of our Flutter: Build beautiful native apps in record time for App Development & Flutter 32 - Slider and Progress indicator in
Hindi for Flutter: Build beautiful native apps in record time course. Download more important topics related with notes, lectures and mock test series for
App Development Exam by signing up for free.
Description
Video Lecture & Questions for Flutter 32 - Slider and Progress indicator Video Lecture | Flutter: Build beautiful native apps in record time - App Development - App Development full syllabus preparation | Free video for App Development exam to prepare for Flutter: Build beautiful native apps in record time.
Information about Flutter 32 - Slider and Progress indicator
Here you can find the meaning of Flutter 32 - Slider and Progress indicator defined & explained in the simplest way possible.
Besides explaining types of Flutter 32 - Slider and Progress indicator theory, EduRev gives you an ample number of questions to practice Flutter 32 - Slider and Progress indicator tests,
examples and also practice App Development tests.
Related Searches
Objective type Questions
,Important questions
,Free
,Viva Questions
,video lectures
,Flutter 32 - Slider and Progress indicator Video Lecture | Flutter: Build beautiful native apps in record time - App Development
,past year papers
,practice quizzes
,Exam
,Flutter 32 - Slider and Progress indicator Video Lecture | Flutter: Build beautiful native apps in record time - App Development
,Flutter 32 - Slider and Progress indicator Video Lecture | Flutter: Build beautiful native apps in record time - App Development
,Extra Questions
,Previous Year Questions with Solutions
,ppt
,Sample Paper
,Semester Notes
,study material
,MCQs
,Summary
,mock tests for examination
,shortcuts and tricks
;
Study Flutter 32 - Slider and Progress indicator on the App
Students of App Development can study Flutter 32 - Slider and Progress indicator alongwith tests & analysis from the EduRev app,
which will help them while preparing for their exam. Apart from the Flutter 32 - Slider and Progress indicator,
students can also utilize the EduRev App for other study materials such as previous year question papers, syllabus, important questions, etc.
The EduRev App will make your learning easier as you can access it from anywhere you want.
The content of Flutter 32 - Slider and Progress indicator is prepared as per the latest App Development syllabus.
|
© EduRev
|
Education Revolution
|
|
Signup to see your scores
go up within 7 days!
Access 1000+ FREE Docs, Videos and Tests
Takes less than 10 seconds to signup