Clase de botón elevado en la biblioteca de materiales Flutter con ejemplo

La clase de botón elevado viene con una ligera elevación en su estructura al tocar por parte del usuario. Tienen varias propiedades, como el color del texto, la forma, el relleno, el color de los botones, etc. Por defecto, tienen una forma rectangular que no se puede modificar y tienen una interfaz de usuario a lo largo de su eje z. Es una clase obsoleta y se prefiere un botón elevado a los botones elevados. debido a que no hay un tema de botón de un solo valor específico presente con un botón elevado, debe personalizarlo de acuerdo con sus propios requisitos.

Descargo de responsabilidad : a partir de junio de 2022, la clase RaisedButton en flutter está obsoleta. En su lugar, se debe usar la clase ElevatedButton. La clase Thel ater finalmente se eliminará del SDK de flutter, por lo que se sugiere pasar a la clase más nueva.

Constructor

RaisedButton(
    {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, 
    double elevation, 
    double focusElevation, 
    double hoverElevation, 
    double highlightElevation, 
    double disabledElevation, 
    EdgeInsetsGeometry padding, 
    VisualDensity visualDensity, 
    ShapeBorder shape, 
    Clip clipBehavior: Clip.none, 
    FocusNode focusNode, 
    bool autofocus: false, 
    MaterialTapTargetSize materialTapTargetSize, 
    Duration animationDuration, 
    Widget child}
)

Un botón elevado utiliza una serie de propiedades, las más comunes se explican a continuación:

color : define el color del botón. 

RaisedButton(
             color: Colors.green,
             child: Text('Raised Button'),
             onPressed: () {}            
           ),

Salida :

 

elevación : define el incremento en el ancho del botón hacia la superficie de la pantalla.

RaisedButton(
             elevation: 5,
             color: Colors.green
             child: Text('Raised Button'),
             onPressed: () {}
           ), 

Salida :

hoverColor : define el color del botón cuando se toca 

RaisedButton(
             hoverColor:Colors.yellow ,
             color: Colors.green,
             elevation: 5,
             child: Text('Raised Button'),
             onPressed: () {}
           ), 

Salida :

textColor : define el color del texto dentro del botón

RaisedButton(
textColor: Colors.white,
             color: Colors.green,
             elevation: 5,
             textColor: Colors.white,
             hoverColor:Colors.yellow ,
             child: Text('Raised Button'),
             onPressed: () {}
           ), 

Salida :

 

padding : define el espacio entre el borde y el texto 

RaisedButton(
             padding: EdgeInsects.all(5),
             color: Colors.green,
             elevation: 5,
             textColor: Colors.white,
             hoverColor:Colors.yellow ,
             child: Text('Raised Button'),
             onPressed: () {}
           ), 

Salida :

 

Algunas de las otras propiedades de los botones elevados son las siguientes

• clipBehavior : decide si el texto dentro del botón se recortará o no.
• colorBrightness : decide el tema-brillo que se usará dentro del botón.
• disabledColor : decide el color del botón cuando está inactivo.
• disabledElevation : decide la altura de elevación del botón cuando está inactivo.
• HighlightElevation : decidió la altura de elevación del botón cuando el usuario lo toca.
• onLongPress : la función de devolución de llamada cuando se presiona el botón un poco más de lo habitual.
• onPressed : la función de devolución de llamada cuando se toca el botón.
• visualDensity : muestra la compacidad del diseño del botón tomando la clase VisualDensity como el objeto.
• enableFeedback : controla si habrá sonido o vibración cuando se haga clic en el botón.
• focusColor : decide el color del botón en el momento del enfoque de entrada.
• focusElevation : controla la ubicación de RaisedButton en el eje z.
• focusNode : decide los Nodes de enfoque como un objeto de clase.

Los métodos utilizados en los botones en relieve son los siguientes

• 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 : agregue 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.

Comprendamos de cerca un botón en relieve con la ayuda de un ejemplo.

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: ElevatedButton(
        style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.green)),
        onPressed: () => Navigator.of(context).push(
          MaterialPageRoute(builder: (context) => const NewScreen()),
        ),
        child: const Text('Raised Button'),
      ),
 
      // RaisedButton is deprecated and should not be used in new code.
      // Use ElevatedButton instead.
 
      // child: RaisedButton(
      //   padding: EdgeInsets.all(5),
      //   color: Colors.green,
      //   textColor: Colors.white,
      //   hoverColor: Colors.yellow,
      //   onPressed: () => Navigator.of(context)
      //       .push(MaterialPageRoute(builder: (context) => const NewScreen())),
      //   child: const Text('Raised 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 :