Flutter - 如何根據驗證結果更改 TextFormField 填充顏色

Question

我想根據驗證結果更改TextFormField fillColor 。 與以下相同：

Answer 1

使用根據驗證結果更改的全局布爾變量

bool correct = null
.
.
.
TextFormField(
fillColor: correct ? Colors.green : correct! ? Colors.red : Colors.white //extra check for null if no value yet
validate:(value) {
     if (value){
        correct = true
     }
     else {
      correct = false
       }
}
)

Answer 2

您可以直接使用此代碼

import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  final formKey = GlobalKey<FormState>();
  String text = '';
  bool validate = false;
  Color green = Colors.green.shade50;
  Color red = Colors.red.shade50;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: formKey,
        child: Padding(
          padding: const EdgeInsets.symmetric(
            horizontal: 20,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextFormField(
                keyboardType: TextInputType.emailAddress,
                textInputAction: TextInputAction.next,
                autovalidateMode: AutovalidateMode.onUserInteraction,
                validator: (value) {
                  validate = false;
                  if (value.toString().isEmpty ||
                      !value.toString().contains('@')) {
                    return 'Enter valid Email';
                  } else {
                    validate = true;
                  }
                },
                decoration: InputDecoration(
                  hintText: 'Email',
                  filled: true,
                  fillColor: validate ? green : red,
                  prefixIcon: Icon(
                    Icons.alternate_email_outlined,
                    color: validate ? Colors.green : Colors.red,
                  ),
                  suffixIcon: validate
                      ? const Icon(
                          Icons.check_outlined,
                          color: Colors.green,
                        )
                      : const Icon(
                          Icons.close_outlined,
                          color: Colors.red,
                        ),
                  errorBorder: borderStyleFalse,
                  enabledBorder: validate ? borderStyleTrue : borderStyleFalse,
                  focusedBorder: validate ? borderStyleTrue : borderStyleFalse,
                  focusedErrorBorder: borderStyleFalse,
                ),
                onChanged: (value) {
                  setState(() {
                    text = value;
                  });
                },
              ),
              ElevatedButton(
                onPressed: () {
                  formKey.currentState!.validate();
                },
                child: const Text('call'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  OutlineInputBorder borderStyleTrue = OutlineInputBorder(
    borderRadius: BorderRadius.circular(10),
    borderSide: const BorderSide(color: Colors.green),
  );
  OutlineInputBorder borderStyleFalse = OutlineInputBorder(
    borderRadius: BorderRadius.circular(10),
    borderSide: const BorderSide(color: Colors.red),
  );
}

這就是結果

當您打開屏幕時，請在此處輸入圖像描述

當您寫錯信息時，請在此處輸入圖像描述

當您寫電子郵件時，請在此處輸入圖像描述