Bienvenida e Introducci贸n

1

隆Renovaremos este curso!

2

Desarrollando en Flutter

3

驴Qu茅 es Flutter?

4

Dart y Flutter

5

Sintaxis de Dart

6

隆Renovaremos este curso!

7

Flutter para desarrolladores Android, iOS y Xamarin.forms

8

Flutter para desarrolladores React Native

9

驴C贸mo luce una app constru铆da en Flutter?

10

Primer reto

Creando mi entorno de desarrollo

11

隆Renovaremos este curso!

12

Requerimientos de Hardware y Software

13

Instalando Flutter en Android Studio y Visual Studio Code

14

Composici贸n de un proyecto en Flutter

Interfaces en Flutter

15

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

16

Programaci贸n Declarativa en Flutter

17

Estructura de un programa en Flutter

18

Hola Mundo en Flutter

19

Widgets b谩sicos

20

Widgets con estado y sin estado

21

An谩lisis de Interfaces de Usuario en Flutter

22

Definiendo los layouts de nuestra interfaz

23

Segundo reto

Widgets sin estado en Flutter

24

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

25

Flutter Widgets: Container, Text, Icon, Row

26

Flutter Widgets: Column

27

Recursos en Flutter: Tipograf铆as y Google Fonts

28

Widget Image

29

Widget Apilando Textos

30

Widgets Decorados

31

Widget Imagen Decorada

32

Widget Listview

33

Widget Button, InkWell

34

Tercer reto

Widgets con estado en Flutter

35

隆Renovaremos este curso! Te quedan unos d铆as para concluirlo.

36

Botones en Flutter

37

Clase StatefulWidget: C贸mo se compone

38

Widget Floating Action Button

39

Widgets BottomNavigationBar

40

Generando Navegaci贸n en BottomNavigationBar

41

Personalizando nuestro BottomNavigation Bar a Cupertino iOS BottomBar

42

Cuarto reto

Fin del Curso

43

隆Renovaremos este curso!

44

Conclusiones

45

隆Terminamos!

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Flutter

Curso de Flutter

Anah铆 Salgado D铆az de la Vega

Anah铆 Salgado D铆az de la Vega

Widget Button, InkWell

33/45
Recursos

Aportes 58

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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

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

Me encanta como fluye el aprendizaje 馃槃

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


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

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 鈥榯ouch鈥

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?