Widget FlatButton en Flutter

FlatButton es el widget de diseño de materiales en flutter. Es un widget de material de etiqueta de texto que realiza una acción cuando se toca el botón . Entendamos con la ayuda de ejemplos. 

Descargo de responsabilidad: a partir de mayo de 2021, la clase FlatButton en flutter está obsoleta. En su lugar, se debe usar la clase TextButton. La última clase eventualmente se eliminará del SDK de flutter, por lo que se sugiere pasar a la clase más nueva.

Lista de clases reemplazadas:

• Botón plano → Botón de texto
• Botón elevado → Botón elevado
• Botón de contorno → Botón de contorno
• Tema de botón → Tema de botón de texto, Tema de botón elevado, Tema de botón de esquema

Constructor de la clase FlatButton:

Syntax:
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})

Propiedades:

• niño: la etiqueta del botón.
• textColor: el color del texto.
• color: el color del botón.
• splashColor: el color de bienvenida del botón.
• forma: la forma del botón plano.
• onPressed: la función de devolución de llamada requerida .
• onLongPress: la función de devolución de llamada cuando el botón se mantiene presionado.

Ejemplo:

El archivo main.dart

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/basic.dart';
import 'package:flutter/src/widgets/framework.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlatButton',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  String txt='';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      backgroundColor: Colors.lightBlue[50],
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              // splashColor: Colors.red,
              color: Colors.green,
              // textColor: Colors.white,
              child: Text('Flat Button',),
              onPressed: () {
                setState(() {
                  txt='FlatButton tapped';
                });
              },
            ),
 
            Text(txt,textScaleFactor: 2),
          ],
        ),
      ),
    );
  }
}

Producción:

Si las propiedades se definen de la siguiente manera:

FlatButton(
    color: Colors.green,
        child: Text('Flat Button',),
        onPressed: () {
           setState(() {
           txt='FlatButton tapped';
            });
          },
      ),

Se pueden observar los siguientes cambios de diseño:

Si las propiedades se definen de la siguiente manera:

FlatButton(
         color: Colors.green,
         textColor: Colors.white,
         child: Text('Flat Button',),
         onPressed: () {
            setState(() {
            txt='FlatButton tapped';
             });
           },
       ),

Se pueden observar los siguientes cambios de diseño:

Si las propiedades se definen de la siguiente manera:

FlatButton(
       splashColor: Colors.red,
       color: Colors.green,
       textColor: Colors.white,
       child: Text('Flat Button',),
       onPressed: () {
           setState(() {
           txt='FlatButton tapped';
            });
          },
     ),

Se pueden observar los siguientes cambios de diseño:

Explicación:

• Cree FlatButton con el niño como un widget de texto .
• Cuando se toca el botón, se llamará a la función onPressed y establecerá el txt en «FlatButton tocado».
• Dale al botón el color verde .