Flutter Tutorial - TextField - Deep Dive

Sdílet
Vložit
  • čas přidán 7. 09. 2024

Komentáře • 98

  • @HeyFlutter
    @HeyFlutter  Před 2 lety

    👉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: czcams.com/video/2rn3XbBijy4/video.html
    Email SignIn Tutorial: czcams.com/video/rnHAInnjCmM/video.html
    Google SignIn Tutorial: czcams.com/video/ogW83xGQGTg/video.html
    Text Tutorial: czcams.com/video/WYbXv9WtVwE/video.html
    Text Recognition Tutorial: czcams.com/video/TNKtGOZRA5o/video.html
    Image Tutorial: czcams.com/video/JDDoN2THwug/video.html
    Google Translate Tutorial: czcams.com/video/N_UI1Wps7bI/video.html
    Align & Position Tutorial: czcams.com/video/4wS5LdXJgEA/video.html
    Card Tutorial: czcams.com/video/pDnfJvh7uzc/video.html
    Navigation Tutorial: czcams.com/video/Xnp6ptZVs1g/video.html

  • @hardiklakhalani6268
    @hardiklakhalani6268 Před 3 lety

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

  • @biennguyenvan5637
    @biennguyenvan5637 Před 3 lety

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

  • @stunnaman8803
    @stunnaman8803 Před 3 lety

    Every flutter developer need this

  • @bone29-k8r
    @bone29-k8r Před rokem

    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
      @HeyFlutter  Před rokem

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

  • @barziyassin1
    @barziyassin1 Před 2 lety

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

    • @HeyFlutter
      @HeyFlutter  Před 2 lety +1

      You’re most welcome, Barzy Yasin! 🙂

  • @computerprogrammer9279

    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

  • @edoardoremondini3221
    @edoardoremondini3221 Před 3 lety

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

  • @destinkabote4643
    @destinkabote4643 Před 2 lety

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

  • @hectorprx
    @hectorprx Před 3 lety

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

  • @oswaldoolea2889
    @oswaldoolea2889 Před rokem

    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
      @HeyFlutter  Před rokem

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

  • @VladVons
    @VladVons Před 3 lety

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

  • @iedit1713
    @iedit1713 Před 2 lety

    you are too good man, I love your Videos.

  • @mojtabasaebi6096
    @mojtabasaebi6096 Před 2 lety

    Number One love your Teaching

  • @yoapps137
    @yoapps137 Před 3 lety +2

    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
      @yoapps137 Před 3 lety

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

    • @mumerhafeez2494
      @mumerhafeez2494 Před 10 měsíci

      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?

  • @paulobiscocho9042
    @paulobiscocho9042 Před 2 lety

    Thanks Johannes!

    • @HeyFlutter
      @HeyFlutter  Před 2 lety

      Thanks, also Paulo Biscocho! 🙂

  • @giannifed
    @giannifed Před 3 lety

    thank you Milkee

  • @moehamdan1001
    @moehamdan1001 Před 3 lety

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

  • @narikodanhridul3717
    @narikodanhridul3717 Před 2 lety

    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
      @HeyFlutter  Před 2 lety

      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 🙂

  • @codegame6689
    @codegame6689 Před 3 lety +1

    You are just exceptional!!!

  • @kingisback4005
    @kingisback4005 Před rokem

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

  • @vijaybabaria3253
    @vijaybabaria3253 Před 3 lety

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

  • @md_idy
    @md_idy Před 2 lety

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

  • @fatihtutar7583
    @fatihtutar7583 Před 3 lety

    Thank you so much this video helped me a lot

  • @monishreddy6983
    @monishreddy6983 Před 3 lety

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

  • @haiderjaafer8164
    @haiderjaafer8164 Před 3 lety +1

    Absolutely great keep going forward

  • @jonthuemichel9939
    @jonthuemichel9939 Před rokem

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

    • @HeyFlutter
      @HeyFlutter  Před 11 měsíci

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

  • @deborahmizfel8036
    @deborahmizfel8036 Před 2 lety

    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?

  • @bloodshi1
    @bloodshi1 Před 2 lety

    Thankyou ~~~very helpful video~~

  • @artsylemon7775
    @artsylemon7775 Před 2 lety

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

    • @HeyFlutter
      @HeyFlutter  Před 2 lety

      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 🙂

  • @surujmiah861
    @surujmiah861 Před 3 lety

    You are very amazing man , thank you brother.

  • @Patrickus23
    @Patrickus23 Před 2 lety

    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

  • @rv9570
    @rv9570 Před 2 lety

    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
      @rv9570 Před 2 lety

      @@HeyFlutter Thanks Man!

  • @samuelkings9416
    @samuelkings9416 Před 2 lety

    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
      @HeyFlutter  Před 2 lety

      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 🙂

  • @ritiksaxenaofficial
    @ritiksaxenaofficial Před 3 lety

    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.

  • @anandmano4375
    @anandmano4375 Před 2 lety

    Excellent

  • @ahmedbasalib9300
    @ahmedbasalib9300 Před 3 lety

    You are amazing man , thank you

  • @narikodanhridul3717
    @narikodanhridul3717 Před 2 lety

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

    • @HeyFlutter
      @HeyFlutter  Před 2 lety

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

  • @adeelzahid9622
    @adeelzahid9622 Před 3 lety

    you're awesome as well as your content.

  • @tasaddaqrandhawa4219
    @tasaddaqrandhawa4219 Před 3 lety

    Great job brother

  • @khelasports7396
    @khelasports7396 Před 3 lety +1

    How to Increase the height and Width?

    • @HeyFlutter
      @HeyFlutter  Před 2 lety

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

  • @kerbyelpenord7613
    @kerbyelpenord7613 Před 2 lety

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

    • @HeyFlutter
      @HeyFlutter  Před 2 lety +1

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

  • @JuanPerez-vv5lk
    @JuanPerez-vv5lk Před 3 lety

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

    • @HeyFlutter
      @HeyFlutter  Před 2 lety

      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

  • @ahmetcubuk4245
    @ahmetcubuk4245 Před 3 lety

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

    • @ahmetcubuk4245
      @ahmetcubuk4245 Před 3 lety

      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

  • @edoardoremondini3221
    @edoardoremondini3221 Před 3 lety

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

    • @HeyFlutter
      @HeyFlutter  Před 2 lety

      Thank you, Edoardo Remondini! Check out this video about textfield validation: czcams.com/video/2rn3XbBijy4/video.html

  • @deepjyotibaishya7576
    @deepjyotibaishya7576 Před 2 lety

    how tu use textfield done by clicking on
    anywhere background .

    • @HeyFlutter
      @HeyFlutter  Před 2 lety +1

      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 🙂

  • @warperone
    @warperone Před 2 lety

    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
      @HeyFlutter  Před 2 lety

      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 🙂

  • @yunismaruf
    @yunismaruf Před 2 lety

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

    • @yunismaruf
      @yunismaruf Před 2 lety

      @@HeyFlutter thank you 😊

    • @HeyFlutter
      @HeyFlutter  Před 2 lety +1

      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
      @yunismaruf Před 2 lety

      @@HeyFlutter thank you 😊

  • @RandalLSchwartz
    @RandalLSchwartz Před 3 lety

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

    • @RandalLSchwartz
      @RandalLSchwartz Před 3 lety

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

    • @HeyFlutter
      @HeyFlutter  Před 2 lety

      ​ @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

  • @aziem462
    @aziem462 Před 2 lety

    You are a nice person

  • @multiculturalvolleyballbar3467

    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
      @HeyFlutter  Před 2 lety

      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/

  • @Mazda-vu9lc
    @Mazda-vu9lc Před 3 lety

    Amazing !!! thank you

  • @vinusubhash9106
    @vinusubhash9106 Před 2 lety

    Gold

  • @MuhammadAdnan-vs5cx
    @MuhammadAdnan-vs5cx Před 3 lety

    Please complete flutter project easy way with firebase

    • @MuhammadAdnan-vs5cx
      @MuhammadAdnan-vs5cx Před 3 lety

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

    • @HeyFlutter
      @HeyFlutter  Před 2 lety

      Thank you, Muhammad Adnan! 🙂
      check out the Firebase CRUD Tutorial where a whole app is created from scratch: czcams.com/video/EV2DyrKOqrY/video.html

  • @mateenmehmood5675
    @mateenmehmood5675 Před 2 lety

    Big fan.

    • @HeyFlutter
      @HeyFlutter  Před 2 lety +1

      Thank you, Mateen Mehmood! 🙂

  • @flutterquick
    @flutterquick Před 2 lety

    how to disable totally IconButton focusable

    • @flutterquick
      @flutterquick Před 2 lety

      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
      @HeyFlutter  Před 2 lety

      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 🙂

  • @lukengirubiu6492
    @lukengirubiu6492 Před 3 lety

    Great

  • @nickreutlinger
    @nickreutlinger Před 3 lety

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

  • @aissoumonder3518
    @aissoumonder3518 Před 3 lety

    when I clicked to the textfield, the border disapear

    • @aissoumonder3518
      @aissoumonder3518 Před 3 lety

      @@HeyFlutter thanks men you're the best

    • @HeyFlutter
      @HeyFlutter  Před 2 lety

      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 🙂

  • @berkcan3475
    @berkcan3475 Před 2 lety

    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
    @ahmednegm7404 Před 3 lety +1

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

    • @HeyFlutter
      @HeyFlutter  Před 2 lety

      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 czcams.com/video/CQZr-GXe__Y/video.html
      This might help you also check the source code of this video out: github.com/JohannesMilke/textfield_example

  • @GraubiGames
    @GraubiGames Před 3 lety

    lmao i can hear that you are german ahahahah