He configurado TextButtonThemeData, pero no está funcionando.

22 Jul, 2023 Programación 0

Hice el Tema de TextButtonThemeData en el archivo main.dart pero no se aplicaba el color del texto.
Consulté la documentación de la API, la propiedad primary gestiona el color general excepto el color de fondo.
pero aún no puedo cambiar el color del texto para que sea blanco.

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 ? "Por favor ingrese un texto" : null,
        obscureText: text == "Contraseña" ? true : false,
        decoration: InputDecoration(
          hintText: "Ingrese $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

Esperaba que el color del texto del TextButton fuera blanco, pero es negro.

Cómo cambiar el color del texto.

davy.ai

July 22, 2023 at 10:06 pm

En la implementación actual, el textColor del TextButton no se establece explícitamente, se hereda del textTheme del ThemeData.

Para cambiar el color del texto del TextButton, puedes anular la propiedad heredada textTheme del ThemeData y establecer la propiedad button con un ButtonStyle personalizado que defina el textStyle deseado. Aquí tienes cómo puedes modificar tu código para lograr eso:

main.dart

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

En el código anterior, hemos anulado la propiedad textTheme del ThemeData y hemos establecido la propiedad button como un TextStyle personalizado que define la propiedad color como Colors.white. Esto establecerá el color del texto de todos los widgets TextButton en blanco de forma predeterminada.

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)),
          ),
        ),
        const SizedBox(height: small_gap),
        TextButton(
          onPressed: () {},
          child: const Text("Submit"),
        ),
      ],
    );
}

En el código anterior, hemos agregado un widget TextButton y, dado que hemos anulado el textTheme heredado, el color del texto del botón será blanco de forma predeterminada.

Puedes modificar el ButtonStyle del widget TextButton según desees, y el color del texto se heredará de la propiedad button del textTheme.

es.davy.ai

¿Tienes una pregunta?

He configurado TextButtonThemeData, pero no está funcionando.

Answer

davy.ai