No video :(

Flutter Tutorial - TextField - Deep Dive

Подписаться 201 тыс.

Просмотров 86 тыс.

50% 1

We learn how to style & decorate TextFields and how to access our beautiful TextField with controllers and FocusNodes in Flutter.
Click here to Subscribe to Johannes Milke: ru-vid.com...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/text...
My Courses | heyflutter.com
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
TextFormField & Forms Tutorial: • Flutter Tutorial - How...
Email SignIn Tutorial: • Flutter Tutorial - Ema...
Google SignIn Tutorial: • Flutter Tutorial - Goo...
Text Tutorial: • Flutter Tutorial - Flu...
Text Recognition Tutorial: • Flutter Tutorial - Tex...
Image Tutorial: • Flutter Tutorial - Flu...
Google Translate Tutorial: • Flutter Tutorial - Tra...
Align & Position Tutorial: • Flutter Tutorial - Ali...
Card Tutorial: • Flutter Tutorial - Car...
Navigation Tutorial: • Flutter Tutorial - 1/2...
TIMELINE
0:00 TextField Introduction
0:31 Email TextField
2:33 TextEditingController
4:53 Password TextField
9:30 Number TextField
12:33 Borders Introduction
12:55 No Border TextField
13:09 Underline Border TextField
13:26 Square Outline Border TextField
13:38 Rounded Outline Border TextField
15:26 Beveled Outline Border TextField
16:30 Focus TextField Introduction
16:54 Focus TextField
18:52 Unfocus TextField
19:38 Unfocus TextField By Gestures
20:22 Keyboard Dismisser Plugin
21:50 Disable TextField
22:50 Autofocus TextField
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Me :-)
Twitter | intent/follow?ori...
Linkedin | / johannesmilke
Github | github.com/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...
WATCH TEXTFIELD - DEEP DIVE TUTORIAL | • Flutter Tutorial - Tex...
WATCH UPDATE PACKAGES & DEPENDENCIES AUTOMATIC .. TUTORIAL | • Flutter Tutorial - Upd...
WATCH ANIMATEDBUILDER - DEEP DIVE TUTORIAL | • Flutter Tutorial - Ani...
WATCH INHERITED WIDGET EXPLAINED IN DETAIL TUTORIAL | • Flutter Tutorial - Inh...
WATCH BARCODE SCANNER APP TUTORIAL | • Flutter Tutorial - Bar...
WATCH QR CODE SCANNER APP TUTORIAL | • Flutter Tutorial - QR ...
WATCH 2/2 FITNESS APP UI TUTORIAL | • Flutter Tutorial - 2/2...
WATCH 1/2 FITNESS APP UI (FOR BEGINNERS) TUTORIAL | • Flutter Tutorial - 1/2...
WATCH 2/2 CALCULATOR UI (RIVERPOD) TUTORIAL | • Flutter Tutorial - 2/2...
WATCH 1/2 CALCULATOR UI (RIVERPOD) TUTORIAL | • Flutter Tutorial - 1/2...
WATCH ONBOARDING UI SCREEN TUTORIAL | • Flutter Tutorial - Onb...
WATCH 2/2 IMAGE - DEEP DIVE TUTORIAL | • Flutter Tutorial - Flu...
WATCH 1/2 IMAGE - DEEP DIVE TUTORIAL | • Flutter Tutorial - Flu...
WATCH IGNOREPOINTER & ABSORBPOINTER TUTORIAL | • Flutter Tutorial - Ign...
WATCH DIALOGS - DEEP DIVE TUTORIAL | • Flutter Tutorial - Cre...
WATCH RIVERPOD - 3/3 THE ULTIMATE GUIDE FOR MO .. TUTORIAL | • Flutter Tutorial - Riv...
WATCH RIVERPOD - 2/3 THE ULTIMATE GUIDE FOR NO .. TUTORIAL | • Flutter Tutorial - Riv...
WATCH RIVERPOD - 1/3 THE ULTIMATE GUIDE FOR PR .. TUTORIAL | • Flutter Tutorial - Riv...
WATCH NAVIGATIONRAIL - DEEP DIVE TUTORIAL | • Flutter Tutorial - Nav...
WATCH SWITCH - DEEP DIVE TUTORIAL | • Flutter Tutorial - Tog...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke

Опубликовано:

13 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 98

@HeyFlutter 2 года назад

👉Join 12 Week Flutter Training: heyflutter.com 👉Join the WhatsApp Channel to get the latest news about Flutter & HeyFlutter: whatsapp.com/channel/0029VaDNCZtC1Fu8nL2vmw3f Source Code: github.com/JohannesMilke/textfield_example TextFormField & Forms Tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-2rn3XbBijy4.html Email SignIn Tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-rnHAInnjCmM.html Google SignIn Tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ogW83xGQGTg.html Text Tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-WYbXv9WtVwE.html Text Recognition Tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TNKtGOZRA5o.html Image Tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JDDoN2THwug.html Google Translate Tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-N_UI1Wps7bI.html Align & Position Tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4wS5LdXJgEA.html Card Tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-pDnfJvh7uzc.html Navigation Tutorial: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Xnp6ptZVs1g.html

@hardiklakhalani6268 3 года назад

I like your To The Point Video Editing. Not a single second goes to waste.

@biennguyenvan5637 3 года назад

You save my *noob* 30 minutes struggling with suffix change when text is empty. Thank you!

@stunnaman8803 3 года назад

Every flutter developer need this

@computerprogrammer9279 2 года назад

Bro thanks a lot. I hope your channel will grow day by day and it became the most famous channel in the world. I am your big fan broo

@bone140692 Год назад

amazing, you are not showing the fundametals, but also the logical flows in coding, which are very good for non-IT base like me. Thank you so much for your efforts.

@HeyFlutter Год назад

Glad to hear that, You are welcome Bon Du lịch! 😊

@barziyassin1 Год назад

Very good and quick dive. You broke the ice by the mean, thanks Johannes 👍

@HeyFlutter Год назад

You’re most welcome, Barzy Yasin! 🙂

@destinkabote4643 2 года назад

Thank you so much for this complete tutorial of TextField, greatjob!

@oswaldoolea2889 Год назад

tutorial very well paced, explained, content rich and essential for flutter layouts and functionality (....and with code in github.... yahuuuu!! ) , thank you a lot,

@HeyFlutter Год назад

Glad to hear that, You are welcome Oswaldo Olea! 😊

@mojtabasaebi6096 2 года назад

Number One love your Teaching

@iedit1713 2 года назад

you are too good man, I love your Videos.

@edoardoremondini3221 2 года назад

amazing channel. as a flutter beginner helps me figure out a lot of things. thank you so much

@VladVons 3 года назад

Thanks more + like from me! Every your sourced lesson is short and easy to understand

@hectorprx 3 года назад

Great job Breaking down all the aspects of the given widget. Thanks

@paulobiscocho9042 2 года назад

Thanks Johannes!

@HeyFlutter 2 года назад

Thanks, also Paulo Biscocho! 🙂

@codegame6689 3 года назад

You are just exceptional!!!

@haiderjaafer8164 3 года назад

Absolutely great keep going forward

@giannifed 2 года назад

thank you Milkee

@yoapps137 3 года назад

Video is amazing. Just 1 recommendation - you could show how to avoid the keypad that slides up, from covering your text field that you clicked on.. Since now that text field has focus.

@yoapps137 3 года назад

@@HeyFlutter great .. I really admire you & your humility. All the best Always :-)

@mumerhafeez2494 9 месяцев назад

Can you tell me how would I show the text over the text field at left without focusing it. means to say the format shown at focus can be done if we want this on without focus?

@bloodshi1 2 года назад

Thankyou ~~~very helpful video~~

@fatihtutar7583 3 года назад

Thank you so much this video helped me a lot

@surujmiah861 3 года назад

You are very amazing man , thank you brother.

@surujmiah861 3 года назад

@@HeyFlutter welcome.

@monishreddy6983 3 года назад

And thattt is fantasticooooooo man!!!!!!????

@ahmedbasalib9300 3 года назад

You are amazing man , thank you

@tasaddaqrandhawa4219 3 года назад

Great job brother

@md_idy 2 года назад

Hi Johannes, How to change color of the bubble (under cursor) while editing the text in Text Field.

@anandmano4375 2 года назад

Excellent

@vijaybabaria3253 3 года назад

Thanks, would love to see extension of these text forms with rich text editor like quill - thanks

@deborahmizfel8036 2 года назад

Hello, one question. How did you change the color of the word email when it was selected? In the beginning was grey and then was red, how did you do that?

@jonthuemichel9939 11 месяцев назад

What is the best way to apply styles globally? Is making a custom widget the only way?

@HeyFlutter 11 месяцев назад

Thank You @jonthuemichel9939! Follow this link: kcl.hashnode.dev/how-to-define-a-flutter-theme I hope you will get your answer 🙂

@narikodanhridul3717 2 года назад

I made a ALERT DIALOGUE BOX, content is having a TEXT FIELD , and actions have two BUTTONS in a row...... BUT there is some EXTRA SPACE between these TEXT FIELD and BUTTONS..... How can I avoid thaaat space. I used padding with insets = 0 ..... But not working, also tried by wraping text field with container and specifying height but that too didnt worked ... what to do....How can I avoid thaaat space

@HeyFlutter 2 года назад

Thank You NARIKODAN HRIDUL! Follow this link: fluttercentral.com/Articles/Post/1060/How_to_remove_the_extra_space_on_left_side_of_Column_Widget I hope you will get your answer 🙂

@moehamdan1001 3 года назад

Why text field is always make problem and bugs in real device , but in emulater work fine ?

@adeelzahid9622 3 года назад

you're awesome as well as your content.

@Patrickus23 2 года назад

Sir, How can we set a TextFieldForm in the center of the screen onTap Function? Or at least to make it visible and above the keyboard

@kingisback4005 Год назад

Hi sir for web textinput type number not working Do you have any solution

@artsylemon7775 2 года назад

Is that possible to paste / copy text from the inputs? For me copy, paste, select al and cut buttons not working.

@HeyFlutter 2 года назад

Thank You Artsy Lemon! Follow this link: www.fluttercampus.com/guide/87/how-to-copy-paste-text-from-clipboard-with-dart-flutter/ I hope you will get your answer 🙂

@rv9570 2 года назад

Hey Johnathan, hope you are doing well can you please make a video on one time purchase in app. I mean lifetime fee to use the app. Also please tell can it possible without having database. Also with local payment method if possible. Thanks in advance.

@rv9570 2 года назад

@@HeyFlutter Thanks Man!

@samuelkings9416 2 года назад

Hi Johnannes. I couldn't find any tutorial on the internet where are user can bold a part of his text inside a text field just like whatsapp. Can you please help out?

@HeyFlutter 2 года назад

Thank You Kings Samuel Abimbola! Follow this link: stackoverflow.com/questions/51093559/flutter-is-it-possible-to-format-bold-italicize-etc-with-in-the-string-only I hope you will get your answer 🙂

@edoardoremondini3221 2 года назад

can you do a video on the validation of this textfields? just subscribed btw

@HeyFlutter 2 года назад

Thank you, Edoardo Remondini! Check out this video about textfield validation: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-2rn3XbBijy4.html

@JuanPerez-vv5lk 3 года назад

Excelent tutorial. Do you have a tutorial to create the same mobile app for Android & IOS ?

@HeyFlutter 2 года назад

Thank you, Juan Perez! 🙂 I usually focus on flutter tutorials only, this same flutter app can be used on Android as well as on iOS

@warperone 2 года назад

very comprehensive video - well done. I'm trying to create a TextField that gets a user to enter a time in HH:MM:SS format. I want it so as they type in HH I automatically insert ':' in TextField and so on, I can get it to work but when they press backspace or delete key it does not work so well. Any thoughts or examples ?

@HeyFlutter 2 года назад

Thank You mars 000! Follow this link: stackoverflow.com/questions/62467842/flutter-textfield-input-validation-for-a-date I hope you will get your answer 🙂

@Mazda-vu9lc 3 года назад

Amazing !!! thank you

@khelasports7396 3 года назад

How to Increase the height and Width?

@HeyFlutter 2 года назад

Thank You AZ Gaming! Follow this link: www.kindacode.com/article/flutter-textfield-width-height-padding/ I hope you will get your answer 🙂

@narikodanhridul3717 2 года назад

if we use keyboard dismisser in dependencies... will that increase app size ?

@HeyFlutter 2 года назад

Thank You NARIKODAN HRIDUL! Follow this link: pub.dev/packages/keyboard_dismisser I hope you will get your answer 🙂

@kerbyelpenord7613 2 года назад

Hi, do you know how can i retreive selected text form a textfield?

@HeyFlutter 2 года назад

Thank You Kerby Elpenord! Follow this link: stackoverflow.com/questions/56568057/flutter-textfield-get-selected-text I hope you will get your answer 🙂

@ahmetcubuk4245 3 года назад

I want to set email text color and border color when I click the field how can I do that

@ahmetcubuk4245 3 года назад

In your example the text color and border color when the box is clicked are red, just like in your app, i want to do this in orange in my app

@mateenmehmood5675 2 года назад

Big fan.

@HeyFlutter 2 года назад

Thank you, Mateen Mehmood! 🙂

@aziem462 2 года назад

You are a nice person

@RandalLSchwartz 3 года назад

Could you have used a Riverpod flutter_hooks "useTextEditingController" to avoid adding (or forgetting to add) the initState and dispose?

@RandalLSchwartz 3 года назад

@@HeyFlutter Are you going to re-edit it to talk about the missing dispose? :)

@HeyFlutter 2 года назад

@Randal L. Schwartz Within the dispose method the TextEditingController needs to be disposed to clean up resources of the TextEditingController properly 1) Learn more about the dispose method here: stackoverflow.com/a/64384890 2) I have also implemented the dispose method properly within the source code of this project here: github.com/JohannesMilke/textfield_example/blob/3a5980c3524b441504d21e1b7528386f10d5e4f8/lib/widget/textfield_general_widget.dart#L22

@ritiksaxenaofficial 2 года назад

4:28 we can also use below code for suffix icon: suffixIcon: Visibility( *visible: emailController.text.isEmpty ? false : true,* child: IconButton( icon: const Icon(Icons.clear), onPressed: () { emailController.clear(); }, splashRadius: 15, ), ), Visibility is explained in one of your recent videos.

@vinusubhash9106 2 года назад

Gold

@multiculturalvolleyballbar3467 3 года назад

Is there any way the user can create Rich Texts with a Textfield? For example if the user wants to convert any word inside the textfield to bold?

@HeyFlutter 2 года назад

Thank you, Multicultural ! You could learn more about to create Rich Texts with a Textfield here: livecyclekarma.wordpress.com/2009/05/20/richtext-tricks-for-textfield-in-designer/

@deepjyotibaishya7576 2 года назад

how tu use textfield done by clicking on anywhere background .

@HeyFlutter 2 года назад

Thank You Deepjyoti Baishya! Follow this link: stackoverflow.com/questions/51652897/how-to-hide-soft-input-keyboard-on-flutter-after-clicking-outside-textfield-anyw I hope you will get your answer 🙂

@MuhammadAdnan-vs5cx 3 года назад

Please complete flutter project easy way with firebase

@MuhammadAdnan-vs5cx 3 года назад

@@HeyFlutter but your tutorial is so difficult to understand as a beginner level

@HeyFlutter 2 года назад

Thank you, Muhammad Adnan! 🙂 check out the Firebase CRUD Tutorial where a whole app is created from scratch: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-EV2DyrKOqrY.html

@yunismaruf 2 года назад

when text field is active, I want to set color for mail icon to green, how can do that?

@yunismaruf 2 года назад

@@HeyFlutter thank you 😊

@HeyFlutter 2 года назад

Thank You Yunis Maruf! Follow this link: stackoverflow.com/questions/54802765/flutter-textfield-change-icon-color-when-selected I hope you will get your answer 🙂

@yunismaruf 2 года назад

@@HeyFlutter thank you 😊

@lukengirubiu6492 3 года назад

Great

@flutterquick 2 года назад

how to disable totally IconButton focusable

@flutterquick 2 года назад

And please show how to start from some text to input phone number: for example +251 00990990 +251 is not editable or can not be clear I see on stackoverflow county code chooser but i don't need because of the country flag img.

@HeyFlutter 2 года назад

Thank You amanuel gulilat! Follow this link: stackoverflow.com/questions/63138176/how-can-i-keep-the-iconbutton-inside-a-textfield-from-focusing-the-text-field-wh I hope you will get your answer 🙂

@aissoumonder3518 2 года назад

when I clicked to the textfield, the border disapear

@aissoumonder3518 2 года назад

@@HeyFlutter thanks men you're the best

@HeyFlutter 2 года назад

Hello, Badi elmaestro! Follow this link: stackoverflow.com/questions/49930127/outlineinputborder-disappears-when-the-textfieldform-is-selected-focused, I hope it will solve your problem. Thank You 🙂

@nickreutlinger 3 года назад

Great Tutorial or should I say Gut gemacht? Man hört echt raus, dass deine Muttersprache Deutsch ist. Das ist aber ja nichts schlechtes:)

@berkcan3475 2 года назад

sorry but I cant like this because it is not deep dive covering some cases, eg: transparent with no extra height more than font size is not included here :'(

@ahmednegm7404 3 года назад

I hope you write the code from the beginning and not just explain. Thank you

@HeyFlutter 2 года назад

I tried to cover only the parts important for TextFields and didn't explain the other Flutter components. If it was too fast for you make sure to watch my beginner tutorial here first ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-CQZr-GXe__Y.html This might help you also check the source code of this video out: github.com/JohannesMilke/textfield_example