Flutter: widget de botón elevado

El botón elevado es un componente de aleteo incluido dentro del paquete de material, es decir, «paquete: aleteo/material.dart «. La principal característica que tienen estos botones es la ligera elevación de su superficie hacia la pantalla al ser tocados por el usuario. En un lenguaje simple, los botones elevados son botones elevados no obsoletos sin un estilo de botón definido explícitamente. Los botones elevados no se pueden diseñar, es decir, no puede modificar el color del botón, el tamaño de fuente, el estilo del texto, etc. explícitamente como los botones elevados. Esta clase se lanzó en la versión 1.22 de flutter . Puede pasarles texto o íconos como un niño. Para manejar el estilo del botón elevado, se usa una clase ButtonStyle que permite el estilo de un botón de acuerdo con los requisitos. 

Constructor para botón elevado

ElevatedButton.icon({
  Key? key, 
  required VoidCallback? onPressed, 
  VoidCallback? onLongPress, 
  ValueChanged<bool>? onHover, 
  ValueChanged<bool>? onFocusChange, 
  ButtonStyle? style, 
  FocusNode? focusNode, 
  bool? autofocus, 
  Clip? clipBehavior, 
  required Widget icon, 
  required Widget label
})

Parámetros

Elevated Button ofrece dos parámetros importantes:

1. child : esto representa la etiqueta del botón.

ElevatedButton(
        child: const Text('Raised Button'),
        
      ),

2. onPressed : esto representa la acción que se ejecutará cuando se toque el botón

onPressed: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => const NewScreen())),

Aquí, cuando se toca el botón, se ejecuta una acción de navegación a NewScreen. 

Propiedades del botón elevado

• autofocus : da un valor booleano correspondiente al enfoque inicial del botón.
• clipBehaviour : decide si el contenido se recorta o no.
• focusNode : representa el Node de enfoque del widget
• Estilo ButtonStyle : decide el estilo del botón
• onLongPress : la acción que se ejecutará cuando el usuario mantenga presionado el botón
• habilitado : da un valor booleano para la actividad del botón
• hashcode : decide el código hash del botón
• Clave : controla cómo un widget reemplaza a otro widget en el árbol.
• onFocusChanged : un método que se ejecutará al cambiar el foco del botón
• onHover : acción que se ejecutará cuando el usuario pase el botón

Métodos proporcionados en un botón elevado

• createElement() : crea un StatefulElement para administrar la ubicación del botón en el árbol de widgets.
• createState() : crea el estado mutable para este widget en una ubicación dada en el árbol.
• build(BuildContext context) : Describe la parte de 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 DiagnosticsNode que describen los hijos de este Node
• debugFillProperties() : agrega propiedades adicionales asociadas con el Node
• noSuchMethod() : se invoca cuando se accede a un método o propiedad inexistente
• toDiagnosticsNode() : Devuelve una representación de depuración del objeto que utilizan las herramientas de depuración 
• toString() : una representación de string de este objeto
• toStringDeep() : Devuelve una representación de string de este Node y sus descendientes.
• toStringShallow() : Devuelve una descripción detallada de una línea del objeto
• toStringShort() : una breve descripción textual de este widget.

Aplicar estilo a un botón

El estilo de un botón elevado es bastante diferente del resto de los botones. Tienes que usar ButtonStyle como un parámetro de estilo. Después de eso, pase ElevatedButtonThemeData como tema de botón a ThemeData. El estilo del botón elevado se realiza mediante ElevatedButton.styleFrom . El estilo específico para un botón se hace explícitamente usando el parámetro ButtonStyle como se indica a continuación:

ElevatedButton(
          child: Text('Elevated Button'),
          style: ElevatedButton.styleFrom(
            primary: Colors.green,
          ),
          onPressed: () {},
        ),

Producción:

 

Cambio de estilo de texto

Pasar valores a la propiedad textStyle del botón ayuda a modificar el estilo del texto 

 ElevatedButton(
          child: Text('Elevated Button'),
          style: ElevatedButton.styleFrom(
            primary: Colors.green,
            textStyle: const TextStyle(
                color: Colors.white,
                 fontSize: 10, 
                 fontStyle: FontStyle.normal),
          ),
          onPressed: () {},
        ),

Producción:

 

Borde cambiante

El uso de BorderSide como parámetro para la propiedad lateral del botón elevado ayuda a modificar el borde 

ElevatedButton(
          child: Text('Elevated Button'),
          style: ElevatedButton.styleFrom(
            primary: Colors.green,
            side: BorderSide(color: Colors.yellow, width: 5),
            textStyle: const TextStyle(
                color: Colors.white, fontSize: 25, fontStyle: FontStyle.normal),
          ),
          onPressed: () {},
        ),

Producción:

 

Cambio de forma y sombra

La forma se puede cambiar pasando OutlinedBorder como un parámetro a la propiedad de forma y la sombra se puede manejar dando color a la propiedad shadowColor . El color de la sombra solo es visible cuando se toca el botón.

Forma :

ElevatedButton(
          child: Text('Elevated Button'),
          style: ElevatedButton.styleFrom(
            primary: Colors.green,
            // side: BorderSide(color: Colors.yellow, width: 5),
            textStyle: const TextStyle(
                color: Colors.white, fontSize: 25, fontStyle: FontStyle.normal),
            shape: BeveledRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(10))),
          ),
          onPressed: () {},
        ),

Producción:

 

sombra :

ElevatedButton(
          child: Text('Elevated Button'),
          style: ElevatedButton.styleFrom(
            primary: Colors.green,
            // side: BorderSide(color: Colors.yellow, width: 5),
            textStyle: const TextStyle(
                color: Colors.white, fontSize: 25, fontStyle: FontStyle.normal),
            shape: BeveledRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(10))),
            shadowColor: Colors.lightBlue,
          ),
          onPressed: () {},
        ),

Producción:

Comprendamos la explicación anterior con la ayuda del código que se proporciona a continuación.

Implementación

import 'package:flutter/material.dart';
 
void main() {
  runApp(HomeApp());
}
 
class HomeApp extends StatefulWidget {
  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 Container(
      child: Center(
        child: ElevatedButton(
          child: Text('Elevated Button'),
          style: ElevatedButton.styleFrom(
            primary: Colors.green,
            // side: BorderSide(color: Colors.yellow, width: 5),
            textStyle: const TextStyle(
                color: Colors.white, fontSize: 25, fontStyle: FontStyle.normal),
            shape: BeveledRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(10))),
            shadowColor: Colors.lightBlue,
          ),
          onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        ),
      ),
    );
  }
}
 
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: Center(child: Text('This is your new screen')),
    );
  }
}

Producción: