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
TextFormFielduntuk 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
GestureDetectoruntuk menangani gesture tap pada pesan selamat datang dan mencetak pesan ke konsol saat pesan di-tap.