Botones en Flutter

¿Cómo crear un botón RaisedButton en Flutter?

Botones en Flutter

¿Cómo crear un botón RaisedButton en Flutter?

VIDEO ¿Cómo crear un botón RaisedButton 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

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.

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.

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

En si, debemos implementar una estructura que debe tener una columna con dos filas y cada fila tendrá dos botones de tipo Raisedbutton

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.

Hasta un próximo video!!.

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Botones en Flutter?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 3368 veces | Publicado hace 1 año

Más códigos de programación en FLUTTER.

Ver scripts de FLUTTER

Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis

VER EL CURSO DE ANDROID

Programación en FLUTTER

Ejemplos y scripts de programación para tus proyectos

Lo último que estamos programando en el curso: Lector de Códigos QR ANDROID PHP MYSQL

Últimos detalles diseño y prueba de la app Lector Market Alis

Diseño y prueba final del Lector QR

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019