Agregar a favoritos es una función frecuente en muchas aplicaciones. Permite a los usuarios marcar o guardar imágenes, direcciones, enlaces u otras cosas para una fácil referencia futura. En este artículo, vamos a ver cómo implementar favoritos o agregar a la función de favoritos en una aplicación flutter. Este artículo enumera dos métodos para hacerlo. En el primer método, agregaremos un ícono simple (widget sin estado) que cambia de color con el toque, para marcar una tarjeta para futuras referencias. En el segundo ejemplo, implementaremos una característica favorita comparativamente compleja que involucrará widgets StateFul, guardará los datos en un conjunto y luego los mostrará en otra pantalla.
1. En el primer método vamos a añadir el botón en forma de corazón en la tarjeta, que cambiará de color al pulsarlo, para marcar la tarjeta como favorita o no favorita.
Hacer una tarjeta en la pantalla de inicio:
Lo primero que tenemos que hacer es hacer una hermosa tarjeta . Puedes echar un vistazo a este artículo para entender cómo se usa el widget de tarjeta flutter.
Dart
//Code snippet of a card widget//
/** Card Widget **/
child: Card(
elevation: 50,
shadowColor: Colors.black,
color: Colors.greenAccent[100],
child: SizedBox(
width: 300,
height: 500,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
CircleAvatar(
backgroundColor: Colors.green[500],
radius: 108,
child: CircleAvatar(
backgroundImage: NetworkImage(
"https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"),
//NetworkImage
radius: 100,
), //CircleAvatar
), //CircleAvatar
SizedBox(
height: 10,
), //SizedBox
Text(
'GeeksforGeeks',
style: TextStyle(
fontSize: 30,
color: Colors.green[900],
fontWeight: FontWeight.w500,
), //Textstyle
), //Text
SizedBox(
height: 10,
), //SizedBox
Text(
'GeeksforGeeks is a computer science portal
for geeks at geeksforgeeks.org. It contains
well written, well thought and well explained
computer science and programming articles,
quizzes, projects, interview experienxes
and much more!!',
style: TextStyle(
fontSize: 15,
color: Colors.green[900],
), //Textstyle
), //Text
SizedBox(
height: 10,
), //SizedBox
SizedBox(
width: 80,
child: RaisedButton(
onPressed: () => null,
color: Colors.green,
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Row(
children: [
Icon(Icons.touch_app),
Text('Visit'),
],
), //Row
), //Padding
), //RaisedButton
) //SizedBox
],
), //Column
), //Padding
), //SizedBox
), //Card
Este es el fragmento de código de un widget de tarjeta que se verá así. Para obtener más información completa sobre el mismo, consulte este artículo .
Haciendo la pantalla desplazable:
Ahora haremos que la pantalla se pueda desplazar envolviendo el cuerpo de la aplicación flutter con SingleChild ScrollView y crearemos otra tarjeta debajo de la primera separada por un SizedBox .
Dart
//*Code snippet of the body*// body: SingleChildScrollView( padding: EdgeInsets.only(left: 0, right: 0, top: 20, bottom: 20), child: Center( /** Card Widget **/ child: Column( children: [ //Card 1 Card( ... ),//Card 1 SizedBox( height: 20, ), Card( ... ),//Card ), //Center ), //Scaffold
Y después de hacer todo esto, necesitamos implementar la función favorita.
Agregar característica favorita :
El cuerpo de la aplicación anterior contiene dos tarjetas en un SingleChildScrollView . Ahora, para aplicar la función favorita que se muestra arriba, necesitamos agregar el siguiente código en pubspec . archivo yaml .
dependencies: favorite_button: ^0.0.3
Esto agregará el paquete de botones favoritos a nuestra aplicación. Este paquete es una biblioteca que permite a los desarrolladores implementar un botón de favoritos en forma de corazón o de estrella con animación en la aplicación Flutter.
Usar este paquete es muy simple, el código para el botón en forma de corazón con el botón ya seleccionado es este:
FavouriteButton(
isFavorite: true,
valueChanged: (_isFavourite) {
print('Is Favourite $_isFavourite)');
},
),
Y en caso de que queramos que el botón no esté seleccionado, podemos establecer el parámetro isFavourite en falso.
Este es el código final de la aplicación.
Dart
import 'package:flutter/material.dart';
import 'package:favorite_button/favorite_button.dart';
// importing dependencies
void main() {
runApp(
/**Our App Widget Tree Starts Here**/
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.greenAccent[400],
centerTitle: true,
), //AppBar
body: SingleChildScrollView(
padding: EdgeInsets.only(left: 0, right: 0, top: 20, bottom: 20),
child: Center(
/** Card Widget **/
child: Column(
children: [
//Card 1
Card(
elevation: 50,
shadowColor: Colors.black,
color: Colors.greenAccent[100],
child: SizedBox(
width: 310,
height: 510,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
CircleAvatar(
backgroundColor: Colors.green[500],
radius: 108,
child: CircleAvatar(
backgroundImage: NetworkImage(
"https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"),
//NetworkImage
radius: 100,
), //CircleAvatar
), //CircleAvatar
SizedBox(
height: 10,
), //SizedBox
Text(
'GeeksforGeeks',
style: TextStyle(
fontSize: 30,
color: Colors.green[900],
fontWeight: FontWeight.w500,
), //Textstyle
), //Text
SizedBox(
height: 10,
), //SizedBox
Text(
'GeeksforGeeks is a computer science portalfor geeks
at geeksforgeeks.org. It contains well written,
well thought and well explained computer science
and programming articles, quizzes, projects,
interview experienxes and much more!!',
style: TextStyle(
fontSize: 15,
color: Colors.green[900],
), //Textstyle
), //Text
SizedBox(
height: 10,
), //SizedBox
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 100,
child: RaisedButton(
onPressed: () => null,
color: Colors.green,
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Row(
children: [
Icon(Icons.touch_app),
Text('Visit'),
],
), //Row
), //Padding
), //RaisedButton
),
// Favourite Button
FavoriteButton(
isFavorite: false,
valueChanged: (_isFavorite) {
print('Is Favorite : $_isFavorite');
},
),
],
), //SizedBox
],
), //Column
), //Padding
), //SizedBox
),
SizedBox(
height: 20,
),
// Card 2
Card(
elevation: 50,
shadowColor: Colors.black,
color: Colors.yellowAccent[100],
child: SizedBox(
width: 310,
height: 510,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
CircleAvatar(
backgroundColor: Colors.yellow[700],
radius: 108,
child: CircleAvatar(
backgroundImage: NetworkImage(
"https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"),
//NetworkImage
radius: 100,
), //CircleAvatar
), //CircleAvatar
SizedBox(
height: 10,
), //SizedBox
Text(
'GeeksforGeeks',
style: TextStyle(
fontSize: 30,
color: Colors.yellow[900],
fontWeight: FontWeight.w500,
), //Textstyle
), //Text
SizedBox(
height: 10,
), //SizedBox
Text(
'GeeksforGeeks is a computer science portalfor geeks
at geeksforgeeks.org. It contains well written,
well thought and well explained computer science
and programming articles, quizzes, projects,
interview experienxes and much more!!',
style: TextStyle(
fontSize: 15,
color: Colors.yellow[900],
), //Textstyle
), //Text
SizedBox(
height: 10,
), //SizedBox
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 100,
child: RaisedButton(
onPressed: () => null,
color: Colors.yellow[600],
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Row(
children: [
Icon(Icons.touch_app),
Text('Visit'),
],
), //Row
), //Padding
), //RaisedButton
),
// Favourite Button
FavoriteButton(
isFavorite: true,
valueChanged: (_isFavorite) {
print('Is Favorite : $_isFavorite');
},
),
],
), //SizedBox
],
), //Column
), //Padding
), //SizedBox
),
],
), //Card
),
), //Center
), //Scaffold
) //MaterialApp
);
}
Producción:
2 . Este segundo ejemplo es un poco más complejo en comparación con el anterior. En esta aplicación es un generador de pares de palabras. Delante de cada par de palabras, hay un ícono de agregar que cambia a un ícono de verificación de color verde cada vez que se toca, y además, el par de palabras también se guarda en otra pantalla.
Obtener dependencias:
En esta aplicación de aleteo, estamos generando pares de palabras aleatorias en el mosaico de la lista. El paquete flutter que estamos usando para obtener palabras aleatorias en inglés se muestra a continuación. El código que se proporciona a continuación debe agregarse en el archivo pubspec.yaml en la sección de dependencias.
english_words: ^3.1.5
Empezando:
Dart
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
//importing dependencies
void main() => runApp(MyApp());
//inictating app build
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primaryColor: Colors.green),
home: RandWords(),
debugShowCheckedModeBanner: false,
);
}
}
El fragmento de código anterior importará dependencias (biblioteca de diseño de materiales y biblioteca de palabras en inglés) en nuestro archivo main.dart e iniciará la compilación de la aplicación. La aplicación que se construirá es una aplicación material y en la última línea, el banner de depuración está configurado para desaparecer.
Creando el widget StateFul:
Dart
class RandWords extends StatefulWidget {
@override
RandWordsState createState() => RandWordsState();
}
class RandWordsState extends State<RandWords> {
final _randomWordPairs = <WordPair>[];
final _addWordPairs = Set<WordPair>();
Widget _buildList() {
return ListView.builder(
padding: const EdgeInsets.all(16.0),
itemBuilder: (context, item) {
if (item.isEven) return Divider();
final index = item ~/ 2;
if (index >= _randomWordPairs.length) {
_randomWordPairs.addAll(generateWordPairs().take(10));
}
return _buildRow(_randomWordPairs[index]);
},
);
}
En el código anterior, la clase RandWordsState mantiene el estado de la clase RandWords . Ahora la clase RandWordsState se hará cargo de la mayor parte de la lógica de la aplicación. En la clase RandWordsState , tenemos dos listas, la primera para el par de palabras aleatorias y la segunda para guardar los pares de palabras. Después de eso, en el método de compilación, estamos generando un widget ListView . Se llama a la función itemBuilder para cada palabra generada y, si es así, el widget ListView se separa con un divisor. Después de eso, estamos emparejando dos palabras aleatorias para formar un par de palabras y cuando llegamos al final de las palabras, se generan diez nuevos pares de palabras cada vez.
Característica favorita :
Veamos cómo funciona la característica favorita.
Dart
Widget _buildRow(WordPair pair) {
final alreadyadd = _addWordPairs.contains(pair);
// word-pair tile
return ListTile(
title: Text(pair.asPascalCase, style: TextStyle(fontSize: 18.0)),
trailing: Icon(alreadyadd ? Icons.check : Icons.add,
color: alreadyadd ? Colors.green : null),
onTap: () {
setState(() {
if (alreadyadd) {
_addWordPairs.remove(pair);
} else {
_addWordPairs.add(pair);
}
});
});
}
El fragmento de código anterior generó los mosaicos de la lista para las comprobaciones de pares de palabras si la palabra ya está guardada en la lista o no para especificar el icono. Y hay una función de toque que agrega o elimina el par de palabras del conjunto y también cambia el ícono a verde si ya está guardado desde el ícono de agregar pálido.
Generando una nueva pantalla:
Dart
void _pushadd() => Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext context) {
final Iterable<ListTile> tiles = _addWordPairs.map((WordPair pair) {
return ListTile(
title: Text(pair.asPascalCase, style: TextStyle(fontSize: 16.0)));
});
final List<Widget> divided =
ListTile.divideTiles(context: context, tiles: tiles).toList();
// saved word-pair page
return Scaffold(
appBar: AppBar(title: Text('Saved Word-Pairs')),
body: ListView(children: divided));
}));//MaterialPageRoute
El fragmento de código anterior genera la pantalla en la que se enumeran el par de palabras junto con ListTile del conjunto en el que se agregó anteriormente.
Código fuente completo:
Dart
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
// importing dependencies
void main() => runApp(MyApp());
// inictating app build
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primaryColor: Colors.green),
home: RandWords(),
debugShowCheckedModeBanner: false,
);
}
}
class RandWords extends StatefulWidget {
@override
RandWordsState createState() => RandWordsState();
}
class RandWordsState extends State<RandWords> {
final _randomWordPairs = <WordPair>[];
final _addWordPairs = Set<WordPair>();
Widget _buildList() {
return ListView.builder(
padding: const EdgeInsets.all(16.0),
itemBuilder: (context, item) {
if (item.isEven) return Divider();
final index = item ~/ 2;
if (index >= _randomWordPairs.length) {
_randomWordPairs.addAll(generateWordPairs().take(10));
}
return _buildRow(_randomWordPairs[index]);
},
);
}
Widget _buildRow(WordPair pair) {
final alreadyadd = _addWordPairs.contains(pair);
// word-pair tile
return ListTile(
title: Text(pair.asPascalCase, style: TextStyle(fontSize: 18.0)),
trailing: Icon(alreadyadd ? Icons.check : Icons.add,
color: alreadyadd ? Colors.green : null),
onTap: () {
setState(() {
if (alreadyadd) {
_addWordPairs.remove(pair);
} else {
_addWordPairs.add(pair);
}
});
});
}
void _pushadd() => Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext context) {
final Iterable<ListTile> tiles = _addWordPairs.map((WordPair pair) {
return ListTile(
title: Text(pair.asPascalCase, style: TextStyle(fontSize: 16.0)));
});
final List<Widget> divided =
ListTile.divideTiles(context: context, tiles: tiles).toList();
// saved word-pair page
return Scaffold(
appBar: AppBar(title: Text('Saved Word-Pairs')),
body: ListView(children: divided));
}));
// home page
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks Word-Pair Generator'),
actions: <Widget>[
IconButton(icon: Icon(Icons.menu_book), onPressed: _pushadd)
],
),
body: _buildList());
}
Producción:
Publicación traducida automáticamente
Artículo escrito por ankit_kumar_ y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA