MemeAppFlutter
1.0.0
Code ici: home_page.dart
Analyser les données de memesapi
Future < MemesModel > getMemesApi () async {
final response =
await http. get ( Uri . parse ( "https://api.imgflip.com/get_memes" ));
var data = jsonDecode (response.body);
if (response.statusCode == 200 ) {
return MemesModel . fromJson (data);
} else {
return MemesModel . fromJson (data);
}
} class _HomePageState extends State < HomePage > {
late Future < MemesModel > memes;
@override
void initState () {
super . initState ();
memes = getMemesApi ();
}body : FutureBuilder < MemesModel >(
future : memes,
builder : (context, snapshot) {snapshot.hasData , snapshot.harError )snapshot.hasData rend l'interface utilisateur, sinon si snapshot.hasError affiche l'erreur, rendez-vous une circulaireProgressIdicator, c'est-à-dire en attendant que les données soient récupérées. DynamicHeightGridView (
crossAxisCount : 2 ,
mainAxisSpacing : 10 ,
crossAxisSpacing : 25 ,
itemCount :
//nullcheck operator
snapshot.hasData ? snapshot.data ! .data ! .memes ! .length : 1 ,
builder : (context, index) {
//data fetched successfully
if (snapshot.hasData) {
//render UI here
} //data couldn't be fetched due to some error
else if (snapshot.hasError) {
return Center (
child : Text ( "Error Occured : ${ snapshot . error }" ),
); //waiting for data to be fetched (just the way youtube videos show circular progressor while buffering)
else {
return const Center (
child : CircularProgressIndicator (
color : Colors .teal,
));
}Le fournisseur est un outil de gestion de l'État, vous pouvez en référer plus ici: Providerexample
Remarque: il peut prendre un jour pour comprendre le fournisseur, mon cas n'était pas différent. (N'oubliez pas: rien ne vient du jour au lendemain, les bonnes choses prennent du temps!)
Nous avons 2 exigences de base en utilisant le fournisseur.
CAS-1: Incrément / diminution de la valeur de comptoir sur l'icône de panier sur la page d'accueil (voir les images ci-dessus).
Case-2: Construire la page de panier.
CAS-1: Code de compteur incrément / diminution ici: CART_COUNTER_PROVIDER.DART
import 'package:flutter/cupertino.dart' ;
class CartCounterProvider extends ChangeNotifier {
int cartCount;
CartCounterProvider ({ this .cartCount = 0 });
int get getCartCount => cartCount;
void increment () {
cartCount += 1 ;
notifyListeners ();
}
void decrement () {
cartCount -= 1 ;
notifyListeners ();
}
}Ensuite, quand aurons-nous besoin du fournisseur ?, Lorsque le bouton est appuyé sur!, Écrivez donc le code à l'intérieur de la fonction ONPRESS () du bouton "Obtenez ce mème"
Code ici
context. read < CartCounterProvider >(). increment ();Code ici
//just inside the build method this cartCounter will watch the value of the counter
//button pressed -> increment() method called using provider -> cartCounter watches the value and updates accordingly
int cartCounter = context. watch < CartCounterProvider >().getCartCount;Utiliser la lecture et la montre est une façon de le faire. Un autre utilise l'instance de la classe des fournisseurs que vous avez faite, discutons de cette approche pour le cas-2.
Case-2: Construire la page de panier.
Remarque: Essayez toujours de définir les fonctionnalités avant la mise en œuvre.
La page Plan pour le panier est simple:
Classe du fournisseur pour afficher le panier (memecartprovider)
Code meme_cart_provider.dart
//read below about CartCardModel first
import 'package:memeapp/models/cart_card_model.dart' ;
import 'package:flutter/cupertino.dart' ;
class MemeCartProvider extends ChangeNotifier {
//now it's convenient for us to display the memes, we just need a list of CartCardModel!
//each instance of this class will have the respective id, imageURL, and name of the meme.
//We just need to traverse and display this list in the cart page, thats it!
//_cartList will have the id, imageURL, name of only those memes that are added to cart by user
final List < CartCardModel > _cartList = < CartCardModel > [];
//memesIdList will only contain the meme ID's which will be used to add/remove memes from the cart
//also used to prevent duplicates
List < String > ? memesIdList = < String > [];
List < CartCardModel > get getCartList => _cartList;
List < String > ? get getMemesIdList => memesIdList;
void addItem ( CartCardModel addThisItem) {
_cartList. add (addThisItem);
notifyListeners ();
}
void removeItem ( String memeId) {
_cartList. removeWhere ((element) => element.id == memeId);
memesIdList ! . remove (memeId);
notifyListeners ();
}
}CartcardModel CART_CARD_MODEL.DART
//each instance of this class (CartCardModel) will have the info of id, imageURL, and name.
//it will now be easier to display the memes in the cart page
class CartCardModel {
String id;
String ? nameCart;
String ? imageUrlCart;
CartCardModel ({
required this .id,
this .nameCart,
this .imageUrlCart,
});
}Maintenant, il est pratique pour nous de rendre les mèmes dans la page CART. Nous traversons simplement la liste et affichons les éléments en conséquence.
Mais, comment allons-nous nous assurer que seuls ces éléments sont rendus qui ont été ajoutés par l'utilisateur? Fournisseur c'est encore!.
Code CART_PAGE.DART
//define an instance of MemeCartProvider class like this inside the build method
Widget build ( BuildContext context) {
var memeCartProvider = Provider . of < MemeCartProvider >(context);Code ici
//wrap the Listview.builder with CONSUMER<MemeCartProvider>
Consumer < MemeCartProvider >(
builder : (context, value, child) {
//ListView will traverse CartCardModel list and render memes accordingly
return ListView . builder (
//itemCount is simply the length of the list.
itemCount : value.getMemesIdList ! .length,
itemBuilder : ((context, index) {
object / instance of CartCardModel class using MemeCartProvider
CartCardModel cartObject = value.getCartList[index];Code ici
//render the image using cartObject
Image . network (
"${ cartObject . imageUrlCart }" ,
width : 140 ,
),
//render the name using cartObject
Text (
//limiting name to 20 characters
cartObject.nameCart ! .length > 20
? "${ cartObject . nameCart !. substring ( 0 , 20 )}..."
: "${ cartObject . nameCart }" ,Dernier mais non le moindre, nous devons implémenter la fonction de suppression
onPressed : () {
//we will remove the item from the list
value. removeItem (cartObject.id);
//why this line? you might've guessed it already, if not, dont worry
//remember we incrementes the counter value when user added items to the cart
//now user is deleting items, hence we need to decreament that counter value too!, right?
context. read < CartCounterProvider >(). decrement ();
},
Et ... c'est une enveloppe! J'espère que cela vous a aidé et vous avez appris quelque chose de nouveau. Si vous le souhaitez, envisagez de donner ce repo a. Dans le cas où vous auriez des questions, vous pouvez sûrement me tendre la main à travers mes sociaux.
TOUS MES VŒUX?
