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.

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"),
       )
 );

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

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 😃

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

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

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

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

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

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

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

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

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

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.

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'),
          ),
        );

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.

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.

InkWell 101:

Sirve para hacer widgets toucheábles

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

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

Es como el touchableopacity o el touchablehighlight de react native.

Genial !!!
Este proyecto es tan bueno.
😄

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

Los archivos del curso no están disponible, 😭😭 arreglen eso por favor

Si alguien por alguna razón quiere usar un botón en alguna forma donde no haya un scaffold o tenga problemas con Inkwell, le aconsejo cambiar Inkwell por GestureDetector. Acá la docu: https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

a manera de informacion, para el 2024 el Snackbar se escribe:

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

El uso de Scaffold.of(context).showSnackbar esta deprecado, en su lugar ahora se usar ScaffoldMessenger de la siguiente manera:

Alignment esta super genial, tambien para hacer este
trabajo

Alignment(0,1) //abajo
Alignment(0,-1) //arriba


Alignment(1,0) //derecha
Alignment(-1,0) //izquierda

Alignment(0,0) centro


// Ejempo:
begin: Alignment.bottomLeft
end: Alignment.topRight

// que en base es:
Alignment(-1.0, 1.0) //  inicia abajo en la izquierda
Alignment(1.0, -1.0) // y termina arriba a la derecha

Hay profesores a los que tengo que poner en velocidad de 1.5x, a ella me toca bajare a 0.85x 😁

En este caso showSnackBar está obsoleto.

Scaffold.of(context).showSnackBar

Puedes cambiarlo por:

ScaffoldMessenger.of(context).showSnackBar

No se que tan practico sera en cuanto UI, pero se le puede modificar los bordes al InkWell…
.

borderRadius: BorderRadius.all(Radius.circular(30.0)),

.

return Container(
        margin: EdgeInsets.only(
            top: 30.0,
            left: 20.0,
            right: 20.0
        ),
      child: InkWell(
        borderRadius: BorderRadius.all(Radius.circular(30.0)),
          onTap: (){

            Scaffold.of(context).showSnackBar(
                SnackBar(
                    content: Text("Navegando"))
            );
            
          },
        child: buttonPurple
      ),
    );

Seria bueno volver a subir este curso al repositorio

https://api.flutter.dev/flutter/material/Colors-class.html

Me encanta como fluye el aprendizaje 😄

A mí me funcionó cambiando la línea a

ScaffoldMessage.of(context).showSnackBar(SnackBar("Text"));

Al usar la clase Scaffold el IDE me indicaba que la clase ScaffoldState no tiene definido el método showSnackBar.

Otra propiedad que se puede usar en lugar del onTap es el onPressed de hecho, me parece que es mas acorde usar onPressed en botones y onTap en otros widgets

dentro del SnackBar, tenemos un duratio, el cual le pasamos el contructor de Duration y en el podemos decirle cuanto tiempo tiene que durar. En mi caso le pedi 200 milisegundos por que no soporta un double value

const SnackBar(
            content: Text(
              "Navegation",
              style: TextStyle(
                fontFamily: "Lato",
                fontSize: 18.0,
              ),
            ),
            duration: Duration(milliseconds: 200),
          )

Hola muchachos! veo que hay varios métodos y démas cosas que estan un poco desactualizadas, pero esto se debe a que flutter cambia constantemente sus metodos a medida que avanza. En la parte de:

Scaffold.of(context).showSnackBar(SnackBar());

este metodo fue reemplazado por:

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

Si quieren mas info este es el link: ScaffoldMessenger

Hola, soy nuevo en Flutter y quiero formar un grupo de estudio, si hay alguien interesado, mi correo es: [email protected]

Para buen uso del SnackBar, podemos conseguir una modificación al uso: La **SnackBarAPI dentro de ++Scaffold ++ahora la maneja el **ScaffoldMessenger, uno de los cuales está disponible de forma predeterminada en el contexto de un MaterialApp.

Lo que quiere decir que debemos usar ScaffoldMessenger en lugar de ++Scaffold ++

GOOD:
ScaffoldMessenger.of(context).showSnackBar(SnackBar(…

BAD:
Scaffold.of(context).showSnackBar(SnackBar…

referencia: https://flutter.dev/docs/release/breaking-changes/scaffold-messenger

el metodo utilizado esta deprecado

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

esta seria la nueva manera de hacerlo

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

showSnackBar me aparece tachado, alguien me puede ayudar a solucionar ese problema:

Hay un widget que se llama GestureDetector y es mas facil de usar y tiene muchisimas opciones de interaccion ‘touch’

Felicitaciones!

tengo una duda todo eso del diseño y del botón, puede ahorrase todo eso y poniendo un vector del botón como tipo imagen y darle interacción se podría cierto ?

Tengo una consulta, en nuestro diseño, las imagenes se ven como que las que están fuera de scroll se hacen mas pequeñas. Como se hace ese efecto?

Que genial!!!

Súper!

colors: [
Color(0xFF4268D3),
Color(0xFF584CD1)
]

Para los colores hexadecimales tan solo agregan al inicio “0xFF” y pueden buscar exactamente el que buscan en https://www.rapidtables.com/web/color/RGB_Color.html

A 1.5x como mínimo!

Podemos hacer el refractor (Renombrar el archivo) dando click en el archivo deseado y presionando las teclas Shift + F6

Hola
InkWell:

Según la documentación de Flutter, es un área rectangular de la clase Material que responde al tacto.

Documentación:

InkWell
Material

Saludos

Hola tengo este problema:

AILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ‘:app:compileDebugKotlin’.

Compilation error. See log for more details

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

Excelente!

Ahora más motivado 😃

Para que funcionara el boton y no se saliera de los margenes agregue un container como habian dicho antes pero no quite el anterior.

<    return Container (
        margin: EdgeInsets.only(
          top: 30.0,
          left: 20.0,
          right: 20.0
        ),
        child: InkWell(
        onTap: () {
          Scaffold.of(context).showSnackBar(
              SnackBar(
                content: Text("Navegando"),
              )
          );
        },
        child: Container(
          height: 50.0,
          width: 180.0,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30.0),
            gradient: LinearGradient(
              colors: [
                Color(0Xff4268D3),
                Color(0Xff584CD1),
              ],
              begin: FractionalOffset(0.2, 0.0),
              end: FractionalOffset(1.0, 0.6),
              stops: [0.0, 0.6],
              tileMode: TileMode.clamp
            )
          ),
          child: Center(
            child: Text(
              buttonText,
              style: TextStyle(
                fontSize: 18.0,
                fontFamily: "Lato",
                color: Colors.white
              ),
            ),
          ),
        ),
      )
    );
> 

Estuve averigüando un poco y encontré que el Snackbar ahora lo maneja el ScaffoldMessenger, lo encontré porque me aparecía deprecado en VS Code

Acá hay más info para quien quiera ver: https://flutter.dev/docs/release/breaking-changes/scaffold-messenger

Scaffold(
  key: scaffoldKey,
  body: GestureDetector(
    onTap: () {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: const Text('snack'),
        duration: const Duration(seconds: 1),
        action: SnackBarAction(
          label: 'ACTION',
          onPressed: () { },
        ),
      ));
    },
    child: const Text('SHOW SNACK'),
  ),
);

Para los que se ponen freaky con la reusabilidad de los widgets, yo utilicé un FittedBox para que el botón se ajuste solito al largo del texto, y no dependa fijamente de la propiedad width del Container, así:

Container(
	margin: EdgeInsets.only(
		top: 25.0,
		bottom: 10.0
	),
	child: NavButton('Más información', Icons.east)
)

Y del lado del widget:

// Widget
final InkWell widget = InkWell(
      child: FittedBox(
        fit: BoxFit.fitWidth,
        child: Container(
          alignment: Alignment.center,
          padding: EdgeInsets.only(
            left: 24.0,
            right: 24.0,
            top: 15.0,
            bottom: 15.0
          ),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(100.0),
            color: Color(0xFFed204d)
          ),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                title,
                textAlign: TextAlign.left,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.0,
                  fontWeight: FontWeight.bold,
                  fontFamily: 'Nunito Sans',
                  letterSpacing: 0.4
                )
              ),
              Container(
                padding: EdgeInsets.only(
                  left: 10.0
                ),
                child: Icon(
                  icon,
                  color: Colors.white,
                  size: 21.6
                )
              )
            ]
          )
        )
      )
    );

alguien sabe como se podria conseguir que el boton sea transparente y solo se vea el color de los elementos debajo de el?