Flutter:
import 'package:flutter/material.dart';
class LoginScreen extends StatefulWidget {
const LoginScreen({Key? key}) : super(key: key);
@override
State<LoginScreen> createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
final TextEditingController _emailController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _emailController,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: "Email",
hintText: "please input your email.",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8)
)
),
onChanged: (value) {
debugPrint(value);
},
),
const SizedBox(height: 8,),
TextField(
controller: _passwordController,
keyboardType: TextInputType.visiblePassword,
obscureText: true,
decoration: InputDecoration(
labelText: "Password",
hintText: "please input your password.",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8)
)
),
onChanged: (value) {
debugPrint(value);
},
)
],
),
);
}
}
SwiftUI:
import SwiftUI
struct LoginView: View {
@State var email = ""
@State var password = ""
var body: some View {
VStack {
TextField("Email", text: $email)
.keyboardType(.emailAddress)
.padding(16)
.background(Color(.secondarySystemBackground))
.cornerRadius(8)
.padding(8)
SecureField("Password", text: $password)
.padding(16)
.background(Color(.secondarySystemBackground))
.cornerRadius(8)
.padding(8)
}
}
}
struct LoginView_Previews: PreviewProvider {
static var previews: some View {
LoginView()
}
}
Compose:
@Composable
fun Login() {
val email = remember {
mutableStateOf<String>("")
}
val password = remember {
mutableStateOf<String>("")
}
val showPassword = remember {
mutableStateOf<Boolean>(false)
}
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxSize()
) {
OutlinedTextField(
value = email.value,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Email
),
onValueChange = {
print(it)
email.value = it
}
)
Spacer(modifier = Modifier.height(8.dp))
OutlinedTextField(
value = password.value,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Password
),
visualTransformation = if (showPassword.value) VisualTransformation.None else PasswordVisualTransformation(),
onValueChange = {
print(it)
password.value = it
}
)
}
}