Veremos ¿Cómo programar un botón en Flutter?

Veremos la implementación de botones en Flutter, usaremos el widget RaisedButton, debemos aclarar que existen más widgets del tipo button en Flutter. Sigamos.

Cada elemento en Flutter es un widgets para entenderlo mejor diremos que son componentes.

¿Cómo implementar botones con el SDK de Flutter?

Lo que haremos es crear un nuevo proyecto Flutter en Android Studio previamente instalado el SDK de Flutter, luego procedemos a borrar practicamente todo el código que por default nos trae el SDK de Flutter al momento de crear el Proyecto.

Utlizaremos en widget RaisedButton de Flutter para este ejemplo, de hecho existen muchos más.

Código de un botón en Dart con el SDK Flutter

En si, vamos a implementar un botón con el widget Raisedbutton.  Veamos un ejemplo sencillo:

new RaisedButton(
                    color: Colors.red,
                    textColor: Colors.white,
                    child: Text(
                      "BOTON",
                      style: TextStyle(
                        fontSize: 20.0,
                      ),
                    ),
                    
onPressed: () {
// codigo del la acción a realizar
}),

Código de varios botones en una interfaz en Flutter

Ahora en una interfaz con una distribución de dos botones por fila y n columnas, El código en el lenguaje Dart del archivo main.dart

Es el siguiente:

import 'package:flutter/material.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: 'Implementar botones en flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
          body: Container(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                new RaisedButton(
                    color: Colors.indigo,
                    textColor: Colors.white,
                    child: Text(
                      "IZQUIERDA",
                      style: TextStyle(
                        fontSize: 20.0,
                      ),
                    ),
                    onPressed: () {}),
                new RaisedButton(
                    color: Colors.indigo,
                    textColor: Colors.white,
                    child: Text(
                      "DERECHA",
                      style: TextStyle(
                        fontSize: 20.0,
                      ),
                    ),
                    onPressed: () {}),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                new RaisedButton(
                    color: Colors.indigo,
                    textColor: Colors.white,
                    child: Text(
                      "IZQUIERDA",
                      style: TextStyle(
                        fontSize: 20.0,
                      ),
                    ),
                    onPressed: () {}),
                new RaisedButton(
                    color: Colors.indigo,
                    textColor: Colors.white,
                    child: Text(
                      "DERECHA",
                      style: TextStyle(
                        fontSize: 20.0,
                      ),
                    ),
                    onPressed: () {}),
              ],
            )

          ],
        ),
      )),
    );
  }
}

Mira el video para que puedas seguir desde el inicio este pequeño minitutor, 

Explicando, tratamos de colocar 4 botones, que por ahora no tienen interactividad, para disponer la ubicación de los botones es decir 2 y 2 debemos utilizar new Colum y new Row o simplemente row, cabe destacar que aplicar diseño a los botones es muy similar a agregar estilos CSS.

Otra versión para crear botones anidados en Flutter

import 'package:flutter/material.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: 'Botones',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: PantallaInicio(),
    );
  }
}

class PantallaInicio extends StatefulWidget {

  @override
  _PantallaInicioState createState() => _PantallaInicioState();
}

class _PantallaInicioState extends State<PantallaInicio> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                _boton("Boton 1"),
                _boton("Boton 2")
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                _boton("Boton 3"),
                _boton("Boton 4")
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                _boton("Boton 5"),
                _boton("Boton 6")
              ],
            )
          ],
        ),
      ),
    );
  }

}
Widget _boton(String texto) {
  return RaisedButton( 
      child:Text(texto, style: TextStyle(color: Colors.white),),
      color: Colors.red,
      elevation: 20,
      padding: EdgeInsets.all(50),
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
          side: BorderSide(color: Colors.deepOrange),
      ),
      onPressed: ()=>{
        // use pageroute para lanzar a otra ventana
        print("BOTON: " +texto)
      },
  );
}

Hasta un próximo video!!.