Widget Button, InkWell

Linus Toolbar

student•

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

student•

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

Usuario anónimo

user•

Genial me sirvió 😃

Leonardo David Alonso Sosa

student•

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

student•

Genial, muchas gracias por tu aportación.

Denis Zelaya

student•

Gracias.

Ervic Perez Mendoza

student•

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

student•

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

student•

gracias buen apunte

cjsanchezr92

student•

Gracias¡¡¡ :D

Alison Alejandra Mendoza Catalán

student•

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

Andres Eduardo Peña Guerra

student•

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.

Alison Alejandra Mendoza Catalán

student•

Lo tomare en cuenta, gracias Andres.

Cristian Iñiguez

student•

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

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

Fabian Ardila Castro

student•

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

student•

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

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

Fabian Vargas

student•

muchas graciaas

Aaron Contreras Garibay

student•

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

student•

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

Altair Barahona

student•

Gracias!

Jesus David Sanchez Suarez

student•

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

student•

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

student•

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

student•

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

student•

InkWell 101:

Sirve para hacer widgets toucheábles

Daniel Stiven Amador Arias

student•

Jair Rojas Pineda

student•

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

Pablo Joaquín Cruz

student•

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

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

Matias Niz

student•

Es como el touchableopacity o el touchablehighlight de react native.

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

student•

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

Francisco José Reyes José Reyes

student•

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

teacher•

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

Felipe Alarcon

student•

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

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

  @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(...)));
}

Widget Button, InkWell

Bienvenida e Introducción

¡Renovaremos este curso!

Desarrollando en Flutter

¿Qué es Flutter?

Dart y Flutter

Sintaxis de Dart

¡Renovaremos este curso!

Flutter para desarrolladores Android, iOS y Xamarin.forms

Flutter para desarrolladores React Native

¿Cómo luce una app construída en Flutter?

Primer reto

Creando mi entorno de desarrollo

¡Renovaremos este curso!

Requerimientos de Hardware y Software

Instalando Flutter en Android Studio y Visual Studio Code

Composición de un proyecto en Flutter

Interfaces en Flutter

¡Renovaremos este curso! Te quedan unos días para concluirlo.

Programación Declarativa en Flutter

Estructura de un programa en Flutter

Hola Mundo en Flutter

Widgets básicos

Widgets con estado y sin estado

Análisis de Interfaces de Usuario en Flutter

Definiendo los layouts de nuestra interfaz

Segundo reto

Widgets sin estado en Flutter

¡Renovaremos este curso! Te quedan unos días para concluirlo.

Flutter Widgets: Container, Text, Icon, Row

Flutter Widgets: Column

Recursos en Flutter: Tipografías y Google Fonts

Widget Image

Widget Apilando Textos

Widgets Decorados

Widget Imagen Decorada

Widget Listview