Flutter 28 - TextField Video Lecture | Flutter: Build beautiful native apps in record time - App Development

everybody this is Brian and welcome to
the 28th flutter tutorial today we are
gonna switch gears a little bit here and
we're gonna go down to where is it the
textfield
we've worked with this before but we
haven't really talked about it in depth
so what we're gonna do in the next few
tutorials is talk about individual
widgets we're gonna talk about text
field then probably check box and radio
box actually it's just called radio in
other frameworks is called radio button
or radio box depending on but in flutter
it's just called radio anyways
so today text field let's just go ahead
and we've got a little demo project
let's get that out of there let's open a
new emulator let that bad boy load up
while we're typing all right so let's
import our material package and I'm
probably going to deviate from my
example code that I have on the other
side of the screen here just because I
don't really like it sometimes that gets
me into some trouble but we'll just see
what happens here still gosh this cold
man I'm still still got this cold trying
to fight through it might be successful
might not so if my voice cracks a little
bit I haven't actually done tutorials in
a while because my voice has been really
bad just forgive me alright so we're
going to extend the stateful widget and
then
woopsie all right so we're gonna extend
the state of the myapp had a lot of good
feedback about flutter even for alpha
people seem to genuinely love this
I actually really like flutter it's it's
kind of hard to describe unless you've
really worked with it for a little bit
it's got a lot of things that other
frameworks are really really lacking
even though it's just an alpha and I
think there's gonna be a lot of really
good promising things coming out of this
great start geez great state all right
so we've got kind of our boilerplate
here we'll just finish this up real
quick I may start the tutorials with
what we have now that we don't spend two
minutes watching me type this over and
over and over again just let me know in
the comments how you guys feel about
that because I know that sometimes I
tried to just have pre-written code
everybody's like no don't do that we
like watching you type I think you guys
just like seeing my horrible spelling
mistakes here
alright so returned knew we're going to
turn a scaffold and bang we can actually
start our program now so as always we've
got our kind of generic pattern here
where we do run a poor creating a new
material app the material apps home is a
myapi app as a stateful widget the state
of that is the my app state which of
course extends the state of the my app
seems a little cyclical and a little
confusing but I think we're getting
there alright so the first thing we need
to do is well actually let's work with
our state here so hmm what's what do we
want to do
all right so now we've got our scaffold
up I'm gonna say app our new app our
title new text a with the body here we
are going to say new container let's get
a little bit of padding there just so we
know what's going on here whoops that's
a new let's say new center and then we
have our list of widgets that we're
going to flush out here
so the first widget we're going to add
here is a new text field and a whoopsie
new raised button
that way we know that this is a
textfield demo not a text demo there we
go
alright so we played around with text
field before and if we actually just run
this so we can see what this looks like
here we pull my emulator over text field
is actually pretty interesting little
control there's a lot of functionality
packed into this bad boy and you
wouldn't really notice know it unless
you started diving into the
documentation playing around with it so
we're just going to make a completely
obscure example that you'll probably
never use but it shows off some of the
functionality of this alright let's
build this up throw it s out here so
here's our text field that we can type
into and here's our raised button that
we're going to be able to click let's
finish that button up here
I have failed you do it do as I command
anyways new text
there we go now what we want to do here
is we want to actually do the on press
which we've done tons and tons and tons
of times here so let's just make a void
on pressed now you can do this much more
compact I just do it that way it's you
know there's no no issues understanding
what exactly is going on here so it will
call this and we need to even say print
button test or button pressed done that
before now what we want to do is
actually grab the text out of this text
field and we've seen this before where
we can't actually say text field dot
text the text field itself does not
store a state it's a state less widget
so what we have to do is grab those
changes as they occur so we're going to
actually say
and then here let's bang this down here
and then separate that down that way
it's just a little more easier to
understand and we need to say straight
value and then there's our value of
course neater semicolon at the end here
and let's push this back out to the
device and now as we type you can see we
are grabbing the text it is in the text
field and if we click we have our button
pressed so what we need to do now is you
guessed it set state I don't like it
that there let's bump that up there we
go
value that way we actually have the
value here and then we can say
hot reloading should take care of that
and bang the text is blank yeah because
we haven't actually stored it in the
state let's try this yeah there we go so
the text is whatever we just typed so
we've seen that before and similar older
tutorials that we've done now what we
want to do is show off some of the
features of this thing we understand now
that the text field is stateless and
that's why we have to grab this on
changed but what are some other things
that we can really do with this well
we're gonna play around with it a little
bit we're going to say max lines equal 3
so we're gonna have three max lines in
here and you want autocorrect turned on
that's right autocorrect yeah buddy and
let's just play around with that and see
what that does
so let's grab this notice how we have
three lines in here one and we have
autocorrect so I just type and we can
say catch comma and we can go down a
line maybe can't figure how to go down a
line on the emulator here well I kind of
did it you get the point that we have
multiple lines now that we can really
play around with and the text is
whatever blah blah blah catch so you can
have multi lines you can have auto
correction you have all sorts of stuff
you can even have this little this is an
emulator so it won't work but I can
click that and it'll actually dictate
out whatever I'm saying it'll type it
out for us
pretty pretty awesome so obscure text
true I think we've done this in a
previous tutorial this is for passwords
notice how it's a bunch of dots and as
we type you only see the letter for a
second and then bang so we could
actually say something like my top
secret K misspelled my
password bang so let's come at that out
for the time being let's say we want a
decoration we're going to do a new input
decoration and we're going to say icons
that why not just icons dot print hit
text and we'll say type something here
and we want to label text to say what is
your name Oh something blew up
hmm I guess that worked so now you can
see that we have a label text what is
your name let me kind of reload this
because it kind of shrinks when we do
that it says what is your name and then
when you click on it it zooms it up
there we have an icon and it says type
something here and we have multiple
lines of text that's actually really
cool
one thing you should be aware of is this
whole pattern of tracking the state and
all that it can seem a little cumbersome
at times so one little trick that you
can do is you can say final text editing
controller
and we get the controller here and we
can comment out this actually we can
even leave it if we want to I just say
controller and give it the actual
controller then what happens is and we
will say we want on press two and I'm
going to comment this it's kind of
playing around here
yeah we're going to just print out the
troller dot text let's reload this whole
thing so now when we click the button
we're calling on press to which instead
of grabbing the text variables actually
grabbing this controller variable so we
can say blah blah blah blah click and
you can see we get the text and we
didn't have to mess around with sets
date or any of that because we've got it
all in this text editing controller
actually pretty neat so that in a
nutshell is the text field there's a
little bit more to it but I don't want
to get too in-depth these are still be
inner tutorials but as you can see this
thing packs a lot of functionality into
it probably more than most other
frameworks out there and I was really
just kind of blown away when I started
playing with this so let's end this with
now if you like flutter so that's it for
this tutorial if you're looking for the
source code for this maybe maybe there
we go go to my website void Rome's calm
click on tutorials it'll take you right
out to github and I have links to all of
the tutorials I do different series but
you click on the flutter tutorials and
then I've got all of them you can clone
the entire repo down to your hard drive
and have the source for everything on
top of that you can join the void rooms
Facebook group there is almost 1800
other programmers out there all walks of
life all different languages and we can
definitely help if you have any
questions that's it thank you for
watching