I have setted TextButtonThemeData, but not working

Viewed 443

I made Theme of TextButtonThemeData in main.dart file but It was not applying text color. I checked API DOC, primary property manage overall color except for backgroundColor. but still can not change text color to be white

main.dart

Widget build(BuildContext context) {
return MaterialApp(
    
    theme: ThemeData(
      textButtonTheme: TextButtonThemeData(
        style: TextButton.styleFrom(
          backgroundColor: Colors.teal,
          primary: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
          ),
          minimumSize: Size(400, 60),
        ),
      ),
    ),
    debugShowCheckedModeBanner: false,
    
    initialRoute: "/login",
    routes: {
      "/login": (context) => LoginPage(),
      "/home": (context) => const HomePage(),
    })}

Custom_form.dart

Widget build(BuildContext context) {
return Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(text),
    const SizedBox(height: small_gap),
    TextFormField(
      validator: (value) =>
          value!.isEmpty ? "Please enter some text" : null,
      obscureText: text == "Password" ? true : false,
      decoration: InputDecoration(
          hintText: "Enter $text",
          enabledBorder:
              OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
          focusedBorder:
              OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
          errorBorder:
              OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
          focusedErrorBorder:
              OutlineInputBorder(borderRadius: BorderRadius.circular(12))),
    )
  ],
);}

OUTPUT

enter image description here

I expected the textColor of TextButton is White, but it is black.

How To change the color of the text.

1 Answers

You can use ButtonStyle and use the foregroundColor property to assign color to the text

        textButtonTheme: TextButtonThemeData(
              style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.teal),
            textStyle: MaterialStateProperty.all(
                const TextStyle(fontWeight: FontWeight.bold)),
            shape: MaterialStateProperty.all(RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12))),
            minimumSize: MaterialStateProperty.all(const Size(400, 60)),
            foregroundColor: MaterialStateProperty.all(Colors.white),
          ))
Related