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

Поділитися
Вставка
  • Опубліковано 5 жов 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: ua-cam.com/video/2rn3XbBijy4/v-deo.html
    Create & Validate Forms With AutoComplete Tutorial: ua-cam.com/video/FxO_zeCsdFg/v-deo.html
    Change App Icon & App Name Tutorial: ua-cam.com/video/eMHbgIgJyUQ/v-deo.html
    Create Home Screen App Shortcuts Tutorial: ua-cam.com/video/sqw-taR2_Ww/v-deo.html
    WebView App Tutorial: ua-cam.com/video/LyAwnwvbBKM/v-deo.html
    Amazing Lottie Animations Tutorial: ua-cam.com/video/kyPizhfn8k8/v-deo.html
    Image Picker From Gallery & Camera Tutorial: ua-cam.com/video/MSv38jO4EJk/v-deo.html
    User Profile Page Tutorial: ua-cam.com/video/gSl-MoykYYk/v-deo.html
    Crop & Save Image Tutorial: ua-cam.com/video/pXbBTJt7frM/v-deo.html
    Upload File To Firebase Storage Tutorial: ua-cam.com/video/dmZ9Tg9k13U/v-deo.html
    Share Texts, Images, Files Tutorial: ua-cam.com/video/-PmUFbbA-Fs/v-deo.html
    Image Slider Tutorial: ua-cam.com/video/JEMx2ax0734/v-deo.html
    Take Screenshots Of Screen Tutorial: ua-cam.com/video/rABnaF-Xk3E/v-deo.html
    Download File From Firebase Storage Tutorial: ua-cam.com/video/YA_fHCF_EYc/v-deo.html
    Settings Page UI Tutorial: ua-cam.com/video/pYQAhrY_SQA/v-deo.html
    SVG Images Tutorial: ua-cam.com/video/E3xVcQ0TAHg/v-deo.html
    Set Screen Background Image Tutorial: ua-cam.com/video/sDS4c1C-Fdg/v-deo.html
    Cached Network Image Tutorial: ua-cam.com/video/6wvD-Z-9ZRM/v-deo.html
    Compress Video Tutorial: ua-cam.com/video/JUeWeZXn71M/v-deo.html
    Video Player Tutorial: ua-cam.com/video/uz4xRnE-UIw/v-deo.html
    Drop Files Into Dropzone Tutorial: ua-cam.com/video/pZdJX3PAydQ/v-deo.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.

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

  • @dicksonguinajnr1449
    @dicksonguinajnr1449 3 роки тому +1

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

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

  • @lme4339
    @lme4339 3 роки тому

    Ich bin mittlerweile ein echter Fan deines Kanals.

  • @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..

  • @douglasperez3701
    @douglasperez3701 3 роки тому

    Great video! Greatings from Peru.

  • @chuongnguyenhoai1606
    @chuongnguyenhoai1606 2 роки тому

    you are the Hero in Flutter

  • @LuminousAsianBeauties
    @LuminousAsianBeauties 3 роки тому +1

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

  • @jeffreysegovia7656
    @jeffreysegovia7656 2 роки тому

    Woaahh. Superb presentation! Thank you!

  • @TechWithSabri
    @TechWithSabri 3 роки тому

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

  • @ariuntsetsegmunhtulga3732
    @ariuntsetsegmunhtulga3732 2 роки тому

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

  • @lucasformigon4573
    @lucasformigon4573 2 роки тому

    Hey, brother! Amazing class! Thanks for shared

  • @robertomejia3124
    @robertomejia3124 3 роки тому

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

  • @goldenlife6166
    @goldenlife6166 3 роки тому

    Great work johannes

  • @AiEnthusiast999
    @AiEnthusiast999 3 роки тому

    just in time for my app, thank you

  • @이제영-n5b
    @이제영-n5b 3 роки тому

    Absoutly u r genius sir thanku.

  • @DevProjectsJohannes
    @DevProjectsJohannes Місяць тому

    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  Місяць тому

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

  • @placidemuhemedi1492
    @placidemuhemedi1492 2 роки тому

    Thanks big brother 🙏🏻🙏🏻

  • @dranzgaming1341
    @dranzgaming1341 Рік тому

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

    • @HeyFlutter
      @HeyFlutter  Рік тому

      Glad to hear that, Thank you DranzGaming! 😊

  • @zekotch
    @zekotch 3 роки тому

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

    • @zekotch
      @zekotch 2 роки тому

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

  • @eNONO-ot4zh
    @eNONO-ot4zh 3 роки тому

    You are genius. Thank you 👍

  • @ImranHossain-qs6tm
    @ImranHossain-qs6tm Рік тому

    Awesome Tutorial.. Thank u so much

    • @HeyFlutter
      @HeyFlutter  Рік тому

      You’re most welcome, Imran Hossain! 🙂

  • @zawadalam2774
    @zawadalam2774 3 роки тому

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

  • @haiderjaafer8164
    @haiderjaafer8164 3 роки тому

    Great lesson keep going forward…

  • @bayanhoms8532
    @bayanhoms8532 3 роки тому

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

  • @prayandcode
    @prayandcode 3 роки тому

    Great video as usual. 👍🏽

  • @jean-baptistenzudie2770
    @jean-baptistenzudie2770 3 роки тому

    amazing content, thank you sir

  • @officialismailshah
    @officialismailshah 3 роки тому

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

  • @claudedaiga5897
    @claudedaiga5897 2 роки тому +1

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

    • @claudedaiga5897
      @claudedaiga5897 2 роки тому

      @@HeyFlutter Thank you very much.

    • @HeyFlutter
      @HeyFlutter  2 роки тому

      Thanks, Claude Daiga! 🙂 Learn more about validation here: ua-cam.com/video/FxO_zeCsdFg/v-deo.html

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

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

  • @officialismailshah
    @officialismailshah 3 роки тому

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

  • @ranjantechnocrat
    @ranjantechnocrat Місяць тому

    Awesome buddy

    • @HeyFlutter
      @HeyFlutter  Місяць тому +1

      Glad you liked it, @ranjantechnocrat 😀

  • @aniketkanade1064
    @aniketkanade1064 2 роки тому

    tnx bro i like it ur all videos

    • @HeyFlutter
      @HeyFlutter  2 роки тому

      Thanks for your feedback, Aniket Kanade! 🙂

  • @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 : ua-cam.com/video/8ME8Czqc-Oc/v-deo.html&ab_channel=JohannesMilke

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

  • @menoubiacorentin5690
    @menoubiacorentin5690 2 роки тому

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

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

  • @wasss3745
    @wasss3745 2 роки тому

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

  • @davidkanai6944
    @davidkanai6944 3 роки тому

    fantastic

  • @farhanashari5149
    @farhanashari5149 Рік тому

    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  Рік тому +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 Рік тому

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

  • @davidefalcone2468
    @davidefalcone2468 2 роки тому

    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 🙂

  • @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 🙂

  • @dhrubrawat9316
    @dhrubrawat9316 3 роки тому

    Flutter 2.5 released?

  • @robertomejia3124
    @robertomejia3124 2 роки тому

    Can I validate fields ??

  • @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 🙂

  • @stefuneditz8570
    @stefuneditz8570 2 роки тому +1

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

  • @fadihaddad7067
    @fadihaddad7067 2 роки тому

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

  • @dimajoyti
    @dimajoyti 2 роки тому

    Awesome

  • @mohamedzakariagridi1059
    @mohamedzakariagridi1059 2 роки тому

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

  • @padminilakshmanan1638
    @padminilakshmanan1638 Рік тому

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

    • @HeyFlutter
      @HeyFlutter  Рік тому

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

  • @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 🙂

  • @alexcosta9185
    @alexcosta9185 2 роки тому

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

  • @sandeepkarne9256
    @sandeepkarne9256 2 роки тому

    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 🙂

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

  • @ezz_dev
    @ezz_dev 2 роки тому

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

  • @deepjyotibaishya7618
    @deepjyotibaishya7618 Рік тому

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

    • @HeyFlutter
      @HeyFlutter  Рік тому

      Hey, Deepjyoti Baishya 🙂 stepper is auto scrollable

    • @deepjyotibaishya7618
      @deepjyotibaishya7618 Рік тому

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

  • @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 🙂

  • @mergesthomas2552
    @mergesthomas2552 Рік тому

    you deserve the 14$

    • @HeyFlutter
      @HeyFlutter  Рік тому

      Great, Thank you Merges Thomas!

  • @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! 🙂