This is as simple as it gets (well almost!). A simple login form in Flutter, the UI only.<\/p>\n\n\n\n
We have initial focus, we have two controllers for our fields, and one of them is password so that you can’t see the actual input and then we have a button. Ready to be used!<\/p>\n\n\n
\nimport 'package:flutter\/material.dart';\n\n\/\/ Define a custom Form widget.\nclass LoginForm extends StatefulWidget {\n const LoginForm({Key? key}) : super(key: key);\n\n @override\n _LoginFormState createState() => _LoginFormState();\n}\n\n\/\/ Define a corresponding State class.\n\/\/ This class holds data related to the form.\nclass _LoginFormState extends State<LoginForm> {\n \/\/ Define the focus node. To manage the lifecycle, create the FocusNode in\n \/\/ the initState method, and clean it up in the dispose method.\n late FocusNode myFocusNode;\n final usernameController = TextEditingController();\n final passwordController = TextEditingController();\n\n @override\n void initState() {\n super.initState();\n\n myFocusNode = FocusNode();\n usernameController.addListener(() {\n print("current value! " + usernameController.text);\n });\n passwordController.addListener(() {\n print("current value! " + passwordController.text);\n });\n }\n\n @override\n void dispose() {\n \/\/ Clean up the focus node when the Form is disposed.\n myFocusNode.dispose();\n usernameController.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n final ButtonStyle style =\n ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20));\n\n return Padding(\n padding: const EdgeInsets.all(16.0),\n child: Column(\n children: [\n \/\/ The first text field is focused on as soon as the app starts.\n TextField(\n autofocus: true,\n controller: usernameController,\n decoration: new InputDecoration(hintText: "Email"),\n ),\n \/\/ The second text field is focused on when a user taps the\n \/\/ FloatingActionButton.\n TextField(\n focusNode: myFocusNode,\n decoration: new InputDecoration(hintText: "Password"),\n controller: passwordController,\n obscureText: true,\n enableSuggestions: false,\n autocorrect: false,\n ),\n ElevatedButton(\n style: style,\n onPressed: () {},\n child: const Text('Login'),\n ),\n ],\n ),\n );\n }\n}\n\n<\/pre><\/div>\n\n\nThen we can use it like this anywhere in a Widget: <\/p>\n\n\n
\n Container(\n child: LoginForm()\n ),\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"This is as simple as it gets (well almost!). A simple login form in Flutter, the UI only. We have initial focus, we have two controllers for our fields, and one of them is password so that you can’t see the actual input and then we have a button. Ready to be used! Then we … <\/p>\n