Botones en Flutter

Diseño e implementación de uno o varios botones widgets RaisedButton en Flutter, además veremos la forma de agregar estilos como color, tamaño de letra

Implementación de botones en Flutter, en esta ocasión veremos 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.

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.

El código 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.

Hasta un próximo video!!.

VIDEO Cómo crear un botón RaisedButton en Flutter

Visitas: 563 | Publicado:2018-12-31 12:23:21

Más publicaciones de Flutter que te pueden interesar:

Facebook Twitter Youtube Pinterest Wordpress Google Plus

:: Calle Paucarpata 130 Of. 212 2do Piso CC. AQPcompucentro ::
:: © Todos los derechos reservados APPTIVA WEB | Arequipa Perú 2010-2018 ::