Mostrar/ocultar senha usando Riverpod no Flutter

Este artigo explorará Mostrar/ocultar senha usando Riverpod no Flutter. Implementaremos um programa de demonstração e gostaria de mostrar como mostrar/ocultar senha em TextFormField usando o gerenciamento de estado Riverpod em seus aplicativos flutter.

Introdução:

Este vídeo de demonstração mostra como mostrar/ocultar senhas em textformfield no flutter e como mostrar/ocultar senha funcionará usando o pacote hooks_riverpod em seus aplicativos flutter. Mostraremos/ocultar a senha de um usuário em um textformfield usando riverpod e também usaremos will quando clicarmos fora do teclado TextFormField para fechar. Ele será mostrado no seu dispositivo.

Implementação

Etapa 1: adicione as dependências

Adicione dependências ao arquivo pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  hooks_riverpod: ^2.4.4

Etapa 2: adicione os ativos

Adicione ativos ao arquivo pubspec.yaml.

assets:
  - assets/

Etapa 3: importar

import 'package:hooks_riverpod/hooks_riverpod.dart';

Etapa 4: execute os pacotes flutter no diretório raiz do seu aplicativo.

Como implementar o código no arquivo dart

Você precisa implementá-lo em seu código, respectivamente:

Crie um novo arquivo dart chamado main.dart dentro da pasta lib.

Devemos ajustar nosso main. arquivo dardo. Queremos adicionar ProviderScope à raiz do nosso aplicativo que armazena o estado dos Provedores.

void main() {
  runApp(const ProviderScope(
    child: MyApp(),
  ));
}

Então, precisamos mudar StatelessWidget para ConsumerWidget. Feito isso, devemos adicionar WidgetRef dentro da compilação.

class MyApp extends ConsumerWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Splash(),
    );
  }
}

Agora é hora de criar nosso StateProvider.

final showPassProvider = StateProvider<bool>((ref) => true);

Agora criaremos uma nova classe HomeScreen com ConsumerWidget estendido. Retornaremos o widget GestureDetector. Neste widget, adicionaremos um widget Coluna. E anúncio dois textformfield.

class HomeScreen extends ConsumerWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final bool showPassState = ref.watch(showPassProvider);
    return GestureDetector(
      onTap: FocusManager.instance.primaryFocus?.unfocus,
      child: Scaffold(
        appBar: AppBar(
          title: const Text(
            "Flutter Mostrar/Ocultar Senha Demo Riverpod",
            style: TextStyle(fontSize: 18,color: Colors.white),
          ),
          backgroundColor: Colors.blue.shade700.withOpacity(.4),
          automaticallyImplyLeading: false,
          centerTitle: true,
        ),
        body: Column(
          children: [
            const Padding(
              padding: EdgeInsets.all(4.0),
            ),
            Image.asset("assets/devs.jpg",height: 130,width: 160,),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextFormField(
                decoration: const InputDecoration(
                  prefixIcon: Icon(Icons.person),
                  labelText: "Login",
                  hintText: "Diginte seu Login",
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(20),
                    ),
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextFormField(
                obscureText: showPassState,
                decoration: InputDecoration(
                  suffixIcon: IconButton(
                    icon: showPassState
                        ? const Icon(Icons.visibility_off)
                        : const Icon(Icons.visibility),
                    onPressed: () => ref
                        .read(showPassProvider.notifier)
                        .update((state) => !state),
                  ),
                  prefixIcon: const Icon(Icons.lock),
                  labelText: "Senha",
                  hintText: "Digite sua senha",
                  border: const OutlineInputBorder(
                    borderRadius: BorderRadius.all(
                      Radius.circular(20),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Já que obscuroText é verdadeiro no começo. Definiremos showPassState em obscuroText.

TextFormField(
  // ocultar a senha. quando é verdade.
  obscureText: showPassState,
...

Então, nesse ponto, devemos atualizar nosso estado para clique no símbolo. Para fazer isso, envolvemos IconButton em nosso sufixoIcon. É isso que devemos fazer, devemos ler e depois chamar a função de atualização no notificador, e precisamos alterar nosso ícone em relação ao nosso estado.

IconButton(
           icon: showPassState
            ? const Icon(Icons.visibility_off)
            : const Icon(Icons.visibility),
             onPressed: () => ref
            .read(showPassProvider.notifier)
            .update((state) => !state),
          ),

Quando executamos o aplicativo, devemos obter a saída da tela como a captura de tela abaixo.

Código está no meu GitHub (git)

Conclusão

Usar o riverpod para gerenciar o estado do aplicativo torna a obscureço, uma ação muito simples.

Você pode usar em diversos locais a mesma técnica.