Widget Button, InkWell

Hola, hay un pequeño bug en el codigo. El InkWell tiene un area mas grande de la definida por los margenes, lo que genera que la zona fuera del boton sea clickeable. Esto se soluciona asi:

return Container (
      margin: EdgeInsets.only(
        top: 30.0,
        left: 20.0,
        right: 20.0
      ),
      child: InkWell(...)
);

Haciendo esto, la unica zona clickeable es la del boton, y no el background.

Anthony Will Solsol Soplin

Tienes razón, gracias, me sirvió tu observación

Usuario anónimo

User

Genial me sirvió 😃

Leonardo David Alonso Sosa

Respecto a la acción de botón el showSnackBar con scaffild ya esta deprecado, ahora se utiliza ScaffoldMessenger quedando algo así

ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
              content: Text("Navegando"),
       )
 );

Arturo Flores

Genial, muchas gracias por tu aportación.

Denis Zelaya

Gracias.

Ervic Perez Mendoza

Discusión de diseño (FractionalOffset vs Aligment) FractionalOffser y Aligment son dos representaciones diferentes de la misma información: ubicación dentro de un rectángulo en relación con el tamaño del rectángulo. La diferencia entre las dos clases está en el sistema de coordenadas que se usan para representar la ubicación. ' FractionalOffset usa un sistema de coordenadas con un origen en la esquina superior izquierda del rectángulo, mientras que Aligment usa un sistema de coordenadas con un origen en el centro del rectángulo. ' La alineación es mejor para la mayoría de los propósitos que FractionalOffset y debe usarse en lugar de FractionalOffset. Fuente: https://api.flutter.dev/flutter/painting/FractionalOffset-class.html '

Aligment (-1.0, -1.0) representa la esquina superior izquierda del rectángulo.
Aligment(1.0, 1.0) representa la esquina inferior derecha del rectángulo.
Aligment(0.0, 3.0) representa un punto que está centrado horizontalmente con respecto al rectángulo y verticalmente debajo de la parte inferior del rectángulo por la altura del rectángulo.
Aligment(0.0, -0.5) representa un punto que está centrado horizontalmente con respecto al rectángulo y verticalmente a medio camino entre el borde superior y el centro. Fuente: https://api.flutter.dev/flutter/painting/Alignment-class.html

Manuel Carbajal

Hola.

Por si alguien esta haciendo el curso actualmente (Diciembre 2021), Scaffold.of(context).showSnackBar(...)esta deprecado. Usa ScaffoldMessenger.of(context).showSnackBar(...) en su lugar :)

Luis Carlos Guzman Almanza

gracias buen apunte

cjsanchezr92

Gracias¡¡¡ :D

Joseph Michael Ciriaco Bermudez

Me enamore de Flutter! Aquí como va quedando mi app:

Andres Eduardo Peña Guerra

Felicitaciones. Buen trabajo. Aunque esa tipografía se asocia habitualmente con comida y tienen una legibilidad complicada (yo elegiría un sans-serif, je, je), el diseño general se ve muy bien.

Joseph Michael Ciriaco Bermudez

Lo tomare en cuenta, gracias Andres.

Cristian Iñiguez

Para mostrar el snack bar, usar Scaffold está deprecado, ahora se usa ScaffoldMessenger

ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Navigating ...")));

Fabian Ardila Castro

La forma de mostrar el SnackBar esta desactualizada. La manera actual es.

ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: const Text("Navegando"),
            ),
          );

Aldis Manuel Almeida Carrasquilla

Para las nuevas versiones de flutter el mensaje emergerte lo pude sacar con ScaffoldMesseger.

ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Navegando")));

Fabian Vargas

muchas graciaas

Aaron Contreras Garibay

Si no te sale el snack bar toma en cuenta lo siguiente:

Ahora showSnackBar esta en ScaffoldMessenger

por lo que quedaria asi:

onTap: (){
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text("navegando"))
        );
      },

Estoy usando:

Flutter 3.3.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 6928314d50 (10 days ago) • 2022-10-25 16:34:41 -0400
Engine • revision 3ad69d7be3
Tools • Dart 2.18.2 • DevTools 2.15.0

Ervic Perez Mendoza

les comparto estos paginas si alguien necesita colores para su gradiente. https://colorhunt.co/ https://coolors.co/d3c1c3-e2d0be-eee5bf-726f3b-d1ffc6

Altair Barahona

Gracias!

Jesus David Sanchez Suarez

Agregar contenido inicial a las variable, no es necesario ya que el constructor de la clase esta pidiéndolo de forma obligatoria, de lo contrario muestra un error.

Brayan Cardozo

Actualmente la manera de utilizar el SnackBar ya esta deprecated, ahora se usa de esta manera

ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(
            content: Text('Navegando'),
          ),
        );

Abrahan Gil

Si ya solucionaste el bug de los margenes, aqui esta mi solucion al bug que hace que el tap effect no se muestre correctamente(el color del Container se superpone y hace que no se vea el tap effect del InkWell)

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.only(top: 30.0, left: 20.0, right: 20.0),
        child: InkWell(
            onTap: () => {},
            borderRadius: BorderRadius.circular(30.0),
            child: Ink(...)));
}

Simple pero efectivo, sustituyes la clase Container que lleva el InkWell por la clase Ink.

Juan Camilo Alvarez Jurado

Experimentando con las propiedades del gradiente concluyo lo siguiente: stops define, de 0 a 1, un porcentaje del largo en que se quiere un cambio de color y requiere valores por cada color en colors. Así, esta configuración:

gradient: LinearGradient( colors: [ Colors.red, Colors.green, Colors.blue ], stops: [0.0,0.2,1],

Da este resultado (en 0 rojo, en 1/5 del ancho verde, y al final azul)

![](

Ya, en cambio, si se hace lo siguiente

stops: [0.0,0.5,1],

el segundo color (verde) debería quedar en toda la mitad:

![](

Para definir dónde inicia y dónde termina todo el rango, se define un punto x,y con valores de 0 a 1 (también como porcentajes de altura y ancho) con los FractionalOffets a las propiedades begin y end.

Juan Martín Seery

InkWell 101:

Sirve para hacer widgets toucheábles

Daniel Stiven Amador Arias

Jair Rojas Pineda

Super, como vas con Flutter, si le ha gustado?

Pablo Joaquín Cruz

Si su IDE les dice que showSnackbar está obsoleto, deben usar:

ScaffoldMessenger.of(context).showSnackBar(...);

Matias Niz

Es como el touchableopacity o el touchablehighlight de react native.

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

Genial !!!!! Este proyecto es tan bueno. :D

Francisco José Reyes José Reyes

Se comentó en la sección de las imágenes que se explicaría acerca de las coordenadas de la pantalla. ¿Hay alguna lección acerca de ello? Gracias

Ann Code

Profesor

Lo pusimos en enlaces, pero está mejor explicado en la descripción del video.

Felipe Alarcon