如何在颤振上使用 switch case 语法

Question

I'm making login and sign up page in my mobile application with flutter. I'm wondering how can I put the right data which is matched with the props.

For example, if I got the 'password' as a textValue, then I want to return the warningText which is 'Password must be at least 7 characters long.', the icon would be Icons.lock, and the hintText would be 'password'.

The textValue can be three options which are 'username', 'password' and 'email'.

• textValue : username

  • warningText : 'Please enter at least 4 characters'
  • icon : Icons.account_circle,
  • hintText : username

• textValue : email

  • warningText : 'Please enter a valid email address.'
  • icon : Icons.email,
  • hintText : email

Also, the reason why I want to use switch case syntax is because I want to make my codes shorter. I could just use multiple of textformfield, but I want to make my codes shorter and make them re-useable.

Because I'm using Provider for state management, I want to put the switch case codes into the Provider.

This is the textformfield widget code.

class LoginSignupTextFormField extends StatelessWidget {
  const LoginSignupTextFormField({Key? key,
    required this.valueKeyNumb,
    required this.textValue})
  : super(key: key);

  final int valueKeyNumb;
  final String textValue;
  @override
  Widget build(BuildContext context) {
    return TextFormField(
      obscureText: textValue == 'password' ? true : false,
      key: const ValueKey(3),
      validator: (value) {
        if (value!.isEmpty || value.length < 6) {
          return 'Password must be at least 7 characters long.';
        }
        return null;
      },
      onSaved: (value) {
        context.watch<LoginSignupData>().userPassword = value!;
      },
      onChanged: (value) {
        context.watch<LoginSignupData>().userPassword = value;
      },
      decoration: const InputDecoration(
          prefixIcon: Icon(
            Icons.lock,
            color: Colors.red,
          ),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
                color: Colors.blueGrey),
            borderRadius: BorderRadius.all(
              Radius.circular(35.0),
            ),
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(
                color: Colors.black),
            borderRadius: BorderRadius.all(
              Radius.circular(35.0),
            ),
          ),
          hintText: 'password',
          hintStyle: TextStyle(
              fontSize: 14,
              color: Colors.red),
          contentPadding: EdgeInsets.all(10)),
    );
  }
}

This is my Provider code for the textformfield and I want to put the switch case codes in it.

class LoginSignupData extends ChangeNotifier{
  final authentication = FirebaseAuth.instance;

  bool isSignup = true;
  final formKey = GlobalKey<FormState>();
  String userName = '';
  String userEmail = '';
  String userPassword = '';

  changeBool(status){
    isSignup = status;
    notifyListeners();
  }

  tryValidation() {
    final isValid = formKey.currentState!.validate();
    if (isValid) {
      formKey.currentState!.save();
      notifyListeners();
    }
  }
}

Answer 1

You may have to take three separate textfield for that and assign values to each.

If you want to make common textfield for all then you can take enum with three values and you have to pass that in constructor.

enum TextFieldType {EMAIL, PASSWORD, USERNAME};

Now you can check the value inside the validator and according to that you can show the error.

switch (enumValue) { // Your Enum Value which you have passed
  case TextFieldType.PASSWORD:
    //Your validations for password
    break;
  case TextFieldType.EMAIL:
    //Your validations for email
    break;
  case TextFieldType.USERNAME:
    //Your validations for username
    break;
}

Hope it will help you.