Flutter Tutorial Day 2

Learning Objective: Let’s Create a Login Screen and on submit button click move to next Screen.

class MyLoginPage extends StatefulWidget {
  const MyLoginPage({super.key, required this.title});

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyLoginPage> createState() => _MyLoginPageState();
}

class _MyLoginPageState extends State<MyLoginPage> {
  String _url = "";

  void _loginvalidate() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      //_counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextFormField(
                decoration: const InputDecoration(
                    border: UnderlineInputBorder(),
                labelText: 'Enter your username',
              ),
            ),
            TextFormField(
              obscureText: true,
              decoration: const InputDecoration(
                labelText: 'Password',
              ),
              
            ),
            TextButton(
              style: ButtonStyle(
                foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
              ),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const MyHomePage(title: "Welcome")),
                );
              },
              child: Text('Submit'),
            )

          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: null,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

My Input TextBox Code

TextFormField(
                decoration: const InputDecoration(
                    border: UnderlineInputBorder(),
                labelText: 'Enter your username',
              ),
            ),

My Password Text Input Code

TextFormField(
              obscureText: true,
              decoration: const InputDecoration(
                labelText: 'Password',
              ),
              
            ),

Button with Button Click (Navigator)

TextButton(
              style: ButtonStyle(
                foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
              ),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const MyHomePage(title: "Welcome")),
                );
              },
              child: Text('Submit'),
            )

Once you become expert, you can follow the steps to make this better login screen using flutter.

1. Create a new Flutter project: Open up Android Studio or Visual Studio Code, and create a new Flutter project using the command palette or the file menu.
2. Create a new file for the login screen: Create a new file in your project called login_screen.dart.
3. Build the UI for the login screen: In the login_screen.dart file, build the UI for the login screen using widgets like Container, TextFormField, FlatButton, etc. You can design your login screen based on your requirements and preferences.
4. Add validation to the login form: In the onPressed function of the FlatButton, add validation to the form fields using FormState and GlobalKey<FormState>. You can use regular expressions to validate the email and password fields, for example.
5. Implement the login functionality: Once the form is validated, you can implement the login functionality using your preferred method of authentication. You can use Firebase Authentication or a custom backend API, for example.
6. Add navigation to the home screen: Once the user is authenticated, you can navigate to the home screen using Navigator.pushReplacement().
7. Test your login screen: Run your app and test the login screen. Make sure that the validation works as expected and that the user can successfully login and navigate to the home screen.