Jawaban: 5-interaksi-dan-input

Komandro Team
1 September 2025
15 minutes

Jawaban

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginScreen(),
    );
  }
}

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final _formKey = GlobalKey<FormState>();
  String _username = '';
  String _password = '';

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => HomeScreen(username: _username),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login Screen'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: 'Username'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your username';
                  }
                  return null;
                },
                onSaved: (value) {
                  _username = value!;
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your password';
                  }
                  if (value.length < 6) {
                    return 'Password must be at least 6 characters';
                  }
                  return null;
                },
                onSaved: (value) {
                  _password = value!;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submitForm,
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final String username;

  HomeScreen({required this.username});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            print('Welcome message tapped');
          },
          child: Text(
            'Welcome, $username!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Penjelasan:

  • LoginScreen: Stateful widget yang mengelola form login dengan TextFormField untuk username dan password. Validator memastikan input tidak kosong dan password memiliki minimal 6 karakter.

  • _LoginScreenState: Mengandung logika untuk validasi dan penyimpanan input menggunakan setState. Jika validasi berhasil, pengguna dinavigasikan ke HomeScreen.

  • HomeScreen: Stateless widget yang menerima username melalui constructor dan menampilkan pesan selamat datang. Menggunakan GestureDetector untuk menangani gesture tap pada pesan selamat datang dan mencetak pesan ke konsol saat pesan di-tap.

Tags

flutter answer mobile