Clase FlatButton en la biblioteca de materiales Flutter con ejemplo

La clase Flutter FlatButton ha quedado obsoleta oficialmente y no debe utilizarse. Podemos usar la clase TextButton en su lugar para lograr los mismos resultados. En el siguiente ejemplo, tenemos un código que usa la clase TextButton para lograr los mismos resultados que su contraparte obsoleta (es decir, FlatButton ).

La clase FlatButton viene con una clase de botón de texto simple que se usa en la mayoría de las aplicaciones. Están en desuso sin elevación y en su mayoría tienen un widget de texto o un widget de icono como hijo. No hay estilo disponible en toda la clase de botón plano. El color del texto para el negro por defecto, mientras que el color de fondo es azul. Los botones de texto son el nuevo reemplazo no obsoleto de los botones planos obsoletos. Se importa desde » paquete: aleteo/material.dart «. La temática de esta clase se realiza con la ayuda de las funcionalidades de los botones que puede usar para ver todos los archivos de la Galería, abrir la cámara, cambiar permisos, etc.

Constructor 

FlatButton(
    {Key key, @
    required VoidCallback onPressed, 
    VoidCallback onLongPress, 
    ValueChanged<bool> onHighlightChanged, 
    MouseCursor mouseCursor, 
    ButtonTextTheme textTheme, 
    Color textColor, 
    Color disabledTextColor, 
    Color color, 
    Color disabledColor, 
    Color focusColor, 
    Color hoverColor, 
    Color highlightColor, 
    Color splashColor, 
    Brightness colorBrightness, 
    EdgeInsetsGeometry padding, 
    VisualDensity visualDensity, 
    ShapeBorder shape, 
    Clip clipBehavior: Clip.none, 
    FocusNode focusNode, 
    bool autofocus: false, 
    MaterialTapTargetSize materialTapTargetSize, 
    @required Widget child})
}

Esta clase viene con una serie de propiedades, las más utilizadas se describen a continuación:

Color : define el color del botón. 

FlatButton(
        color: Colors.green,
        onPressed: () {},
        child: Text(
          ' Flat Button Here',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),

Salida :

 

relleno : define el espacio entre el texto y el borde. 

FlatButton(
        color: Colors.green,
        padding: const EdgeInsets.all(5),
        onPressed: () {},
        child: const Text(
          ' Flat Button',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),

Salida :

 

color de salpicadura : define el color resaltado cuando se desplaza. 

 FlatButton(
        color: Colors.green,
        padding: const EdgeInsets.all(5),
        splashColor: Colors.yellow,
        onPressed: () {},
        child: const Text(
          ' Flat Button',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),

Salida :

textcolor : define el color del texto dentro del botón. 

FlatButton(
        color: Colors.green,
        textColor: Colors.white,
        onPressed: () {},
        child: const Text(
          ' Flat Button',
        ),
      ),

Salida :

 

altura : define la altura del botón

FlatButton(
        color: Colors.green,
        height: 5,
        textColor: Colors.white,
        splashColor: Colors.yellow,
        onPressed: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        child: const Text('Flat Button'),
      ),

Salida :

 

onPressed : define el valor de devolución de llamada para el botón, es decir, la acción que se realizará cuando el usuario haga clic en el botón. 

FlatButton(
        color: Colors.green,
        textColor: Colors.white,
        splashColor: Colors.yellow,
        onPressed: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        child: const Text('Flat Button'),
      ),

 Aquí onPressed() está ejecutando una función que lleva el control a una nueva pantalla. 

Salida :

Algunas otras propiedades proporcionadas dentro de los botones planos son las siguientes

• colorBrightness : define el nivel de brillo del color del botón.
• clipBehaviour : define si el contenido se recorta o no.
• disabledColor : el color del botón cuando está inactivo.
• disbledElevation : elevación del botón cuando está inactivo.
• disabledTextColor : el color del botón cuando está inactivo.
• habilitado : muestra la coordenada z en la que colocar este botón en relación con su padre. 
• focusColor : muestra el color del botón cuando tiene un foco de entrada.
• hashCode : define el código hash del objeto.
• HighlightColor : representa el color del botón cuando está resaltado.
• highlightElevation : representa la elevación del botón cuando está resaltado.
• hoverColor : el color del botón cuando se desplaza.
• hoverElevation : la elevación del botón cuando se desplaza.

Aparte de estos, también hay muchas otras propiedades, pero solo se utilizan en la mayoría de las aplicaciones. 

Métodos utilizados en estos botones

• build : describe la interfaz de usuario.
• createElement : crea un StatelessElement para administrar la ubicación de este widget en el árbol.
• debugDescribeChildren : devuelve una lista de objetos que describen los hijos del Node. 
• debugFillProperties(): añade propiedades adicionales asociadas al Node.
• noSuchMethod : se invoca cuando se activa una propiedad que no existe.
• toStringShort: texto en términos de string.

Comprendamos una clase de botón plano con la ayuda de ejemplos.  

Ejemplo

import 'package:flutter/material.dart';
 
void main() {
  runApp(const HomeApp());
}
 
class HomeApp extends StatefulWidget {
  const HomeApp({Key? key}) : super(key: key);
 
  @override
  State<HomeApp> createState() => _HomeAppState();
}
 
class _HomeAppState extends State<HomeApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.green,
              title: const Text('GeeksforGeeks'),
            ),
            body: const FirstScreen()));
  }
}
 
class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Center(
        child: TextButton(
      onPressed: () => Navigator.of(context)
          .push(MaterialPageRoute(builder: (context) => const NewScreen())),
      child: Container(
        color: Colors.green,
        padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
        child: const Text("Text Button",
            style: TextStyle(color: Colors.white, fontSize: 14)),
      ),
 
      // FlatButton is deprecated and should not be used.
      // Use TextButton instead.
 
      // child: FlatButton(
      //   color: Colors.green,
      //   textColor: Colors.white,
      //   splashColor: Colors.yellow,
      //   onPressed: () => Navigator.of(context)
      //       .push(MaterialPageRoute(builder: (context) => const NewScreen())),
      //   child: const Text('Flat Button'),
      // ),
    ));
  }
}
 
class NewScreen extends StatefulWidget {
  const NewScreen({Key? key}) : super(key: key);
 
  @override
  State<NewScreen> createState() => _NewScreenState();
}
 
class _NewScreenState extends State<NewScreen> {
  TextEditingController textEditingController = TextEditingController();
 
  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('New Screen'),
      ),
      body: const Center(child: Text('This is your new screen')),
    );
  }
}

Salida :