Tkko / Flutter_Pinput

Flutter package to create Pin code input text field with every pixel customization possibility 🎨 with beautiful animations, iOS autofill, Android autofill
https://pub.dev/packages/pinput
MIT License
775 stars 179 forks source link

Using `Wrap` to allow longer pin codes to wrap into another row #165

Open NunoOliveiraP opened 10 months ago

NunoOliveiraP commented 10 months ago

We love Pinput's UI and capabilities for entering typical 4-6 length pin codes. However, when faced with a very large key codes which are typical used for activating product keys or gift codes, it forces every input to stay inside a single row... With a 16-length gift code like we use, plus a few - to separate the code for easier readability, it makes it impossible to achieve a pleasant UI.

After checking the package code for a bit I experimented with switching the Row widget which holds the inputs to a Wrap. It holds the same row-like structure up to the point where it needs to shrink. It is also very customizable, which is good for fitting into various UI layouts.

It worked perfectly for us (as you can see in the screenshots below) and we're wondering if this would be a good addition to the package itself. Perhaps adding a 2nd widget or constructor which uses Wrap instead of Row is preferable, but I think that is up to the package owner to decide. Here are the small changes we did in order to make it work.