将“多个”有状态和无状态小部件存储在一个 dart 文件中。 没事吧？

Question

I'm slightly new to Flutter and just want to ask some questions/clarifications regarding the development using it. I am currently building a flutter app and wanted to change the layout based on different devices and orientations. I created 2 different dart files containing different app layouts of my Login page ( LoginMobile.dart and LoginTablet.dart respectively). I created also a separate dart file (LoginComponents.dart) to store "all" the object UI/components of my login form (txtEmail, txtPassword, btnLogin, etc.). I heard doing like Widget txtEmail() {return TextformField(...);} is not advisable as it can affect the app performance, so I tried making them as classes. Am I doing it right? Is it okay to store multiple stateful widgets in one dart file(?) since the txtPassword have a setState() for show/reveal password and the btnLogin for the authentication process. Is there any negative effects that I may face in the long run if I continue doing it this way? Any tips and advise were highly appreciated. Thanks!

Answer 1

Storing your widgets in a single file is okay but would cause confusion when making a large app. when the amount of widgets is getting increased in that file it would be harder to do a small change because its harder to find the widget.

i would recommend using multiple files, so you can find them and organize them easily.

Answer 2

Yes, you can. But point comes to maintainability. I prefer to keep one public widget which having the same name as the filename and remaining private widgets.

So now ques is How many widgets in a single file?

Its actually depend there is no such rule to restrict the limit of file. Different authors having different preference. I prefer try to keep 5-6 classes(widgets) and each one having 5-6 functions.

• Try to make a file single responsible ie(5-6 classes together responsible for single functionality). Don't make god class which having unrelated concerns together later it will pains(haha)

• If it's a common widget keep them separate to respect DRY principle(Don't repeat yourself)

• If the widget is further divided into 3-4 widgets or it children widget change depend upon rest response keep seprate for good practise

• Bonus Tip: try using code folding shortcuts to push a little more