Password Field in Flutter – SwiftUI – Compose

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
            }
        )
    }
}