1

Estou com um plugin para selecionar o código do país e um TextFormField para digitar o email/celular. Tenho uma variável para exibir ou não esse CountryCode.

O problema é que ao digitar um número no TextFormField o _isNumber muda para true o CountryCode aparece, o TextFormField continua com o foco, mas o teclado some. Como faço para o foco fica no email/celular e o teclado ativado?

import 'package:country_code_picker/country_code_picker.dart';
import 'package:ebonus_app/controllers/auth_controller.dart';
import 'package:ebonus_app/utils/app_routes.dart';
import 'package:flutter/material.dart';

class LoginView extends StatefulWidget {
  @override
  _LoginViewState createState() => _LoginViewState();
}

class _LoginViewState extends State<LoginView> {
  final _formKey = GlobalKey<FormState>();
  final _identifierController = TextEditingController();
  final _passwordController = TextEditingController();
  bool _isNumber = false;
  CountryCode _countryCode;
  bool _isLoading = false;
  FocusNode _focusNodeEmailPhone;
  FocusNode _focusNodePassword;

  final _authController = AuthController();

  @override
  void initState() {
    super.initState();
    _identifierController.addListener(_onChangeTextInput);
    _focusNodeEmailPhone = FocusNode();
    _focusNodePassword = FocusNode();
  }

  @override
  void dispose() {
    _focusNodeEmailPhone.dispose();
    _focusNodePassword.dispose();
    _identifierController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  void _onChangeTextInput() {
    setState(() {
      _isNumber = isNumeric(_identifierController.text);
    });
  }

  bool isNumeric(String string) {
    return double.tryParse(string) != null;
  }

  void changeCountryCode(CountryCode code) {
    _countryCode = code;
  }

  void _submit() async {
    if (!_formKey.currentState.validate()) {
      return;
    }

    setState(() {
      _isLoading = true;
    });

    String countryCode = _countryCode.toString();
    countryCode = countryCode.substring(1);
    String identification = _isNumber ? countryCode + '-' + _identifierController.text : _identifierController.text;
    String password = _passwordController.text;

    try {
      await _authController.login(identification, password);

      Navigator.pushReplacementNamed(context, AppRoutes.HOME);
    } catch (error) {
      print(error);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Column(
                children: [
                  Image.asset(
                    'assets/images/logo.png',
                    width: 300,
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(
                      vertical: 20,
                    ),
                    child: Text(
                      'Acesse sua conta eBonus',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 20,
                      ),
                    ),
                  ),
                ],
              ),
              Container(
                margin: EdgeInsets.fromLTRB(30, 20, 30, 20),
                child: Card(
                  elevation: 8.0,
                  child: Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: Form(
                      key: _formKey,
                      child: Column(
                        children: <Widget>[
                          Row(
                            children: [
                              if (_isNumber)
                                Expanded(
                                  flex: 1,
                                  child: CountryCodePicker(
                                    onChanged: changeCountryCode,
                                    initialSelection: 'BR',
                                    favorite: ['+55', 'BR'],
                                    countryFilter: ['BR', 'US'],
                                    flagWidth: 25,
                                    alignLeft: true,
                                    onInit: (code) => changeCountryCode(code),
                                  ),
                                ),
                              Expanded(
                                flex: _isNumber ? 2 : 1,
                                child: TextFormField(
                                  focusNode: _focusNodeEmailPhone,
                                  textInputAction: TextInputAction.next,
                                  decoration: InputDecoration(
                                    icon: _isNumber ? null : Icon(Icons.login),
                                    labelText: 'Digite seu celular ou email *',
                                  ),
                                  keyboardType: TextInputType.text,
                                  controller: _identifierController,
                                  validator: (value) {
                                    if (value.isEmpty) {
                                      return 'Campo obrigatório';
                                    }
                                    return null;
                                  },
                                ),
                              ),
                            ],
                          ),
                          TextFormField(
                            focusNode: _focusNodePassword,
                            textInputAction: TextInputAction.done,
                            decoration: const InputDecoration(
                              icon: Icon(Icons.vpn_key),
                              labelText: 'Senha *',
                            ),
                            keyboardType: TextInputType.text,
                            controller: _passwordController,
                            obscureText: true,
                            validator: (value) {
                              if (value.isEmpty) {
                                return 'Campo obrigatório';
                              }
                              return null;
                            },
                          ),
                          SizedBox(height: 30),
                          _isLoading
                              ? CircularProgressIndicator()
                              : Container(
                                  width: double.infinity,
                                  child: RaisedButton(
                                    onPressed: _submit,
                                    color: Colors.blue,
                                    textColor: Colors.white,
                                    padding: EdgeInsets.symmetric(
                                      vertical: 12,
                                    ),
                                    child: Text('Acessar minha conta'.toUpperCase(),
                                        style: TextStyle(
                                          fontSize: 15,
                                        )),
                                  ),
                                ),
                          SizedBox(height: 10),
                          FlatButton(
                            onPressed: () {
                              Navigator.of(context).pushReplacementNamed(AppRoutes.REGISTER_CUSTOMER);
                            },
                            child: Text(
                              "Não possui uma conta? Crie aqui",
                              style: TextStyle(
                                color: Colors.blue,
                              ),
                            ),
                          ),
                          FlatButton(
                            onPressed: () {},
                            child: Text(
                              "Esqueci minha senha",
                              style: TextStyle(
                                color: Colors.blue,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
} 

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Observação: Ao separar o CountryCode e o TextFormField em duas Rows o problema não ocorre, mas quebra o layout que deveria ter.

Column(
                        children: <Widget>[
                          Row(
                            children: [
                              if (_isNumber)
                                Expanded(
                                  flex: 1,
                                  child: CountryCodePicker(
                                    onChanged: changeCountryCode,
                                    initialSelection: 'BR',
                                    favorite: ['+55', 'BR'],
                                    countryFilter: ['BR', 'US'],
                                    flagWidth: 25,
                                    alignLeft: true,
                                    onInit: (code) => changeCountryCode(code),
                                  ),
                                ),
                            ],
                          ),
                          Row(
                            children: [
                              Expanded(
                                flex: _isNumber ? 2 : 1,
                                child: TextFormField(
                                  focusNode: _focusNodeEmailPhone,
                                  textInputAction: TextInputAction.next,
                                  decoration: InputDecoration(
                                    icon: _isNumber ? null : Icon(Icons.login),
                                    labelText: 'Digite seu celular ou email *',
                                  ),
                                  keyboardType: TextInputType.text,
                                  controller: _identifierController,
                                  validator: (value) {
                                    if (value.isEmpty) {
                                      return 'Campo obrigatório';
                                    }
                                    return null;
                                  },
                                ),
                              ),
                            ],
                          ),

1 Resposta 1

3
+100

Eu não consegui reproduzir com exatidão o seu problema, mas consegui chegar em algo próximo e pode ser que te ajude...

Na sua Row que possuí o problema, faça a seguinte modificação:

  Row(
    children: [
      (_isNumber)   // <----
        ? Expanded( // <----
          flex: 1,
          child: CountryCodePicker(
            onChanged: changeCountryCode,
            initialSelection: 'BR',
            favorite: ['+55', 'BR'],
            countryFilter: ['BR', 'US'],
            flagWidth: 25,
            alignLeft: true,
            onInit: (code) => changeCountryCode(code),
          ),
        )
       : Container(), // <----
      Expanded(
        flex: _isNumber ? 2 : 1,
        child: TextFormField(
          focusNode: _focusNodeEmailPhone,
          textInputAction: TextInputAction.next,
          decoration: InputDecoration(
            icon: _isNumber ? null : Icon(Icons.login),
            labelText: 'Digite seu celular ou email *',
          ),
          keyboardType: TextInputType.text,
          controller: _identifierController,
          validator: (value) {
            if (value.isEmpty) {
              return 'Campo obrigatório';
            }
            return null;
          },
        ),
      ),
    ],
  ),

Dessa vez vou ficar devendo uma explicação descente... Mas vou tentar esclarecer o que entendi...

Pelo que vi e entendi, a forma como você havia feito, a sua Row possuía apenas um Widget no início, isso devido a validação _isNumber. Então ao digitar um número e a validação dar certo, um novo Widget era adicionado nessa Row causando um conflito de Index e Focus (Acredito eu); Com a minha resposta, você sempre terá 2 Widgets em sua Row, fazendo com que a validação apenas atualize um deles, sem estar modificando a posição dos mesmos dentro da Row.

2
  • Sua solução deu certo. Sabe me explicar porque a forma que fiz estava errada?
    – Marcelo
    Commented 11/01/2021 às 12:49
  • 1
    @Marcelo Implementei minha resposta. Commented 11/01/2021 às 13:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .