The goal is to have my text boxes be grey when there is no content in them, and white when the user starts typing in them.

There is also another issue, when my text box is active the cursor and icon go to the default Flutter blue color. I need them to go to a custom color.

main.dart

 Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
    return ChangeNotifierProvider(
        create: (_) => AppData(),
        child: MaterialApp(
      title: 'Pearmonie',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
          primaryColor: Color(0xFF623CEA),
          fontFamily: 'Manrope',
          inputDecorationTheme: InputDecorationTheme(
          ),
      ),
      home: const Splash(),
    ));
  }

a textformfield

Container(
            width: inputWidth,
            padding:  EdgeInsets.symmetric(horizontal: 5),
            decoration: BoxDecoration(color: Colors.grey.shade200, borderRadius: BorderRadius.circular(15)),
            child: TextFormField(
              focusNode: firstNameNode,
              autofocus: false,
              controller: firstNameController,
              obscureText: false,
              textAlignVertical: TextAlignVertical.center,
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.person_outline),
                border: InputBorder.none,
                hintText: "Full Name",
              ),
              onFieldSubmitted: (value) {
                phoneNode.requestFocus();
              },
            ),
          ),

Things I have tried:

1. Adding focusColor directly to the TextFormField
2. Adding focusColor to ThemeData and InputDecorationTheme

CodePudding user response：

Please try this if it is not worked for u let me know.

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const Color primaryColor = Color(0xFF623CEA);

  static MaterialColor primaryColorSwatch = MaterialColor(
    primaryColor.value,
    const <int, Color>{
      50: Color(0xFF623CEA),
      100: Color(0xFF623CEA),
      200: Color(0xFF623CEA),
      300: Color(0xFF623CEA),
      400: Color(0xFF623CEA),
      500: Color(0xFF623CEA),
      600: Color(0xFF623CEA),
      700: Color(0xFF623CEA),
      800: Color(0xFF623CEA),
      900: Color(0xFF623CEA),
    },
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        textSelectionTheme: const TextSelectionThemeData(cursorColor: primaryColor),
        primaryColor: primaryColor,
        primarySwatch: primaryColorSwatch,
      ),
      home: const TextFieldDemo(),
    );
  }
}

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

  @override
  State<TextFieldDemo> createState() => _TextFieldDemoState();
}

class _TextFieldDemoState extends State<TextFieldDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Demo")),
      backgroundColor: Colors.lightGreen.shade200,
      body: _body(),
    );
  }

  final firstNameNode = FocusNode();
  final firstNameController = TextEditingController();
  final secondNameNode = FocusNode();
  final secondNameController = TextEditingController();
  final gap = const SizedBox(height: 15);

  Widget _body() {
    return ListView(
      padding: const EdgeInsets.all(15),
      children: [
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 5),
          decoration: BoxDecoration(
            color: firstNameController.text.isEmpty ? Colors.grey.shade400 : Colors.white,
            borderRadius: BorderRadius.circular(15),
          ),
          child: TextFormField(
            focusNode: firstNameNode,
            autofocus: false,
            controller: firstNameController,
            obscureText: false,
            textAlignVertical: TextAlignVertical.center,
            onChanged: (val) {
              setState(() {});
            },
            decoration: const InputDecoration(
              prefixIcon: Icon(Icons.person_outline),
              border: InputBorder.none,
              hintText: "First Name",
            ),
            onFieldSubmitted: (value) {
              // phoneNode.requestFocus();
            },
          ),
        ),
        gap,
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 5),
          decoration: BoxDecoration(
            color: secondNameController.text.isEmpty ? Colors.grey.shade300 : Colors.white,
            borderRadius: BorderRadius.circular(15),
          ),
          child: TextFormField(
            focusNode: secondNameNode,
            autofocus: false,
            controller: secondNameController,
            onChanged: (val) {
              setState(() {});
            },
            obscureText: false,
            textAlignVertical: TextAlignVertical.center,
            decoration: const InputDecoration(
              prefixIcon: Icon(Icons.person_outline),
              border: InputBorder.none,
              hintText: "Second Name",
            ),
            onFieldSubmitted: (value) {
              // phoneNode.requestFocus();
            },
          ),
        ),
      ],
    );
  }
}

CodePudding user response：

@K K Muhammed Fazil Credits go to you for this part of the answer

This changes the cursor/icon color when you have a textformfield active/focused

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const Color primaryColor = Color(0xFF623CEA);

  static MaterialColor primaryColorSwatch = MaterialColor(
    primaryColor.value,
    const <int, Color>{
      50: Color(0xFF623CEA),
      100: Color(0xFF623CEA),
      200: Color(0xFF623CEA),
      300: Color(0xFF623CEA),
      400: Color(0xFF623CEA),
      500: Color(0xFF623CEA),
      600: Color(0xFF623CEA),
      700: Color(0xFF623CEA),
      800: Color(0xFF623CEA),
      900: Color(0xFF623CEA),
    },
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        textSelectionTheme: const TextSelectionThemeData(cursorColor: primaryColor),
        primaryColor: primaryColor,
        primarySwatch: primaryColorSwatch,
      ),
      home: const TextFieldDemo(),
    );
  }
}

But to change the color of a textformfield when it is not empty I had to do this ( Notice the onChange code ):

Color phoneColor Colors.grey.shade200;

Container(
            width: inputWidth,
            padding:  EdgeInsets.symmetric(horizontal: 5),
            decoration: BoxDecoration(color: phoneColor, borderRadius: BorderRadius.circular(15)),
            child: TextFormField(
              keyboardType: TextInputType.number,
              focusNode: phoneNode,
              autofocus: false,
              controller: phoneController,
              obscureText: false,
              textAlignVertical: TextAlignVertical.center,
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.phone),
                border: InputBorder.none,
                hintText: "Phone Number",
              ),
              onFieldSubmitted: (value) {
                passNode.requestFocus();
              },
                onChanged: (value) {
                  if (phoneController.text.isEmpty) {
                    setState(() {
                      phoneColor = Colors.grey.shade200;
                    });
                  } else {
                    setState(() {
                      phoneColor = Colors.white;
                    });
                  }
                }
            ),
          ),