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

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
17H
26M
27S
Curso de Flutter

Curso de Flutter

Anah铆 Salgado D铆az de la Vega

Anah铆 Salgado D铆az de la Vega

Widget Floating Action Button

38/45
Recursos

Como vimos en la clase anterior, para que un widget sea capaz de responder a la interacci贸n con el usuario y en funci贸n de esa interacci贸n pueda cambiar su comportamiento o algunas de sus propiedades, este debe ser definido inicialmente como un StatefulWidget.

En esta clase aprenderemos a construir, personalizar y darle comportamiento a un Floating Action Button, nuestro widget de tipo Statful, o con estado.

Este widget, tambi茅n conocido como Fab, es muy com煤n en las interfaces m贸viles basadas en Material Design y generalmente representan al elemento de principal interacci贸n esperada en la interfaz, equivale a un Call to action.

La sintaxis b谩sica de un Stateful Widget, es:

import 'package:flutter/material.dart';

class <nombre del widget> extends StatefulWidget {
  @override
  State createState() {
  return _();
  }
}

class _<nombre del widget> extends State<<nombre del widget>> {
  void (){
    // TODO: interaction code
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return (
      ... 
      onPressed: ,  // --- sin par茅ntesis
      ...
    );
  }

}

Aportes 110

Preguntas 11

Ordenar por:

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

o inicia sesi贸n.

Alternando entre coraz贸n relleno y vac铆o.

import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FloatingActionButtonGreen();
  }
}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {

  bool _pressed = false;

  void _onPressedFav() {
    setState(() {
      _pressed = !this._pressed;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: _onPressedFav,
      child: Icon(
         this._pressed ? Icons.favorite : Icons.favorite_border
      ),
    );
  }

}```

Agregar y quitar favoritos:

import 'package:flutter/material.dart';

class FloatingActinButtonGreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FloatingActinButtonGreen();
  }

}


class _FloatingActinButtonGreen extends State<FloatingActinButtonGreen> {

  bool _pressed = false;

  void onPressedFav(){
    setState(() {
      _pressed = !this._pressed;
    });
    Scaffold.of(context).showSnackBar(
        SnackBar(
          content: this._pressed ? Text("Agregaste a tus favoritos") : Text("Quitaste de tus favoritos")
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: Icon(
        this._pressed ? Icons.favorite: Icons.favorite_border
      ),
    );
  }
}

hola que tal una consulta e visto que muchas veces usas un aligment sobre un container o sobre un stack por ejemplo en esta clase pones la posicion de x / y realmente funciona pero mi consulta es por ejemplo

porque solo se ven afectados por ejemplo en este caso el boton y no toda la tarjeta ( ejemplo ) por ejemplo en este fragmento

    return Stack(
      alignment: Alignment(0.9, 1.1),
      children: <Widget>[
        card,
      FloatingActionButtonGreen()
      ],
    );```
 entiendo todo pero no encuentro la logica de porque solo se ve reflejado el cambio en el  boton y no en la tarjeta .. 

Les comparto mi soluci贸n para que guarde el estado incluso al hacer scroll. Usamos un mixin llamado AutomaticKeepAliveClientMixin.

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> with AutomaticKeepAliveClientMixin {

  IconData icon;

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
    this.icon = Icons.favorite_border;
  }

  void onFavPressed() {
    setState(() {
      if(this.icon == Icons.favorite_border) {
        this.icon = Icons.favorite;
      } else {
        this.icon = Icons.favorite_border;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: Color(0xFF11FA53),
      mini: true,
      tooltip: 'Favorite',
      child: Icon(
        this.icon
      ),
      onPressed: onFavPressed,
    );
  }

}


Result

Saludos,
Quiero hacer un aporte: Anah铆 en el v铆deo pasado y en 茅ste confunde el tipo gen茅rico que hay que especificar al heredar de la clase State con colecci贸n. Si bien los tipos gen茅ricos se usan mucho en las colecciones, la definici贸n correcta de un tipo gen茅rico es programaci贸n basada en un tipo general y no en uno espec铆fico. Ejemplo:

class Test<T> {
  T obj;
  Test(T obj) {
    this.obj = obj;
  }
  T getObject() {
    return this.obj;
  }
}
 
main() {
  Test<String> t1 = Test<String>("Hola Mundo");
  print(t1.getObject());
}

Listo!


import 'package:flutter/material.dart';

class FloatingButton extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {

    return _FloatingButton();

  }

}


class _FloatingButton extends State<FloatingButton> {

  bool isFavorite = false;
  IconData buttonIcon = Icons.favorite_border;

  void onPressedFav() {

    if (isFavorite == false) {

      Scaffold.of(context).showSnackBar(

          SnackBar(

            content: Text("Agregado a favoritos"),

          )

      );

      setState(() {

        isFavorite = true;
        buttonIcon = Icons.favorite;

      });

    } else {

      Scaffold.of(context).showSnackBar(

          SnackBar(

            content: Text("Eliminado de favoritos"),

          )

      );

      setState(() {

        isFavorite = false;
        buttonIcon = Icons.favorite_border;

      });

    }

  }

  @override
  Widget build(BuildContext context) {

      return FloatingActionButton(
        
          backgroundColor: Color(0xFF11DA53),
          mini: true,
          tooltip: "Favorite",
          onPressed: onPressedFav,
          child: Icon(buttonIcon),
        
      );

  }


}```

Referencia: https://flutter.dev/docs/development/ui/interactive

import 'package:flutter/material.dart';

class FloatingActionButtonYellow extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FloatingActionButtonYellow();
  }

}


class _FloatingActionButtonYellow extends State<FloatingActionButtonYellow>{

  bool _isFavorited = true;

  void onPressedFav(){
    Scaffold.of(context).showSnackBar(
        SnackBar(
          content:
          _isFavorited?
          Text("Agregado a tus favoritos"):
          Text("Quitaste de tus favoritos")
        )
    );
    setState(() {
      if(_isFavorited){
        _isFavorited = false;
      } else {
        _isFavorited = true;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Colors.amberAccent,
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: Icon(
        _isFavorited?
        Icons.favorite_border :
        Icons.favorite
      ),
    );
  }

}```

Reto resuelto

COdigo

import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget {
  // @override
  // State<StatefulWidget> createState() {
  //   // TODO: implement createState
  //   return _FloatingActionButtonGreen();
  // }

  @override
  _FloatingActionButtonGreen createState() => _FloatingActionButtonGreen();



 
}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {

    bool _isFavorited = false;
    String mensaje = "";

  void onPressedFav(){
    setState(() {
      if( _isFavorited ){
        _isFavorited = false;
        mensaje = "Eliminado de tus favoritos";
      }else{
        mensaje = "Agregado a tus favoritos";
        _isFavorited = true;
      }
    });
    Scaffold.of(context)
      .showSnackBar(
        SnackBar(
                  content: Text(mensaje)
                ));
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: Icon(
        (_isFavorited ? Icons.favorite : Icons.favorite_border)
      ),
    );
  }
}

Listo鈥!

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {

  bool added = false;

  void onPressedFav() {

    setState(() {
      added = !added;
    });

    Scaffold.of(context).showSnackBar(
        SnackBar(
            content: Text(added ? "Agregado a favorito": "Ya no es favorito")
        )
    );


  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "FAB",
      onPressed: onPressedFav,
      child: Icon(
        added ? Icons.favorite : Icons.favorite_border,
      ),
    );
  }

}
import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FloatingActionButtonGreen();
  }

}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {

  bool _favorite = false;

  void onPressedFav() {
    setState(() {
      _favorite = !_favorite;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: Icon(
        _favorite ? Icons.favorite : Icons.favorite_border
      )
    );
  }

}

Todo bien con todas las soluciones brindadas, pero si mov茅s el ListView de un extremo a otro el bool se vuelve a false y el 铆cono cambia. Alguna soluci贸n?

En esta linea de codigo tenemos el alignment , pero tengo duda de porque solo afecta a un elemento y no a todos?

   return Stack(
      alignment: Alignment(0.9,1.1),
      children: <Widget>[
        card,
        FloatingActionButtonGreen()
      ],
    );```

Aqui les dejo mi resoluci贸n 馃槃, tambi茅n agregue un widget con estado a la p谩ctalla del listado de profesionales. En dicha pantalla el bot贸n esta creado conn una widget Ink e InkWell y el cambio de color lo hace cambiando de estado una variable y luego us谩ndola en un if ternario

Solo hab铆a que modificar el m茅todo 鈥渙nPressed鈥 que se asocia al bot贸n y agregar una condicional a los colores de fondo y contorno del icono. En si , todo se hace en la clase que hereda de State

var isPressed = false;

  void onPressedFav(){

    setState(() {
      isPressed = !isPressed;

      Scaffold.of(context).showSnackBar(
          SnackBar(
            content: Text( isPressed?"Agregaste a tus favoritos.":"Lo quitaste de favoritos"),
          )
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return FloatingActionButton(
        backgroundColor: isPressed?Color(0xFF11DA53):Colors.yellow,
        mini: true,
        tooltip: "Fav",
        onPressed: onPressedFav,
        child: Icon(
            Icons.favorite_border,
            color: !isPressed?Colors.white:Colors.black
        )
    );
  }

Listo esta porci贸n de c贸digo va en el m茅todo onPressedFav

    setState(() {
      //press = press ?false :true;
      press = !press;
    });

Y esta parte en FloatingActionButton

child: Icon(
          this.press ?Icons.favorite :Icons.favorite_border
      ),

El resultado:

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {

  bool isFavorite = false;

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      /** No debe llevar parentesis **/
      onPressed: onPressedFab,
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fab",
      child: Icon(
        this.isFavorite ? Icons.favorite : Icons.favorite_border
      ),
    );
  }

  void onPressedFab() {
    setState(() {
      this.isFavorite = !this.isFavorite;
    });
    Scaffold.of(context).showSnackBar(
        SnackBar(
          content: Text(this.isFavorite ? "Agregado a tus favoritos" : "Eliminado de tus favoritos"),
        )
    );
  }

}

Para poner los iconos en like y dislike pueden hacerlo as铆:

馃榾


  IconData currentIcon = Icons.favorite_border;

  @override
  Widget build(BuildContext context) {

    return FloatingActionButton(
      backgroundColor: Colors.lime,
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: Icon(
        currentIcon
      ),


    );
  }

  void onPressedFav () {

    if (currentIcon.toString() == "IconData(U+0E722)") {
      setState(() {
        currentIcon = Icons.favorite;
        snackBar("Agregado a Favoritos");
      });
    }

    else  {
      setState(() {
        currentIcon = Icons.favorite_border;
        snackBar("Quitado de favoritos");
      });
    }
  }

  void snackBar (textFav) {
    Scaffold.of(context).showSnackBar(
        SnackBar(
          content: Text(textFav),
        )
    );
  }

Mi c贸digo alternando icons

class _FloatingActionButtonGreenState extends State<FloatingActionButtonGreen> {
  bool _press = false;

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: Icon(
        _press?Icons.favorite:Icons.favorite_border
      ),
    );
  }

  void onPressedFav() {
    setState(() {
      _press = !this._press;
    });
    Scaffold.of(context).showSnackBar(SnackBar(content: Text(_press?"Agregaste a tus Favorito":"Eliminaste de tus Favoritos")));
  }
}

class _FloatingButton extends State<FloatingButton>{

  bool select=false;

  void accionBoton(){
    setState(() {
      select=!select;//cambia el estao de seleccionado
    }
    );
    select?Scaffold.of(context).showSnackBar(SnackBar(content: Text("Agregado Fav"))):Scaffold.of(context).showSnackBar(SnackBar(content: Text("Eliminado de Fav")));
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true, // tana帽o del botton
      tooltip: "Boton Flotante",//mensaje flotante l posicionarse ensima del boton
      onPressed: accionBoton,//llama el metodo creado
      child: Icon(
        select?Icons.favorite:Icons.favorite_border//condicional que cambia el icono dependiendo el estado
      ),
    );
  }
}```
import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FloatingActionButtonGreen();
  }

}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen>{

  bool state= false;

  void onPressedFav(){
    setState(() {
      state = !state;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: Icon(
        state?Icons.favorite:Icons.favorite_border
      ),
    );
  }

}

Agregar y Desagregar Favoritos.

import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyFloatingActionButtonGreen();
  }

}

class _MyFloatingActionButtonGreen extends State<FloatingActionButtonGreen>{

  bool iconstate = false;

  Icon favorito = Icon(
    Icons.favorite_border
  );

  @override
  Widget build(BuildContext context) {

    void onPressedFav(){
      setState(() {
        if(iconstate == false){
          favorito = Icon(
              Icons.favorite
          );
          Scaffold.of(context).showSnackBar(
              SnackBar(
                  content: Text('Agregaste a tus Favoritos')
              )
          );
          iconstate = true;
        }else{
          favorito = Icon(
              Icons.favorite_border
          );
          Scaffold.of(context).showSnackBar(
              SnackBar(
                  content: Text('Eliminaste de tus Favoritos')
              )
          );
          iconstate = false;
        }
      });
    }

    return  FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: 'Fav',
      onPressed: onPressedFav,
      child: favorito
    );
  }

}

Aqu铆 mi aporte, al presionar por primera vez se marca como favorito cambiando el color, icono y mensaje del Snackbar, al presionar nuevamente se cambia nuevamente el color, icono y mensaje:

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {

  //Defaults
  bool isFavorite = false;
  Color currentColor = Color(0xFF11DA53);
  String currentMessage = "Agregado a favoritos";
  IconData currentIcon = Icons.favorite_border;

  void onPressedFav() {
    setState(() {
      if(isFavorite) {
        currentColor = Color(0xFF11DA53);
        isFavorite = false;
        currentMessage = "Eliminado de favoritos";
        currentIcon = Icons.favorite_border;
      } else {
        currentColor = Colors.red;
        isFavorite = true;
        currentMessage = "Agregado a favoritos";
        currentIcon = Icons.favorite;
      }
    });

    Scaffold.of(context).showSnackBar(
        SnackBar(
            content: Text(currentMessage),
          duration: Duration(milliseconds: 500),
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return FloatingActionButton(
      backgroundColor:  currentColor,
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: Icon(
          currentIcon
      )
    );
  }

}

Ah铆 qued贸

import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget {
  _FloatingActionButtonGreen createState() => _FloatingActionButtonGreen();
}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {
  bool _pressed = false;

  void onPressedFav() {

    Scaffold.of(context).showSnackBar(
      SnackBar(
        content: Text(_pressed ? 'Favorito' : 'Eliminado'),
      ),
    );

    setState(() {
      _pressed = !_pressed;
    });
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      child: Icon(
        _pressed ? Icons.favorite : Icons.favorite_border,
      ),
      onPressed: onPressedFav,
    );
  }
}

Cambio de 铆cono:

import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _FloatingActionButtonGreen();
  }

}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {

  bool isFavButtonPressed = false;

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFavorite,
      child: heartIconWidget(),
    );
  }

  Widget heartIconWidget(){
    return new Icon(
      isFavButtonPressed ? Icons.favorite : Icons.favorite_border,
    );
  }

  void onPressedFavorite(){
    setState(() {
      isFavButtonPressed = !this.isFavButtonPressed;
    });
  }

}
import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _FloatingActionButtonGreen();
  }
}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {
  
  bool favorite = false;

  void onPressedButton() {
    setState((){
      favorite = !favorite;
    });

    var markAs = favorite ? "Marcado" : "Desmarcado";

    Scaffold.of(context).showSnackBar(
      SnackBar(content: Text("$markAs como Favorito"))
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: onPressedButton,
      backgroundColor: Colors.green,
      child: favorite ? Icon(Icons.favorite) : Icon(Icons.favorite_border),
    );
  }
}
bool _isFavorite = false;

  void onPressedFav(){
    setState(() {
      _isFavorite = !_isFavorite;
    });
    Scaffold.of(context).showSnackBar(
        SnackBar(
            content: _isFavorite ? Text("Added to favorites") : Text("Deleted from favorites")
        )
    );
import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _FloatingActionButtonGreen();
  }
}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {
  bool _isFavorited = false;

  void _toggleFavorite() {
    Scaffold.of(context).showSnackBar(
        SnackBar(
          content: Text("Agregaste a tus favoritos"),
        )
    );

    setState(() {
      _isFavorited = !_isFavorited;
    });
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      child: (_isFavorited ? Icon(Icons.favorite) : Icon(Icons.favorite_border)),
      onPressed: _toggleFavorite,
    );
  }

}```

Para poder crear la estructura de forma mas r谩pida yo escribo en el ide 鈥渟tful鈥 enter y listo
para hacer una clase que herede solo de StatelessWidget solo escribo stless y enter

import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FloatingActionButtonGreen();
  }

}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen>{

  bool favAdded = false;

  void onPressedFav(){
    setState(() {
      favAdded = !favAdded;
    });
    Scaffold.of(context).showSnackBar(
        SnackBar(
          content: Text("Added to favorites"),
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: 'Fav',
      onPressed: onPressedFav,
      child: Icon(favAdded?
        Icons.favorite: Icons.favorite_border,
      color: favAdded?
        Colors.white:Colors.white,
      )
    );
  }
}


Listoooo!!!
fue simple, para los que no entiendan a煤n es f谩cil.
solo se debe de agregar una condicional pre definida en un booleano o mejor dicho bool,
ya definido eso solo se aplica la l贸gica, como si estuvieran ocupando un if
as铆:

`import 鈥榩ackage:flutter/material.dart鈥;

class FloatingActingButtonGreen extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _FloatingActingButtonGreen();
}

}

class _FloatingActingButtonGreen extends State<FloatingActingButtonGreen>{

//condicional pre-definida
bool added = false;

void onPressedFav(){

//Con setState se logra hacer el cambio de estado
setState(() {
added = !added;
});

// Aqu铆 traduciendo lo que dice: Que es added?, si es verdadero se a帽ade a fav, si no se quita, eso es todo
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text( added ? 鈥淎帽adido a favoritos鈥 : 鈥淨uitado de favoritos鈥),
)
);
}

@override
Widget build(BuildContext context) {
// TODO: implement build
return FloatingActionButton(
backgroundColor: Color(0xFF11DA53),
mini: true,
tooltip: 鈥淔av鈥,
onPressed: onPressedFav,
//Aqu铆 se aplica la misma l贸gica con color e icono
child: Icon( added?
Icons.favorite : Icons.favorite_border,
color: added? Colors.redAccent : Colors.white,
),
);
}

}`

<code>

class Fab extends StatefulWidget {
  @override
  _FabState createState() => _FabState();
}

class _FabState extends State<Fab> {
  bool _active = false;
  var _icon = Icon(Icons.favorite_border);

  void onPressedFab() {
    this.setState(() {
      _active = !_active;
    });

    if (_active) {
      _icon = Icon(Icons.favorite);
    } else {
      _icon = Icon(Icons.favorite_border);
    }

    Scaffold.of(context)
        .showSnackBar(SnackBar(content: Text('Agregaste a favoritos')));
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: Colors.deepPurpleAccent,
      mini: true,
      tooltip: 'Fab',
      onPressed: this.onPressedFab,
      child: _icon,
    );
  }
}

adjunto mi c贸digo y el link de la documentaci贸n de flutter de donde me base.

https://flutter.dev/docs/development/ui/interactive

Hecho!!

En la actualidad showSnackBar esta deprecated, pero podemos usar:

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

Hola estoy retomando flutter les dejo como lo solucione
![](```

import 'package:flutter/material.dart';

class FloatingActButton extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _FloatingActButton();
  }

}

class _FloatingActButton extends State<FloatingActButton>{

  bool activeIcon = false;

  void onPressedFav(){
    setState(() {
      activeIcon = !activeIcon;
    });
    ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
            content: Text("Mi Favorito!!"),
          backgroundColor: Colors.indigo,
        )
    );
  }

  getIcon(){
    return Icon(
        activeIcon ? Icons.favorite_outlined : Icons.favorite_border
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: getIcon()
    );

  }

}

Saludos compa帽eros, les comparto mi c贸digo: https://github.com/ioviedodev/trip_app

Esta es mi versi贸n. Le hice un par de agregados para que el color del bot贸n y el 铆cono tambi茅n cambiara (se invirtieran) seg煤n si est谩n seleccionados como favoritos o no.

 IconData IconFav = Icons.favorite_border;
  Color ColorBack = Color(0xFF11DA53);
  Color ColorIcon = Colors.white;

  void onPressedFav(){
    ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text("Favoritando"),
        ),
    );
    setState(() {
      if(IconFav == Icons.favorite_border){
        IconFav = Icons.favorite;
        ColorBack = Colors.white;
        ColorIcon = Color(0xFF11DA53);
      }else{
        IconFav = Icons.favorite_border;
        ColorBack = Color(0xFF11DA53);
        ColorIcon = Colors.white;
      }

    });
  }

Resultado:

hola, la clase de wiget imagen decorado no se puede visualizar o descargar de los 3 servidores.
import 'package:flutter/material.dart';
class FloatinActionButtonGreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FloatinActionButtonGreen();
  }

}
class _FloatinActionButtonGreen extends State<FloatinActionButtonGreen>{
  bool _pressed=false;

  void onPressedFav(){
    _pressed=!_pressed;


    setState(() {


      ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
        content: Text(
            ((this._pressed)? 'Agregaste a ':'Eliminaste de ')+'tus favoritos'
        ),
      )
          );
    });
     }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
        backgroundColor: Color(0xFF11DA53) ,
        mini: true,
        tooltip: "Fav",
        child: Icon(
            (_pressed)? Icons.favorite:Icons.favorite_border
        ),
        onPressed: onPressedFav);
  }
  
}

Aqu铆 est谩 mi versi贸n 馃槃 No es tan complicado! 馃槃 Me encanta :3

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {
  bool _isFav = false;

  void onPressedFav() {
    setState(() {
      _isFav = !_isFav;
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(
              _isFav ? "Agregado a Favoritos! :D" : "Fuera de favoritos! :D"),
          duration: const Duration(seconds: 2),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: const Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: _isFav
          ? const Icon(
              Icons.favorite,
              color: Colors.white,
            )
          : const Icon(Icons.favorite_border_outlined),
    );
  }
}

As铆 qued贸 mi implementaci贸n:

y este el el c贸digo:

var isFav = false;
  var icon =  Icon(Icons.favorite_border);

  void onPressedFav(){
    setState(() {
      if(isFav){
        isFav = false;
        icon =  Icon(Icons.favorite_border);
        Scaffold.of(context).showSnackBar(
          const SnackBar(
            content: Text("removed to favs"),
            backgroundColor: Color(0xff11DA53),
          ),
        );
      }
      else{
        isFav = true;
        icon =  Icon(Icons.favorite);
        Scaffold.of(context).showSnackBar(
          const SnackBar(
            content: Text("added to favs"),
            backgroundColor: Color(0xff11DA53),
          ),
        );
      }
    });

  }

Mi soluci贸n para intercalar entre favoritos y no favoritos:

<import 'package:flutter/material.dart';

class FloatingButtom extends StatefulWidget {
  const FloatingButtom({Key? key}) : super(key: key);

  @override
  _FloatingButtomState createState() => _FloatingButtomState();
}

class _FloatingButtomState extends State<FloatingButtom> {
  @override

  bool favorite = false;

  void onPressedFav(){
    setState(() {
      favorite = !favorite;
    });
  }

  Widget build(BuildContext context) {
    return FloatingActionButton(
        backgroundColor: Color(0xFF11DA53),
        mini: true,
        tooltip: "Fav",
        onPressed: onPressedFav,
        child: Icon(
          favorite ? Icons.favorite:Icons.favorite_border,
          color: Colors.blue,
        ),
      );
  }
}
> 

Escribiendo stful y pulsando tab, es un snipset para crear una clase StatefulWidget, y te ahorras escribir mucho c贸digo.

Probe dejando directamente en setState() el cambio de las variables que modificara el bot贸n, el icono, el color y el mensaje de snackBar, pero no se hasta que punto sea buena o mala pr谩ctica hacerlo as铆 馃

import 'package:flutter/material.dart';

class FloatingActionButtonPink extends StatefulWidget {

  @override
  _FloatingActionButtonPinkState createState() => _FloatingActionButtonPinkState();
}

class _FloatingActionButtonPinkState extends State<FloatingActionButtonPink> {

  dynamic icon;
  dynamic color;
  String snackText = ' ';
  bool state = false;

  void onPressedFav(){

    setState(() {
      state = !state;
      if(state){
        icon = Icons.favorite;
        color = Colors.pink;
        snackText = 'A帽adido a favoritos';
      }else{
        icon = Icons.favorite_border;
        color = Colors.pinkAccent;
        snackText = 'Removido de favoritos';
      }
    });

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
          content: Text(snackText)
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: color,
      mini: true,
      tooltip: 'fav',
      onPressed: onPressedFav,
      child:
        Icon(icon),
    );
  }
}

Me quedo esto:

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen>{
  int _state = 0;
  List<IconData> _icon = [Icons.favorite_border, Icons.favorite];
  List<String> _msg = ["Removed from your favorites", "Added to your favorites"];

  void onPressedFav(){
    setState(() {
      _state = (_state == 1)? 0 : 1;
    });
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text(_msg[_state]),
    ));
  }
  
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: Icon(
        _icon[_state],
      ),
    );
  }
}

Hice la alternancia entre el icono relleno y vac铆o, pero, adem谩s le puse una funci贸n en el snackbar para hacer 鈥淯ndo鈥. Es esta por si la quieren ver 馃槃

class _floatingButton_Card_Image extends State<floatingButton_Card_Image> {
  bool _isFull = false;

  void onPressedFav() {
    setState(() {
      _isFull = !_isFull;
    });
    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text("Agregaste a tus favoritos"),
      action: SnackBarAction(
        label: "Undo",
        onPressed: () {
          setState(() {
            _isFull = !_isFull;
          });
        },
      ),
    ));
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
        backgroundColor: Color(0xFF11DA53),
        mini: true,
        tooltip: "favorite",
        child: Icon(this._isFull ? Icons.favorite : Icons.favorite_border),
        onPressed: onPressedFav);
  }
}

La raz贸n por la cual no el m茅todo al asignarlo a la propiedad onPressed no lleva los par茅ntesis es porque lo que se pasa es la referencia al m茅todo, no la ejecuci贸n del mismo.

Mi solucion para cambiar estado del boton:

import 鈥榩ackage:flutter/material.dart鈥;

class FloatingActionButtonGreen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _FloatingActionButtonGreen(); // Hace que retorne el estado de la otra funcion
}
}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {
// Obligatorio para stateful widgets

bool selected = true;

void onPressedFav() {
Scaffold.of(context).showSnackBar(SnackBar(
content: Text(鈥淎gregado a favoritos鈥),
));

setState(() {
  selected = !selected;
});

}

@override
Widget build(BuildContext context) {
// TODO: implement build
return FloatingActionButton(
backgroundColor: Color(0xFF11DA53),
mini: true, // Le da tamano chiquito,
tooltip: 鈥淔av鈥,
onPressed:
onPressedFav, // Le da una accion, para llamar la funcion no se usa parentesis
child: Icon(selected ? Icons.favorite_border : Icons.favorite));
}
}

No comprend铆 muy bien la explicaci贸n de setState, le铆 parte de la doc de flutter y creo que lo explica un poco mejor, espero les ayuda: https://flutter.dev/docs/development/ui/interactive

Bueno, me cost贸 un poco entender que al presionar el boton, el icono no cambiaba, si lo hacian internamente, pero no se actualizaba. Entonces entend铆 que deb铆a utilizar la propiedad setState(() {}) y hacer que una bariable booleana cambiara de estado cada que se presionara el boton. De esta manera se puede ver la actualizaci贸n en tiempo real. Les muestro mi c贸digo.

import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FloatingActionButtonGreen();
  }
}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {
  bool _hasbeenPressed = false;

  void onPressedFav() {
    setState(() { //Aqui se actualiza la pantalla
      _hasbeenPressed = !_hasbeenPressed;
    });//Si es false, cambia a true y vicebersa
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      child:
          _hasbeenPressed ? Icon(Icons.favorite_border) : Icon(Icons.favorite), // Evaluamos la variable booleana
      onPressed: onPressedFav,
    );
  }
}

Cambio el estado de _isFavorite con setState y muestro el snackbar solo si es marcado como favorito.

import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _FloatingActionButton();
  }

}

class _FloatingActionButton extends State<FloatingActionButtonGreen> {

  bool _isFavorite = false;

  void onPressedFav() {
    setState(() {
      _isFavorite = !this._isFavorite;
    });

    if(this._isFavorite) {
      Scaffold.of(context).showSnackBar(
          SnackBar(content: Text("隆Soy tu pinche favorito!"))
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: Icon(
        this._isFavorite ? Icons.favorite : Icons.favorite_border
      )
    );
  }

}

va quedando genial鈥

Una pregunta, en Android, como hago para cambiar el nombre de la aplicaci贸n? El nombre del 铆cono que aparece en mi celular. He tratado de hacerlo de diferentes formas pero siempre me sale Platzi_Trip_App.

Listo 馃槃

import 'package:flutter/material.dart';
class FloatButtonGreen extends StatefulWidget {

  bool estado = false;

  FloatButtonGreen({this.estado});
  @override
  _FloatButtonGreenState createState() => _FloatButtonGreenState();
}

class _FloatButtonGreenState extends State<FloatButtonGreen> {
  
  _FloatButtonGreenState();

  void onPressedButton() {

    setState(() {
      widget.estado =! this.widget.estado;
    });

    Scaffold.of(context).showSnackBar(
      SnackBar(content: Text('Ha sido agregado a favoritos'),)
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      child: Icon( widget.estado ? Icons.favorite : Icons.favorite_border),
      backgroundColor: Colors.green,
      mini: true,
      onPressed: onPressedButton,
    );
  } 
}```

Alguien sabe como puedo solucionar esto ??? Ayuda!!!
https://imgur.com/HqvAM6P

import 'package:flutter/material.dart';

class FloatingAction extends StatefulWidget{
  FloatingAction({Key key}) : super(key:key);

  @override
  _FloatingAction createState() => _FloatingAction();

}

class _FloatingAction extends State<FloatingAction>{

  bool _active = false;

  void onPressedFav(){
    setState(() {
          _active = !_active;
        });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: Icon(
        _active ? Icons.favorite : Icons.favorite_border
      ),
    );
  }
}

M铆 implementaci贸n la hice de la siguiente manera:

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen>{

  bool pressed=false;

  void onPressedFav(){
    setState(() {
          pressed = !this.pressed;
        });
  }

  Widget build(BuildContext context) {
    
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: Icon(
        pressed ? Icons.favorite : Icons.favorite_border
        ),
    );
  }

}

Cabe recalcar que se me hizo raro usar el operador ternario y no un if, ya que no s茅 c贸mo hacerlos dentro de los parametros del widget 馃

Me llama la atenci贸n por qu茅 Anah铆 detiene y vuelve a ejecutar la app y no utiliza el hot reloading que realmente funciona muy bien. Desde el inicio del curso he tenido la app levantada y utilizando hot reloading y no me ha dado problemas, solo la reinicio cuando se realizan cambios en el pubspec.yaml.

Aqu铆 mi propuesta con texto, color e icono.

Como hago para lanzar un evento apenas inicio mi aplicaci贸n, necesito que apenas inicie la aplicaci贸n consuma un Servicio Web para hacer ciertas validaciones, lo estaba poniendo en el evento build del widget State, pero no se ejecuta (pero si lo ejecuto desde un bot贸n funciona sin problemas):

@override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    
    _launchURL;
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ), ......

Anexo mi soluci贸n pero que me queda una duda.
驴Por qu茅 cuando me desplazo por el CardViewList, el FAB no mantiene su estado ?
Por ejemplo, le doy clic al FAB de la primera imagen y cambia el color del icono, me desplazo sobre las im谩genes al final y regreso al principio y el FAB tiene el icono desmarcado.

import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FloatingActionButtonGreen();
  }
}


class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen>{
  bool pressed = false;
  IconData  icon = Icons.favorite_border;

  void onPressedFav(){
    setState(() {
      pressed = !pressed;
    });

    if(pressed){
      icon = Icons.favorite;
      Scaffold.of(context).showSnackBar(
          SnackBar(
            content: Text("Marcado como Favorito"),
          )
      );
    }else{
      icon = Icons.favorite_border;
      Scaffold.of(context).showSnackBar(
          SnackBar(
              content: Text("Eliminado de tus favoritos")
          )
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF16DB58),
      mini: true,
      tooltip: "Fav",
      child: Icon(
        icon,
        color: Colors.white,
      ),
      onPressed: onPressedFav,
    );
  }
}



Me desplazo al final



Regreso al Inicio (El icono deja de aparecer coloreado)

// ignore: camel_case_types
class _floatingButton extends State<FloatingButton> {
  bool fav = false;
  
  void onPressedFav() {
    setState(() {
      fav = !fav;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: Icon(
        fav ? Icons.favorite : Icons.favorite_border
      ),
    );
  }```

class FloatingActionButtonGreen extends StatefulWidget {
@override
_FloatingActionButtonGreenState createState() =>
_FloatingActionButtonGreenState();
}

class _FloatingActionButtonGreenState extends State<FloatingActionButtonGreen> {
IconData icon = Icons.favorite_border;

void onPressedFav() {
setState(() {
this.icon = this.icon == Icons.favorite_border
? Icons.favorite
: Icons.favorite_border;
});
}

@override
Widget build(BuildContext context) {
return FloatingActionButton(
backgroundColor: Color(0xFF11DA53),
mini: true,
tooltip: 鈥淢ini button鈥,
onPressed: onPressedFav,
child: Icon(icon),
);
}
}

import 'package:flutter/material.dart';

class FavButton extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _FavButton();
  }
}

class _FavButton extends State<FavButton> {
  bool _isFavorite = false;

  @override
  Widget build(BuildContext context) {
    final icon = _isFavorite ? Icons.favorite : Icons.favorite_border;

    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      child: Icon(
        icon,
        color: Colors.white,
      ),
      onPressed: onPressedFav,
    );
  }

  void onPressedFav() {
    setState(() {
      if(!_isFavorite) {
        _isFavorite = true;
        Scaffold.of(context).showSnackBar(
            SnackBar(
              content: Text("Agregado como Favorito!!"),
            )
        );
      }
      else {
        _isFavorite = false;
        Scaffold.of(context).showSnackBar(
            SnackBar(
              content: Text("Ya no es favorito!!"),
            )
        );
      }
    });

  }

}```

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {
bool state = false;

@override
Widget build(BuildContext context) {
void onPressedFav() {
setState(() {
state == true ? state = false : state = true;
});

  state == true
      ? Scaffold.of(context)
          .showSnackBar(SnackBar(content: Text("Agregado a favoritos")))
      : Scaffold.of(context).showSnackBar(
          SnackBar(content: Text("Se Quito de tus favoritos")));
bool favorite = false;
  Icon favIcon = Icon(Icons.favorite_border);

  void onPressedFav(){
    
    setState(() {
      favorite= !favorite;
      if(favorite)
        favIcon = Icon(Icons.favorite);
      else
        favIcon = Icon(Icons.favorite_border);
    });

    Scaffold.of(context).showSnackBar(
        SnackBar(
          content: Text("Agregaste a favoritos"),
        )
    );
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini:true,
      tooltip: "Fav",
      child: favIcon,
      onPressed: onPressedFav,
    );
  }

import 鈥榩ackage:flutter/material.dart鈥;

class BotonAccionFlotanteVerde extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _BotonAccionFlotanteVerde();
}

}

class _BotonAccionFlotanteVerde extends State<BotonAccionFlotanteVerde>{
bool Favorito = false;
Icon favIcon =
Icon(Icons.favorite_border);
var Texto ="";

void PresionoBoton(){
setState(() {
Favorito=!Favorito;
if (Favorito){
favIcon= Icon(Icons.favorite);
Texto = 鈥淎gregaste a favoritos鈥;

  }
  else {
    favIcon = Icon(Icons.favorite_border);
    Texto = "Quitaste de favoritos";
  }
});

Scaffold.of(context).showSnackBar(

    SnackBar(
      content: Text(Texto),

    )

);

}

@override
Widget build(BuildContext context) {
// TODO: implement build
return FloatingActionButton(

  backgroundColor: Color(0xFF11DA53),
  mini: true,
  tooltip: "Fav",


  onPressed: PresionoBoton ,
  child: favIcon

);

}

}

Buenas, consulta: al declara la variable de estado y al setear el mismo despues, en muchos ejemplos se antepone el THIS y en otros no, yo lo probe en mi app y funciona de las 2 maneras. Lo mismo al hacer la condicion en el Icon.
Que seria lo mas recomendable, ponerlo o no?
Gracias!

tengo un problema en mi IDE ANDROID QUIEN ME PUEDE AYUDAR PLIS!!!

tengo un error en el Main/java/Kotlin

class MainActivity: FlutterActivity() {
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
GeneratedPluginRegistrant.registerWith(this)
this.getWindow().setStatusBarColor(android.graphics.Color.TRANSPARENT);
}

}

me sale error en el this quien me ayuda!!
}

驴Si quiero tener dos botones uno arriba y otro abajo como realizar铆a la Alignment en uno y otro boton?
驴Porque la Alignment solo afecta al FloatingActionButtonGreen y no al card?

import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FloatingActionButtonGreen();
  }
}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen>{
  bool favorito = false;
  var _icon = Icon(Icons.favorite_border);
  void favorito_(){
    setState(() {
      if(favorito){
        favorito = false;
        _icon = Icon(Icons.favorite);
      }else{
        favorito = true;
        _icon = Icon(Icons.favorite_border);
      }
    });
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "FAV",
      onPressed: favorito_,
      child: _icon,
    );
  }

}

Hola chicos. Estoy intentando hacer lo mismo pero:

  1. El bot貌n no cambia de color a verde (se queda azul).
  2. No aparece el 矛cono.
  3. No se activa el estado onPressed.

Este es mi c贸digo:

import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _FloatingActionButtonGreen();
  }

}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen>{

  bool _pressed = false;

  void onPressedFav() {
    setState(() {
      _pressed = !this._pressed;
    });

    Scaffold.of(context).showSnackBar(
      SnackBar(
          content: Text("Agregado a tus favoritos")
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: Icon(
        this._pressed ? Icons.favorite : Icons.favorite_border
      ),
    );
  }
}

No veo el error 馃槮 (Tambi茅n reinici茅 el emulador y nada)

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {

  bool favAdded = false;
  var _icon = Icon(Icons.favorite_border);
  var contenido = Text('Agregado a tus favoritos');

  void onPressedFav(){
    setState(() {
      favAdded = !favAdded;
    });

    if ( favAdded ) {
      _icon = Icon(Icons.favorite);
      contenido = Text('Agregado a tus favoritos');
    }else{
      _icon = Icon(Icons.favorite_border);
      contenido = Text('Quitando de tus favoritos');
    }

    Scaffold.of(context).showSnackBar(SnackBar(
      content: contenido,
    ));
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: 'Fav',
      onPressed: onPressedFav,
      child: _icon
    );
  }

}```

Agregando a favoritos:

Quitando de favoritos:

C贸digo Fuente:

import 鈥榩ackage:flutter/material.dart鈥;

class FloatingActionButtonGreen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _FloatingActionButtonGreen();
}
}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {
var _isFav = false;

@override
Widget build(BuildContext context) {
void onPressedFav() {
setState(
() {
_isFav = !_isFav;
},
);

  if (_isFav) {
    Scaffold.of(context).showSnackBar(
      SnackBar(
        content: Text('Agregaste a tus favoritos'),
      ),
    );
  } else
    Scaffold.of(context).showSnackBar(
      SnackBar(
        content: Text('Eliminado de tus favoritos'),
      ),
    );
}

return FloatingActionButton(
  backgroundColor: Color(0xFF11DA53),
  mini: true,
  tooltip: 'Fav',
  child: Icon(
    _isFav ? Icons.favorite : Icons.favorite_border,
  ),
  onPressed: onPressedFav,
);

}
}

class _FloatingActionButtonGreenState extends State<FloatingActionButtonGreen> {
bool fav = false;

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
    mini:true,
    tooltip: "Fav",
    child: Icon(
      fav?Icons.favorite:Icons.favorite_border
      ),
     onPressed: onPressedFav,
    );
  }
  void onPressedFav(){
    setState(() {
    fav? fav= false:fav=true;
    });
  }
}```

驴C贸mo lograr que cuando la card salga de la visualizaci贸n en pantalla y vuelva el 铆cono mantenga su 鈥渆stado鈥 de vac铆o o lleno?

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {

  bool xfavorito = false;

  void onPressedFav() {
    Scaffold.of(context).showSnackBar(
        SnackBar(
          content: Text("Agregaste a favoritos"),
        )
    );
    setState(() {
      if(xfavorito == false)
        xfavorito = true;
      else xfavorito = false;
    }
    );
  }

  Widget icono() {
    if(xfavorito == false)
      return Icon(Icons.favorite_border);
    else return Icon(Icons.favorite);
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: icono(),
    );
  }
}```
import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _FloatingActionButtonGreen();
  }

}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {

  bool isFav = false;
  void onPressedFav() {
    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text(isFav ? 'Fav removed' : 'Fav addded'),
    ));
    setState(() {
      isFav = !isFav;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xff11da53),
      mini: true,
      tooltip: 'Fav',
      onPressed: onPressedFav,
      child: Icon(
        isFav ? Icons.favorite : Icons.favorite_border
      ),
    );
  }

}```
class _ButtonGreen extends State<ButtonGreen>{
  bool isFav=false;
  void onPressFav(){
   setState(() {
     isFav=!isFav;
   });
    final String textAdd="A帽adido a Favorito";
    final String textRemove="Eliminado de favorito";

   Scaffold.of(context).showSnackBar(
       SnackBar(
          content: Text(isFav?textAdd:textRemove),
      )
   );

  }
class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen>{
  var toogle = false;
  void onPressedFav(){
      setState(() {
        toogle = !toogle;
      });
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
        backgroundColor: Colors.green,
        mini: true,
        tooltip: "Fav",
        onPressed: onPressedFav,
        child: Icon(
          toogle ? Icons.favorite : Icons.favorite_border,
        ),
    );
  }

}
import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {

    return _FloatingActionButtonGreen();
  }

}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {

  bool isFav = false;

  final ThisIcon = Icon(
    Icons.favorite
  );

  final ThisIconBorder = Icon(
    Icons.favorite_border
  );
  final number = 0xFF11DA53;
  final numberTwo = 0xFFFF1744;

  void onPressedFav () {
      Scaffold.of(context).showSnackBar(
          SnackBar(
            content: Text('Agregado a tus Favoritos'),
          ));

      setState(() {
          isFav = !isFav;
      });

  }

  @override
  Widget build(BuildContext context) {

      return FloatingActionButton(
        backgroundColor: Color(isFav ? numberTwo : number),
        mini: true,
        tooltip: "Fav",
        onPressed: onPressedFav ,
        child: isFav ? ThisIcon : ThisIconBorder ,
      );
  }
}```

He aqu铆 mi c贸digo, espero sus comentarios.

import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _FloatingActionButtonGreen();
  }

}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen>{

  bool _isFavorited = true;

  void onPressedFav(){
    Scaffold.of(context).showSnackBar(SnackBar(
      content: _isFavorited ? Text("Agregaste a tus favoritos") : Text("Quitaste de tus favoritos") ,
    ));
    setState(() {
      _isFavorited = !_isFavorited;
    });
  }

  @override
  Widget build(BuildContext context) {

    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: Icon(
        _isFavorited ? Icons.favorite_border : Icons.favorite
      ),
    );
  }
  
}

Este es mi c贸digo:

import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FloatingActionButtonGreen();
  }
}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {
  IconData icon = Icons.favorite;

  void onPressedFav() {

    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text("Favorito"),
    ));
    setState(() {
      icon =
      icon == Icons.favorite_border ? Icons.favorite : Icons.favorite_border;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
        backgroundColor: Color(0xFF11DA53),
        mini: true,
        tooltip: "fav",
        onPressed: onPressedFav,
        child: new Icon(icon));
  }
}

<code>
import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FloatingActionButtonGreen();
  }
}

var stylebutton = Icons.favorite_border;
bool clickfavorite = false;

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {
  void onPressedFav() {
    setState(() {
      clickfavorite = !clickfavorite;
      stylebutton = clickfavorite ? Icons.favorite : Icons.favorite_border;
    });
    Scaffold.of(context).showSnackBar(
      SnackBar(
        content: Text("add favorite"),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav, //() => onPressedFav(clickfavorite),
      child: Icon(stylebutton),
    );
  }
}

Mi soluci贸n, para indicar al usuario si ha clicado o no y qu茅 ocurrir谩 con la foto bajo, en un Snackbar:

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen> {
  bool _pressed = false;

  void _onPressedFav() {
    setState(() {
      _pressed = !this._pressed;
    });
    if (_pressed) {
      Scaffold.of(context).showSnackBar(
      SnackBar(
        content: Text("Agregando a favoritos"),
      )
    );
    } else {
      Scaffold.of(context).showSnackBar(
      SnackBar(
        content: Text("Quitando de favoritos"),
      )
    );
    }
  }```

Muy bueno Mat铆as Niz, pero tiene raz贸n rrocav3, el estado de los corazones presionados se pierde luego de utilizar el slider. Como se puede resolver ese comportamiento? Gracias.

Genial!

import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget {
  @override
  _FloatingActionButtonGreenState createState() =>
      _FloatingActionButtonGreenState();
}

class _FloatingActionButtonGreenState extends State<FloatingActionButtonGreen> {
  bool _isPressed = false;

  void onPressedFav() {
    Scaffold.of(context)
        .showSnackBar(SnackBar(content: Text("Agregado a favoritos")));
    setState(() {    
      _isPressed = !_isPressed;
    });
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: () => onPressedFav(),
      backgroundColor: Color(0xFF11DA53),
      splashColor: Colors.red,
      mini: true,
      tooltip: "Favorite",
      child: _isPressed ? Icon(Icons.favorite) : Icon(Icons.favorite_border),
    );
  }
}

<import 'dart:ffi';
import 'package:flutter/material.dart';

class FloatingActionButtonGreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FloatingActionButtonGreen();
  }
}

class _FloatingActionButtonGreen extends State<FloatingActionButtonGreen>{

  bool _isFavorite = true;
  Void onPressedFav(){
    setState(() {
      if (_isFavorite){
        _isFavorite= false;
      } else {
        _isFavorite=true;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: false,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: IconButton(
        icon: (_isFavorite ? Icon(Icons.favorite) : Icon(Icons.favorite_border)),
      ),
    );
  }

}>

Hecho! 馃槂

import 'package:flutter/material.dart';

class FloatinActionButtonGreen extends StatefulWidget {
  @override
  _FloatinActionButtonGreenState createState() =>
      _FloatinActionButtonGreenState();
}

class _FloatinActionButtonGreenState extends State<FloatinActionButtonGreen> {
  bool estadoMeGusta = false;
  Icon iconoFavorite = Icon(Icons.favorite_border);

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: actionButton,
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Me Gusta!",
      child: iconoFavorite,
    );
  }

  void actionButton() {

    setState(() {
      estadoMeGusta == true ? estadoMeGusta = false : estadoMeGusta = true;

      if (estadoMeGusta == true) {
        iconoFavorite = Icon(Icons.favorite);
        mensajeAction("Agregaste a tus Favoritos!", Colors.green);
      } else {
        iconoFavorite = Icon(Icons.favorite_border);
        mensajeAction("Lo sacaste de tus Favoritos!", Colors.red);
      }
    });
  }

  void mensajeAction(String texto,Color color){
    Scaffold.of(context).showSnackBar(
      SnackBar(content: Text(texto), backgroundColor: color,)
    );
  }
}