Flutter — показать/скрыть пароль в текстовом поле

Опубликовано: 21 Февраля, 2023

В этой статье мы реализуем , как показать/скрыть пароль в текстовом поле. Пример видео приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье.

Пошаговая реализация

Шаг 1. Создайте новый проект в Android Studio.

Чтобы настроить Flutter Development в Android Studio, обратитесь к разделу «Настройка Android Studio для разработки Flutter», а затем создайте новый проект в Android Studio, пожалуйста, обратитесь к разделу «Создание простого приложения во Flutter».

Шаг 2: Добавьте пакет материала , который дает нам важный метод для использования, и вызовите метод runApp в основной функции, которая будет вызывать наше приложение.

import "package:flutter/material.dart";

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

Шаг 3: Теперь нам нужно создать виджет RunMyApp с сохранением состояния. Поскольку наше приложение меняет свое состояние, а затем возвращает виджет materialApp , который позволяет нам установить заголовок и тему , а также иметь множество других свойств.

class RunMyApp extends StatefulWidget {
 const RunMyApp({super.key});
 @override
 State<RunMyApp> createState() => _RunMyAppState();
}
class _RunMyAppState extends State<RunMyApp> {
  bool passwordVisible=false;   
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     theme: ThemeData(primarySwatch: Colors.green),
     home:
   );
 }
}

Шаг 4: Дайте свойство home , и может появиться виджет скаффолда со свойствами AppBar и body . AppBar имеет свойство title для установки заголовка приложения. Тело содержит контейнер с дочерним элементом TextField. TextField имеет много параметров, таких как оформление, obscureText . Здесь точка obscureText принимает значения true и false. Если это правда, это означает, что пароль виден, иначе нет. Мы можем использовать кнопку значка суффикса, чтобы изменить состояние значения obscureText . Когда мы нажимаем кнопку значка суффикса, вызывается метод setState и изменяется значение переменной passwordVisible . параметр украшения , обычно используемый для настройки текстового поля. Он устанавливает границу, текст подсказки, текст метки, вспомогательный текст, значок суффикса, значок префикса, метод onpressed .

Scaffold(
       appBar: AppBar(title: Text("Show or Hide Password in TextField"),),
       body: Container(
               padding: EdgeInsets.all(20.0),
               child: TextField(
                 obscureText: passwordVisible,
                 decoration: InputDecoration(
                   border: UnderlineInputBorder(),
                   hintText: "Password",
                   labelText: "Password",
                   helperText:"Password must contain special character",
                   helperStyle:TextStyle(color:Colors.green),
                   suffixIcon: IconButton(
                     icon: Icon(passwordVisible
                         ? Icons.visibility
                         : Icons.visibility_off),
                     onPressed: () {
                       setState(
                         () {
                           passwordVisible = !passwordVisible;
                         },
                       );
                     },
                   ),
                   alignLabelWithHint: false,
                   filled: true,
                 ),
                 keyboardType: TextInputType.visiblePassword,
                 textInputAction: TextInputAction.done,
               ),
             ), 
     ),

Окончательный код

Dart

import "package:flutter/material.dart";
  
void main() {
  runApp(RunMyApp());
}
  
class RunMyApp extends StatefulWidget {
  const RunMyApp({super.key});
  
  @override
  State<RunMyApp> createState() => _RunMyAppState();
}
  
class _RunMyAppState extends State<RunMyApp> {
   bool passwordVisible=false;
      
   @override
    void initState(){
      super.initState();
      passwordVisible=true;
    }    
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(title: Text("Show or Hide Password in TextField"),),
        body: Container(
                padding: EdgeInsets.all(20.0),
                child: TextField(
                  obscureText: passwordVisible,
                  decoration: InputDecoration(
                    border: UnderlineInputBorder(),
                    hintText: "Password",
                    labelText: "Password",
                    helperText:"Password must contain special character",
                    helperStyle:TextStyle(color:Colors.green),
                    suffixIcon: IconButton(
                      icon: Icon(passwordVisible
                          ? Icons.visibility
                          : Icons.visibility_off),
                      onPressed: () {
                        setState(
                          () {
                            passwordVisible = !passwordVisible;
                          },
                        );
                      },
                    ),
                    alignLabelWithHint: false,
                    filled: true,
                  ),
                  keyboardType: TextInputType.visiblePassword,
                  textInputAction: TextInputAction.done,
                ),
              ), 
      ),
    );
  }
}

Выходной пользовательский интерфейс

Выход