Widget Floating Action Button

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 “onPressed” 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 “stful” 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 ‘package: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 ? “Añadido a favoritos” : “Quitado de favoritos”),
)
);
}

@override
Widget build(BuildContext context) {
// TODO: implement build
return FloatingActionButton(
backgroundColor: Color(0xFF11DA53),
mini: true,
tooltip: “Fav”,
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:

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 “Undo”. 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 ‘package: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(“Agregado 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: “Fav”,
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: “Mini 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 ‘package: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 = “Agregaste 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 ‘package: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 “estado” 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,)
    );
  }
}