How to change TextFormField labeltext and border color in Flutter?-CodePudding

I have TextFormField and I want to change color of border and labelText, how can I do that?

That's how it looks now, and I want to change blue to purple. (https://im.ge/i/FImpIh)

import 'package:flutter/material.dart';

class InputTextFormField extends StatefulWidget {
  final String labelText;
  TextEditingController? controller;

  InputTextFormField({Key? key, required this.labelText, required this.controller});

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

class _InputTextFormFieldState extends State<InputTextFormField> {
  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
        alignLabelWithHint: true,
        labelText: widget.labelText,
        border: const OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(12.0)),

        ),
      ),
      validator: (value) => value!.isEmpty ? 'Please, fill this field.' : null,
      controller: widget.controller,
    );
  }

CodePudding user response：

You will need to define a focusedBorder inside TextField for the border color and labelStyle for label color

class _InputTextFormFieldState extends State<InputTextFormField> {
  FocusNode myFocusNode = FocusNode();

  @override
  void initState() {
    super.initState();

    myFocusNode.addListener((){ 
      setState((){}); 
    });
  }

  @override
  void dispose() {
    myFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      focusNode: myFocusNode,
      decoration: InputDecoration(
        alignLabelWithHint: true,
        labelText: widget.labelText,
        labelStyle: TextStyle(
          color: myFocusNode.hasFocus ? Colors.purple : Colors.black
        ),
        border: const OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(12.0)),
        ),
        focusedBorder: const OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(12.0)),
          borderSide: BorderSide(color: Colors.purple, width: 0.5),
        )
      ),
      validator: (value) => value!.isEmpty ? 'Please, fill this field.' : null,
      controller: widget.controller,
    );
  }
}

CodePudding user response：

Use the decoration parameter with an InputDecoration : https://api.flutter.dev/flutter/material/InputDecoration-class.html

Like this

TextFormField(
    decoration: InputDecoration(
        labelStyle: TextStyle(color: Colors.purple), /// Your parameters for the label
        border: OutlineInputBorder(borderSide: BorderSide(color: Colors.purple)), /// Your parameters for the border
      ),
    ...
)

CodePudding user response：

InputDecoration already has properties for that

InputDecoration(
        alignLabelWithHint: true,
        labelText: widget.labelText,
        labelStyle: //TextStyle,
        border: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(12.0)),
              borderSide: BorderSide(color: color, width: 2),//border Color
            ),
      ),