Home > Net >  Is there any code in flutter to change the border color when a TextFormField has a value?
Is there any code in flutter to change the border color when a TextFormField has a value?

Time:02-13

TextFormField(
                style: TextStyle(color: Colors.black),
                textAlign: TextAlign.center,
                controller: _HeightController,
                validator: (value) {
                  if (value!.trim().isEmpty) {
                    return 'enter some text';
                  } else {
                    return null;
                  }
                },
                decoration:InputDecoration(
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                    borderSide: BorderSide(
                      color: pro.backColor_main,
                    ),
                  ),
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                    borderSide: BorderSide(
                  

color: Color(0xffC2C2C2),
                  width: 2.0,
                ),
              ),
              hintText: '키를 입력해주세요',
              hintStyle: TextStyle(fontSize: 13.sp,
                color: Color(0xffA9A9A9),
              ),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10.0),
              ),
              fillColor: Colors.white,
              filled: true,
            ),
            keyboardType: TextInputType.number,
          ),

This is my textformfield code.

Changing color when TextFormField is selected

Changing color when TextFormField is not selected

I understand that changing the color of the border of TextFormField itself.

But I want to keep the color of pro.main(blue) after a value is entered in TextFormField This is because if you deselect the selection after entering a value, it becomes gray.

In this case, I wonder if there is a code to change the outline color if there is a value in the TextFormField.

CodePudding user response:

  class MyHomePage extends StatefulWidget {
    const MyHomePage({Key? key, required this.title}) : super(key: key);


    final String title;

    @override
    State<MyHomePage> createState() => _MyHomePageState();
  }

  class _MyHomePageState extends State<MyHomePage> {
    late TextEditingController _HeightController;
    @override
    void initState() {
      _HeightController  = TextEditingController();

    }

    @override
    void dispose() {
      _HeightController.dispose();
    }

    @override
    Widget build(BuildContext context) {

      return Scaffold(
        appBar: AppBar(

          title: Text(widget.title),
        ),
        body: Center(

          child: TextFormField(
            style: TextStyle(color: Colors.black),
            textAlign: TextAlign.center,
            controller: _HeightController,
            validator: (value) {
              if (value!.trim().isEmpty) {
                return 'enter some text';
              } else {
                return null;
              }
            },
            onChanged: (_){
              setState(() {
              });
            },
            decoration:InputDecoration(
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10.0),
                borderSide: BorderSide(
                  color: Colors.indigo,
                ),
              ),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10.0),
                borderSide: BorderSide(
                  color: _HeightController.value.text.isEmpty ? Color(0xffC2C2C2) : Colors.blueAccent,
                  width: _HeightController.value.text.isEmpty ? 2.0 : 3.0,
                ),
              ),
              hintText: '키를 입력해주세요',
              hintStyle: TextStyle(fontSize: 13,
                color: Color(0xffA9A9A9),
              ),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10.0),

              ),
               fillColor: Colors.white,
              filled: true,
            ),
            keyboardType: TextInputType.number,
          ),
        ),
      );
    }
  }

when it's empty :

enter image description here

when it's not empty :

enter image description here

CodePudding user response:

you can try that, define a bool variable. check textfield controller, if != "" or null set your color

  • Related