Flutter Tutorial - How To Use Stepper Widget | The Right Way | Multi-Step Forms

Поделиться
HTML-код
  • Опубликовано: 18 ноя 2024

Комментарии • 102

  • @HeyFlutter
    @HeyFlutter  2 года назад +1

    This might help you :)
    👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com
    Source Code: github.com/JohannesMilke/stepper_widget
    Validate Forms Tutorial: ruclips.net/video/2rn3XbBijy4/видео.html
    Create & Validate Forms With AutoComplete Tutorial: ruclips.net/video/FxO_zeCsdFg/видео.html
    Change App Icon & App Name Tutorial: ruclips.net/video/eMHbgIgJyUQ/видео.html
    Create Home Screen App Shortcuts Tutorial: ruclips.net/video/sqw-taR2_Ww/видео.html
    WebView App Tutorial: ruclips.net/video/LyAwnwvbBKM/видео.html
    Amazing Lottie Animations Tutorial: ruclips.net/video/kyPizhfn8k8/видео.html
    Image Picker From Gallery & Camera Tutorial: ruclips.net/video/MSv38jO4EJk/видео.html
    User Profile Page Tutorial: ruclips.net/video/gSl-MoykYYk/видео.html
    Crop & Save Image Tutorial: ruclips.net/video/pXbBTJt7frM/видео.html
    Upload File To Firebase Storage Tutorial: ruclips.net/video/dmZ9Tg9k13U/видео.html
    Share Texts, Images, Files Tutorial: ruclips.net/video/-PmUFbbA-Fs/видео.html
    Image Slider Tutorial: ruclips.net/video/JEMx2ax0734/видео.html
    Take Screenshots Of Screen Tutorial: ruclips.net/video/rABnaF-Xk3E/видео.html
    Download File From Firebase Storage Tutorial: ruclips.net/video/YA_fHCF_EYc/видео.html
    Settings Page UI Tutorial: ruclips.net/video/pYQAhrY_SQA/видео.html
    SVG Images Tutorial: ruclips.net/video/E3xVcQ0TAHg/видео.html
    Set Screen Background Image Tutorial: ruclips.net/video/sDS4c1C-Fdg/видео.html
    Cached Network Image Tutorial: ruclips.net/video/6wvD-Z-9ZRM/видео.html
    Compress Video Tutorial: ruclips.net/video/JUeWeZXn71M/видео.html
    Video Player Tutorial: ruclips.net/video/uz4xRnE-UIw/видео.html
    Drop Files Into Dropzone Tutorial: ruclips.net/video/pZdJX3PAydQ/видео.html

  • @ezeaguprincewill7005
    @ezeaguprincewill7005 3 года назад +6

    I was just about to update the UI of my app with a stepper when I saw this notification. Beautiful timing I must say.

  • @lme4339
    @lme4339 3 года назад

    Ich bin mittlerweile ein echter Fan deines Kanals.

  • @robbylebotha
    @robbylebotha Год назад +3

    As a native app developer since 2014 I'm having so much fun with Flutter. I get so much built in so little time versus native. A listview that takes an hour to implement perfectly now takes me 10 minutes in flutter.
    I can build a GOOD looking task/todo app in flutter including working database and API in maybe 30-60 minutes at most, which would take 4 hours natively(to look as good and perform as reliable).
    You tell me your stupid app idea on Friday, I can have a functional prototype by Monday. 😊
    To anyone weighing up whether to pick up flutter or not. Trust me, dive into it.
    But not sure yet of I would recommend a complete mobile app developer newbie to start with it. I'm a traditionalist so I still say learn native first. I don't think I would be able to build as fast in flutter if I didn't know native design, SDK and framework.

    • @HeyFlutter
      @HeyFlutter  Год назад +1

      Hey, @robbylebotha 🙂 It's great you started with native first. But starting from flutter in this techy world is absolutely a great choice these days btw thanks for sharing your experience

  • @chuongnguyenhoai1606
    @chuongnguyenhoai1606 2 года назад

    you are the Hero in Flutter

  • @sammyjokes9613
    @sammyjokes9613 2 года назад

    Truly man, you are a good teacher.. You teach to understand..
    Please Kindly make tutorials on projects like how to build an Ecommerce app,
    Chat app,
    Mobile banking etc..

  • @sahikahtesam793
    @sahikahtesam793 3 года назад +1

    Just awesome bro. We know new thing every day buy watching your video. Thanks a lot and obviously keep it up

  • @douglasperez3701
    @douglasperez3701 3 года назад

    Great video! Greatings from Peru.

  • @dicksonguinajnr1449
    @dicksonguinajnr1449 3 года назад +1

    Thank you such my brother.. learning more from you. Thank you for blessing us.. God Bless

  • @jeffreysegovia7656
    @jeffreysegovia7656 2 года назад

    Woaahh. Superb presentation! Thank you!

  • @goldenlife6166
    @goldenlife6166 3 года назад

    Great work johannes

  • @LuminousAsianBeauties
    @LuminousAsianBeauties 3 года назад +1

    Like always, amazing clear, information and step by step. you doing great.thanks for your videos.

  • @AiEnthusiast999
    @AiEnthusiast999 3 года назад

    just in time for my app, thank you

  • @ariuntsetsegmunhtulga3732
    @ariuntsetsegmunhtulga3732 2 года назад

    Wow wow it's really helped my code Thank you very much

  • @TechWithSabri
    @TechWithSabri 3 года назад

    **Successfully done**
    Thank You man for your efforts and time, we appreciate your efforts.

  • @robertomejia3124
    @robertomejia3124 3 года назад

    Muchas gracias!
    edited my question, after paying attention haha, thanks a lot!

  • @lucasformigon4573
    @lucasformigon4573 2 года назад

    Hey, brother! Amazing class! Thanks for shared

  • @이제영-n5b
    @이제영-n5b 3 года назад

    Absoutly u r genius sir thanku.

  • @prayandcode
    @prayandcode 3 года назад

    Great video as usual. 👍🏽

  • @ImranHossain-qs6tm
    @ImranHossain-qs6tm 2 года назад

    Awesome Tutorial.. Thank u so much

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

      You’re most welcome, Imran Hossain! 🙂

  • @placidemuhemedi1492
    @placidemuhemedi1492 2 года назад

    Thanks big brother 🙏🏻🙏🏻

  • @DevProjectsJohannes
    @DevProjectsJohannes 3 месяца назад

    Thanks for this tutorial. Is there a chance to expand this tutorial with using the FormBuilder in connection with the stepper? I imagine I'm not the only one who wants to use FormBuilder in conjunction with the stepper, so I'm sure this would be very helpful for others too. Thanks a lot.

    • @HeyFlutter
      @HeyFlutter  3 месяца назад

      Thanks for the idea @DevProjectsJohannes 😀, i have added it in my list of future videos

  • @zekotch
    @zekotch 3 года назад

    Thank youuuu verrrrryyyy muuuuuchhhh ! you're a blesssing !!!!!

    • @zekotch
      @zekotch 3 года назад

      Hi , please what about validation on each step before moving to the next step

  • @eNONO-ot4zh
    @eNONO-ot4zh 3 года назад

    You are genius. Thank you 👍

  • @jean-baptistenzudie2770
    @jean-baptistenzudie2770 3 года назад

    amazing content, thank you sir

  • @zawadalam2774
    @zawadalam2774 3 года назад

    Thank you for the tutorial....its a great one indeed

  • @dranzgaming1341
    @dranzgaming1341 Год назад

    Your videos are very helpful..Thank you for this awesome content🔥

    • @HeyFlutter
      @HeyFlutter  Год назад

      Glad to hear that, Thank you DranzGaming! 😊

  • @aniketkanade1064
    @aniketkanade1064 2 года назад

    tnx bro i like it ur all videos

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

      Thanks for your feedback, Aniket Kanade! 🙂

  • @bayanhoms8532
    @bayanhoms8532 3 года назад

    The best of the best , thanks alot for the useful and special content .

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

    Great lesson keep going forward…

  • @ranjantechnocrat
    @ranjantechnocrat 2 месяца назад

    Awesome buddy

    • @HeyFlutter
      @HeyFlutter  2 месяца назад +1

      Glad you liked it, @ranjantechnocrat 😀

  • @officialismailshah
    @officialismailshah 3 года назад

    amazing content always....❤❤❤❤❤

  • @officialismailshah
    @officialismailshah 3 года назад

    sir make a video on better player package, no one has done video on it....thanks in advance....

  • @ephraimalhamdu
    @ephraimalhamdu 2 года назад

    Hello thank you for this amazing tutorial, if you may do an additional video on how to add the informations gotten in textfield widget to display in a profile page. 😊

    • @HeyFlutter
      @HeyFlutter  2 года назад +1

      Thanks for the idea E A 😀, i have added it in my list of future videos

  • @menoubiacorentin5690
    @menoubiacorentin5690 3 года назад

    hi man, nice tutorial, i tried checking out your code, but it seems have to pay for that?

  • @ChristianKyony
    @ChristianKyony 3 года назад +2

    Hi Johannes, when I create a horizontal Stepper with a lots of step, I get an overflow error. What should I do?

    • @ChristianKyony
      @ChristianKyony 3 года назад

      @@HeyFlutter Thank you for the link. And once again, keep up the good work!

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

      Hello, Christian Kyony! Follow this link: medium.com/geekculture/flutter-solving-the-overflow-problem-2fa968054d6, I hope it will solve your problem. Thank You 🙂

    • @dogukanciftci8532
      @dogukanciftci8532 2 года назад

      Hi Christian. I get same problem. i reviewed the link but cant do anything. How did you solved it? Pls help

  • @farhanashari5149
    @farhanashari5149 2 года назад

    thank you for the tutorial, but i have some question. How can i hande an overflow in horizontal stepper? because i have many title in the stepper

    • @HeyFlutter
      @HeyFlutter  2 года назад +1

      Thank You Farhan Ashari! Follow this link: stackoverflow.com/questions/52112206/handling-overflow-of-horizontal-stepper
      I hope you will get your answer 🙂

    • @farhanashari5149
      @farhanashari5149 2 года назад

      @@HeyFlutter i still don't understand how to fix it, can you explain this with a video tutorial? 😅

  • @mehrtashsouri6862
    @mehrtashsouri6862 Год назад

    Dear johannes how can I fix the control buttons at the bottom and scroll content if the user wants to scroll?

    • @mehrtashsouri6862
      @mehrtashsouri6862 Год назад

      on controlsBuilder:(context, details) I return const SizedBox(); so buttons are removed. i put 2 buttons on Scaffold bottomNavigationBar and with setState change the current step. is there another way ? :)

    • @HeyFlutter
      @HeyFlutter  Год назад

      Thank You @mehrtashsouri6862! Follow this link: medium.com/@diegoveloper/flutter-lets-know-the-scrollcontroller-and-scrollnotification-652b2685a4ac
      I hope you will get your answer 🙂

  • @davidkanai6944
    @davidkanai6944 3 года назад

    fantastic

  • @ashfaqueansari1851
    @ashfaqueansari1851 3 года назад

    Hey bro can you please make video on how to handle splash Screen and walkthrough screen and multiple screen in flutter please

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

      Thank you, Ashfaque Ansari! Check out this video about splash screen : ruclips.net/video/8ME8Czqc-Oc/видео.html&ab_channel=JohannesMilke

  • @a7mdFathii
    @a7mdFathii 3 года назад

    thanks for this video but I did not see the stepper that shows in the caption video

    • @a7mdFathii
      @a7mdFathii 3 года назад

      @@HeyFlutter thanks for replaying, if I want see every step to be icon and text in a column or vertical shape

  • @claudedaiga5897
    @claudedaiga5897 3 года назад +1

    Nice tutorials, but is there a way to validate the steppers before moving to next?

    • @claudedaiga5897
      @claudedaiga5897 3 года назад

      @@HeyFlutter Thank you very much.

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

      Thanks, Claude Daiga! 🙂 Learn more about validation here: ruclips.net/video/FxO_zeCsdFg/видео.html

  • @yeryer316
    @yeryer316 Год назад

    If I want to keep the Next button on the 1st step in the original position how is this done?

    • @HeyFlutter
      @HeyFlutter  Год назад

      Thank You Ramsey Merdassi! Follow this link: stackoverflow.com/questions/71221683/flutter-how-do-i-change-the-buttons-on-the-last-step-in-the-stepper
      I hope you will get your answer 🙂

  • @dimajoyti
    @dimajoyti 3 года назад

    Awesome

  • @wasss3745
    @wasss3745 2 года назад

    what if i hide the continue button in the last part. How is it?

  • @fadihaddad7067
    @fadihaddad7067 2 года назад

    Hello
    How i can change the icon step
    Rather than numbers.. can i put my own icon?

  • @robertomejia3124
    @robertomejia3124 3 года назад

    Can I validate fields ??

  • @padminilakshmanan1638
    @padminilakshmanan1638 2 года назад

    How to display account under 1, address under 2 like u shown in thumbnail image .

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

      Thank You padmini lakshmanan! Follow this link: medium.flutterdevs.com/stepper-widget-in-flutter-37ce5b45575b
      I hope you will get your answer 🙂

  • @alexcosta9185
    @alexcosta9185 3 года назад

    why you dont provide source code you just give us link but link dont has code

  • @dhrubrawat9316
    @dhrubrawat9316 3 года назад

    Flutter 2.5 released?

  • @stefuneditz8570
    @stefuneditz8570 2 года назад +1

    The texts are not under the indicator u cheated all. There is a difference between your thumbnail and your video

  • @sandeepkarne9256
    @sandeepkarne9256 3 года назад

    hey hi,
    I am working on a multipage form with 4 pages data and each page contains various details ranging from date, time, user details and user input data. all details are entered in textformfields and I am using controllers for each field, but in horizontal stepper format the data is lost while moving from one page to another, both to and fro. How to preserve data in each field of each page and fields are cleared only when the form is finally submitted. please give solution.

    • @HeyFlutter
      @HeyFlutter  2 года назад +1

      Thank You Sandeep Karne! Follow this link: stackoverflow.com/questions/55513983/saving-data-in-flutter-pageview
      I hope you will get your answer 🙂

  • @josegonzalezmartinez2322
    @josegonzalezmartinez2322 3 года назад

    Saludos desde México es impresionante la forma en como realizas el desarrollo, es posible que en algún momento puedas ponerle subtítulos a tus cursos de tu pagina

  • @davidefalcone2468
    @davidefalcone2468 3 года назад

    Is it possible to add a sliding horizontal effect without using routes?

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

      Thank You Davide Falcone! Follow this link: medium.com/flutter-community/everything-you-need-to-know-about-flutter-page-route-transition-9ef5c1b32823
      I hope you will get your answer 🙂

  • @mergesthomas2552
    @mergesthomas2552 Год назад

    you deserve the 14$

    • @HeyFlutter
      @HeyFlutter  Год назад

      Great, Thank you Merges Thomas!

  • @aotan845
    @aotan845 3 года назад

    Can you help me: how to put the title of the Step below the counter?

    • @aotan845
      @aotan845 3 года назад

      @@HeyFlutter I want the title to be below the number when the Steper is horizontal. thanks

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

      Thank You Đào Tấn! Follow this link: medium.com/flutterdevs/stack-and-positioned-widget-in-flutter-3d1a7b30b09a
      I hope you will get your answer 🙂

  • @mohamedzakariagridi1059
    @mohamedzakariagridi1059 3 года назад

    The horizontal stepper is broken, if you create more than 3 steps the steps overlaps and you cant scroll to the step you want

  • @ezz_dev
    @ezz_dev 2 года назад

    I like your works but to have the source code is a long story :(

  • @deepjyotibaishya7618
    @deepjyotibaishya7618 2 года назад

    how to scroll because i have more then 3 Step()

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

      Hey, Deepjyoti Baishya 🙂 stepper is auto scrollable

    • @deepjyotibaishya7618
      @deepjyotibaishya7618 2 года назад

      @@HeyFlutter no only contents are scrollable. Step() are not scrollable on my app. or i am not able to do this.

  • @ogbuezekiel7400
    @ogbuezekiel7400 Год назад

    Source code isn't available for common man!

    • @HeyFlutter
      @HeyFlutter  Год назад

      Thank You Ogbu Ezekiel!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware

  • @dhrubrawat9316
    @dhrubrawat9316 3 года назад

    what is difference between ==> children: [] and children: [];

    • @meshkatshadik
      @meshkatshadik 3 года назад +1

      The Second one computes the children in runtime, which might be a cause of very low percentage extra effect on UI rebuilding. Because, it allocates dynamic and in the run time it checks what is the type of my widgets!
      On the other hand, First one is compiled type, which means no extra work for this at the runtime. Which removes the extra pressure on UI rebuilding at the runtime!

    • @dhrubrawat9316
      @dhrubrawat9316 3 года назад

      Thank you.

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

      Thank You dhrub rawat! Follow this link: stackoverflow.com/questions/62145722/flutter-use-children-widget-or-children
      I hope you will get your answer 🙂

  • @michaelderobio5256
    @michaelderobio5256 2 года назад

    Do disappointed that this just seems like a trick to get you to go to github to sign you up for a mailing list and even then try to get you to pay for the source code. Dishonest.

  • @abhishekperera-dev
    @abhishekperera-dev Год назад

    Johannes Milke thank youuuu. your videos are aaaawsome and I love your accent ❤❤❤❤❤
    dear viewers:
    If you have any errors in controlsBuilder
    use
    👇👇👇👇
    controlsBuilder: (BuildContext context,ControlsDetails details){
    return Container(
    margin: EdgeInsets.only(top: 50),
    child: Row(
    children: [
    Expanded(child: ElevatedButton(
    child: Text('NEXT'),
    onPressed: details.onStepContinue,
    )),
    SizedBox(width: 12,),
    Expanded(child: ElevatedButton(
    child: Text('CANCEL'),
    onPressed: details.onStepCancel,
    ))
    ],
    ),
    );
    }
    instead :
    {onStepContinue, onStepCancel}
    🤟🤟🤟🤟🤟

    • @HeyFlutter
      @HeyFlutter  Год назад +1

      You’re most welcome, abhishek perera! 🙂