Widget de material de aleteo: clase de botón contorneado

Los widgets con contorno son componentes de diseño de materiales que se utilizan para dar contorno a los botones. No es diferente de los botones de texto, excepto por la característica especial del borde que proporciona esta clase. Estos contienen acciones no primarias para las aplicaciones. Se introduce en la versión 1.22 de flutter . Los botones delineados tienen un elemento secundario como su etiqueta con widgets de texto o widgets de iconos como el elemento secundario de esta clase principal. Puede configurar el estilo de los botones delineados usando ButtonStyle . Para usar esta clase, debe importar el paquete de material, es decir, » paquete/flutter/material.dart «.

Constructor

const OutlinedButton({
    Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ButtonStyle style,
    FocusNode focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    @required Widget child,
  })

Parámetros

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

OutlinedButton(
        child: 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())),

Propiedades

• 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
• haschode : decide el hascode 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
• runType Tipo : representa el tiempo de ejecución de un objeto

Métodos

• 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 (contexto BuildContext): 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 del botón se asigna al proporcionar el constructor OutlinedButton.styleFrom al parámetro de estilo.

OutlinedButton(
          child: Text('Outlined Button'),
          style: OutlinedButton.styleFrom(
            primary: Colors.green,
          ),
          onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        ),

 

Agregar colores al botón

La coloración requiere dos parámetros,

1. color de fondo

OutlinedButton(
          child: Text('Outlined Button'),
          style: OutlinedButton.styleFrom(
            backgroundColor: Colors.green,
           
          ),
          onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        ),

2. primaria

OutlinedButton(
          child: Text('Outlined Button'),
          style: OutlinedButton.styleFrom(
            backgroundColor: Colors.green,
            primary: Colors.white,
          ),
          onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        ),

 

Dar forma al botón

La forma del borde se puede ajustar mediante el uso del constructor OutlinedBorder como parámetro del estilo con el radio del borde que elija.

OutlinedButton(
          child: Text('Outlined Button'),
          style: OutlinedButton.styleFrom(
            
              primary: Colors.black,
              textStyle: TextStyle(fontSize: 15, fontStyle: FontStyle.italic),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10)))),
          onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        ),

 

Ajuste del texto y su estilo 

Esto se puede hacer pasando textstyle al constructor TextStyle del botón delineado

OutlinedButton(
          child: Text('Outlined Button'),
          style: OutlinedButton.styleFrom(
            backgroundColor: Colors.green,
            primary: Colors.white,
            textStyle: TextStyle(fontSize: 15, fontStyle: FontStyle.italic),
          ),
          onPressed: () => Navigator.of(context)
              .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        ),

 

Comprendamos el botón delineado y sus propiedades con la ayuda de un ejemplo

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: OutlinedButton(
          child: Text('Outlined Button'),
          style: OutlinedButton.styleFrom(
              primary: Colors.black,
              textStyle: TextStyle(fontSize: 15, fontStyle: FontStyle.italic),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10)))),
          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