Creando botones reutilizables en Flutter

A quien pueda interesar existe una dependencia de flutter llamada flutter_signin_button 0.5.2 que agrega botones muy similares a lo que estamos creando con iconos y respetan el diseño de google, twitter, facebook etc…

Tiene para agregar un metodo onTap como queremos aca con nuestro widget personalizado, es solo una opcion mas pero me parece muy buena para futuros proyectos

Hola, comparto la forma en que me quedo el constructor, ya que no me funcionaba de la forma en que esta en el video

ButtonGreen({required this.text, required this.onPressed, this.height = 0.0, this.width = 0.0});

Así me va quedando:

Buenas amigos acá tiene una forma práctica de poner los botones de inicio de cesión que quieran, la dependencia de flutter es flutter_auth_button ^0.9.0 (ultima versión a la fecha):

Agregar la versión que este disponible a la fecha en pubspec.yaml
Obtener packetes en “get pub”
importar la libreria: import ‘package:flutter_auth_buttons/flutter_auth_buttons.dart’;
Agregar los botones dentro del children:
GoogleSignInButton(
onPressed: () {},
borderRadius: 10,
),
FacebookSignInButton(
onPressed: () {},
borderRadius: 10,
)```

Esta clase debe ir después de la clase 13 “Creación de Pantalla de Login con Flutter”.

En una columna el MainAxisAlignment es alineado vertical y el CrossAxisAlignment el alineado horizontal. En el caso de las filas es viceversa.

Sera que cabellos de fuego no explicara alguna vez como implementar firebase ui auth?

El VoidCallback no retorna nada ni recibe parámetros.
Si hay parámetros se debería usa Function

Acá les dejo los colores por si alguien los necesita!

            colors: [
              Color(0xFFa7ff84), //arriba
              Color(0xFF1cbb78) //abajo
            ],

Hola compañeros, para alinear el texto puedes usar:

textAlign: TextAlign.center

simplemente lo escribes debajo de la linea:

fontWeight: FontWeight.bold,

y listo, saludos!

Buenas clases

Al parecer el BorderRadius.circula(15.0) esta bien. Modifique lo alto del boton a 60 y creo que esta mucho mejor

Miren banda, me quedó mamalón, sí o no raza??

No entendi a que se refiere con ese {Key key} Alguna documentaci’on?

Va quedando genial!

Solo hay que cambiar el valor de esta linea de código para jugar con el radio del botón.

borderRadius: BorderRadius.circular(15.0)

y en que momento creo el archivo SingIn??? como que faltan videos!

Cual es la diferencia entre

@override
  _ButtonGrenState createState() => _ButtonGrenState();

Y el codigo que ann implemente ??

Si desean jugar más con el text les recomiendo este video:
https://youtu.be/gpWcLrcJedQ

Hola, ¿alguien podría ayudarme? El texto no me aparece centrado:

Genial! 😉

Hola a todos al escuchar el video se menciona que es genial como flutter indica en que párrafo se termina una sintaxis por ejemplo:

En el minuto 09:15 " ), // BoxDecoration " => eso a mí no me aparece en el IDE y debo mirar el cierre de paréntesis lo que lo hace engorroso ¿Hay que activar algo quizás? saludos!

😃 next! 😃

Alguno le dio error el VoidCallback

The name ‘VoidCallback’ is defined in the libraries ‘dart:html’ and ‘dart:ui’

Por si necesitan un Botón algo parecido aquí les dejo un widget que hice yo.

import 'package:flutter/material.dart';

class ButtonAp extends StatefulWidget {
  final VoidCallback onPressed;
  final String text;
  double width = 0.0;
  double height = 0.0;
  double border;

  ButtonAp({Key key, @required this.text, @required this.onPressed, this.height, this.width, this.border});

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

class _ButtonApState extends State<ButtonAp> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: widget.onPressed,
      child: Container(
        margin: EdgeInsets.only(
          top: 30.0,
          left: 20.0,
          right: 20.0,
        ),
        height: widget.height,
        width: widget.width,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(widget.border),
          color: Colors.white,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              margin: EdgeInsets.only(right: 25),
              child: Image(image: NetworkImage("https://assets.stickpng.com/thumbs/5847f9cbcef1014c0b5e48c8.png"),
                height: 35,
              ),
            ),
            Text(widget.text,
              style: TextStyle(
                color: Color(0xff848484),
                fontSize: 18,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        )
      ),
    );
  }
}

Cuando vallan a usarlo lo pueden hacer de esta manera

ButtonAp(text: "Iniciar Sesion con Google", onPressed: (){},width: 300.0, height: 50.0,border: 3.0,)```

Recomiendo que el border radius sea un double de 3.0