在 TextField 中输入文本时如何更改 ElevatedButton 的颜色

Question

我有 TextFild 和 ElevatedButton，默认情况下 TextFild 为空，ElevatedButton 设置了一种颜色，当输入一些文本时，我想将 ElevatedButton 的颜色更改为另一种颜色。 我试图为此编写一个条件，其中变量会根据 state 而改变，但 MaterialStateProperty 不适用于 Color，并声明它为 Final 我无法更改它。 如何声明一个变量以使用 MaterialStateProperty？

final _textController = TextEditingController();
void _login (){
final worldColor = _textController.text;
if (worldColor == null){
} else {
 setState(() { 
 });
}
}

  @override
  Widget build(BuildContext context) {
    final colorButton =   MaterialStateProperty.all (Color.fromARGB(255, 157, 186, 219));
    final decorationRow = const InputDecoration(border: OutlineInputBorder(), contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 10), isCollapsed: true, hintText: "Email",filled: true, fillColor: Color.fromARGB(255, 236, 236, 236), hintStyle: TextStyle(fontSize: 15, color: Color.fromARGB(255, 145, 144, 144)), );
    final richBotton = const  TextStyle(color: Color.fromARGB(255, 117, 117, 117), fontSize: 11,);  // textAlign: TextAlign.center; 
    final text = const TextStyle(color: Colors.grey, fontSize: 11); 
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 15),
      child: Column(
      children: [
        TextField(controller: _textController,decoration: decorationRow,),
        SizedBox(height: 15),
        ElevatedButton(
          onPressed: () {
            setState(() {
              colorButton = MaterialStateProperty.all (Color.fromARGB(255, 157, 186, 219));
        });
      },
            style: ButtonStyle(backgroundColor: colorButton, minimumSize: MaterialStateProperty.all (Size.fromHeight(1)), 
            foregroundColor: MaterialStateProperty.all (Colors.white),          
          textStyle: MaterialStateProperty.all (
          TextStyle(
            fontSize: 16, fontWeight: FontWeight.w500)),
            padding: MaterialStateProperty.all (EdgeInsets.symmetric(horizontal: 10, vertical: 10))),           
            child: Text ('Next')),

这是没有文字的样子

这就是我希望它在输入文本时的样子

Answer 1

好的，从示例中我为您创建了一个示例：

基本上使用

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Test App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _textController = TextEditingController();
  final _formKey = GlobalKey<FormState>();
  // Color red is button is disabled and green is enabled. you can change as per you requirement.
  final successColor = MaterialStateProperty.all(Colors.green);
  final errorColor = MaterialStateProperty.all(Colors.red);

  final decorationRow = const InputDecoration(
    border: OutlineInputBorder(),
    contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
    isCollapsed: true,
    hintText: "Email",
    filled: true,
    fillColor: Color.fromARGB(255, 236, 236, 236),
    hintStyle: TextStyle(fontSize: 15, color: Color.fromARGB(255, 145, 144, 144)),
  );
  final richBotton = const TextStyle(
    color: Color.fromARGB(255, 117, 117, 117),
    fontSize: 11,
  ); // textAlign: TextAlign.center;
  final text = const TextStyle(color: Colors.grey, fontSize: 11);
  bool isValid = false;
  @override
  void initState() {
    super.initState();
    _textController.addListener(() {
      if (_textController.text.isEmpty) {
        setState(() {
          isValid = false;
        });
      } else {
        setState(() {
          isValid = true;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('sample'),
      ),
      body: Form(
        key: _formKey,
        autovalidateMode: AutovalidateMode.onUserInteraction,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              TextFormField(
                controller: _textController,
                decoration: decorationRow,
                validator: (value) {
                  if (value!.isEmpty) {
                    return "please enter some data";
                  } else {
                    return null;
                  }
                },
              ),
              SizedBox(height: 15),
              ElevatedButton(
                  onPressed: !isValid
                      ? null
                      : () {
                          // go  further.
                        },
                  style: ButtonStyle(
                      backgroundColor: isValid ? successColor : errorColor,
                      minimumSize: MaterialStateProperty.all(Size.fromHeight(1)),
                      foregroundColor: MaterialStateProperty.all(Colors.white),
                      textStyle:
                          MaterialStateProperty.all(TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
                      padding: MaterialStateProperty.all(EdgeInsets.symmetric(horizontal: 10, vertical: 10))),
                  child: Text('Next')),
            ],
          ),
        ),
      ),
    );
  }
}

您可以根据需要更改按钮的颜色

当您在字段中键入时，这将动态更改。

这是用户界面 output：

让我知道这对你有用

Answer 2

您可以为此使用有状态小部件。 最好有一个带有textController和FocusNode的TextField 。 然后您可以根据textController.text是否为空来更改按钮的颜色。 这是一个示例代码来说明我所说的：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _textController = TextEditingController();
  final _focusNode = FocusNode();

  Color get buttonColor =>
      _textController.text.isNotEmpty ? Colors.green : Colors.grey;

  @override
  void dispose() {
    _textController.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
            focusNode: _focusNode,
            controller: _textController,
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              contentPadding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
              isCollapsed: true,
              hintText: "Email",
              filled: true,
              fillColor: Color.fromARGB(255, 236, 236, 236),
              hintStyle: TextStyle(
                fontSize: 15,
                color: Color.fromARGB(255, 145, 144, 144),
              ),
            ),
          ),
          SizedBox(height: 15),
          ElevatedButton(
            onPressed: _textController.text.isNotEmpty
                ? () {
                    _textController.clear();
                    _focusNode.unfocus();
                  }
                : null,
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(buttonColor),
              minimumSize: MaterialStateProperty.all(Size.fromHeight(1)),
              foregroundColor: MaterialStateProperty.all(Colors.white),
              textStyle: MaterialStateProperty.all(
                TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                ),
              ),
              padding: MaterialStateProperty.all(
                EdgeInsets.symmetric(horizontal: 10, vertical: 10),
              ),
            ),
            child: Text('Next'),
          ),
        ],
      ),
    );
  }
}

我希望它有所帮助。