Contenido del curso
Widget Button, InkWell
Linus Toolbar
Estudiante
Anthony Will Solsol Soplin
Estudiante
Usuario anónimo
User
Leonardo David Alonso Sosa
Estudiante
Arturo Flores
Estudiante
Denis Zelaya
Estudiante
Ervic Perez Mendoza
Estudiante
Manuel Carbajal
Estudiante
Luis Carlos Guzman Almanza
Estudiante
cjsanchezr92
Estudiante
Joseph Michael Ciriaco Bermudez
Estudiante
Andres Eduardo Peña Guerra
EstudianteJoseph Michael Ciriaco Bermudez
Estudiante
Cristian Iñiguez
Estudiante
Fabian Ardila Castro
Estudiante
Aldis Manuel Almeida Carrasquilla
Estudiante
Fabian Vargas
Estudiante
Aaron Contreras Garibay
EstudianteErvic Perez Mendoza
Estudiante
Altair Barahona
Estudiante
Jesus David Sanchez Suarez
Estudiante
Brayan Cardozo
Estudiante
Abrahan Gil
Estudiante
Juan Camilo Alvarez Jurado
Estudiante
Juan Martín Seery
EstudianteDaniel Stiven Amador Arias
EstudianteJair Rojas Pineda
Estudiante
Pablo Joaquín Cruz
Estudiante
Matias Niz
Estudiante
JUAN SEBASTIAN RODRIGUEZ JIMENEZ
Estudiante
Francisco José Reyes José Reyes
Estudiante
Ann Code
Profesor
Felipe Alarcon
EstudianteHola, 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.
Tienes razón, gracias, me sirvió tu observación
Genial me sirvió 😃
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"), ) );
Genial, muchas gracias por tu aportación.
Gracias.
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 :)
gracias buen apunte
Gracias¡¡¡ :D
Me enamore de Flutter! Aquí como va quedando mi app:
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.
Lo tomare en cuenta, gracias Andres.
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")));
muchas graciaas
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
Gracias!
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
Super, como vas con Flutter, si le ha gustado?
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. :D
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
Lo pusimos en enlaces, pero está mejor explicado en la descripción del video.
Hola @frankfullstack, encontraste esa descripcion de como funcionan las coordenadas en una pantalla? Me la podrias compartir por fa? la busque por todo lado pero no la encontre
