Flutter-Format TextField password

Định dạng ô nhập password sao cho đẹp và tiện dụng

Bước 1: Khai báo state để kiểm tra trạng thái ẩn hiện password

Phần khai báo này nên khai báo ở đầu widget

  bool _isObscure = true;

Bước 2: Thiết lập cho TextField để nhận vai trò ô nhập password

Trong đó:

– suffixIcon: Hiển thị biểu tượng hình mắt ẩn hiện

– Trong code dưới có phần setState() là hàm để thay đổi trạng thái ẩn hiện Password cho ô text.

TextField(
              obscureText: _isObscure,
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password',
              suffixIcon: IconButton(
                    // Thay đổi trạng thái của obscureText khi nhấn vào nút toggle
                    onPressed: () {
                      setState(() {
                        _isObscure = !_isObscure;
                      });
                    },
                    // Hiển thị icon mắt khi mật khẩu được ẩn và icon mắt nhắm khi mật khẩu được hiển thị
                    icon: Icon(
                      _isObscure ? Icons.visibility : Icons.visibility_off,
                    ),
                  ),
              )
              
            ),

Bước 3: Định dạng màu sắc và khung viền

Phần này nếu định dạng chung cho tất cả TextField ứng dụng thì bạn đặt code dưới vào file main.dart ở trong phần themeData.

Nếu bạn muốn định dạng riêng cho một TextField thì viết ở bên trong thuộc tính decoration

inputDecorationTheme: const InputDecorationTheme(
          labelStyle: TextStyle(
              color: Colors.blue,
              fontSize: 12), // điều chỉnh màu sắc và kích thước font cho label
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
                color: Colors.blue,
                width: 1.0), // điều chỉnh màu sắc và chiều rộng viền TextField
          ),
          focusColor: Colors.green, // màu sắc khi TextField được focus
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(
                color: Colors.blue,
                width: 1.0), // điều chỉnh màu sắc và chiều rộng viền TextField
          ),
          errorBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                      color:  Color.fromARGB(255, 247, 189, 189),
                      width: 1.0), // điều chỉnh màu sắc và chiều rộng viền TextField
                ),
                focusedErrorBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                      color: Color.fromARGB(255, 247, 189, 189),
                      width: 1.0), // điều chỉnh màu sắc và chiều rộng viền TextField
                ),
          fillColor: Color.fromARGB(0, 208, 230, 251), // màu nền của TextField
          filled: true, // cho phép điền màu cho TextField
          contentPadding: EdgeInsets.symmetric(vertical: 5, horizontal: 5), // Giảm padding trong TextField
          
        ),