MemeAppFlutter
1.0.0
Code hier: home_page.dart
Analyse der Daten von 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 die Benutzeroberfläche rendert, zeigt sonst, wenn snapshot.hasError den Fehler anzeigen, sonst einen zirkulären Progressindikator, dh während der Wartezeit auf die abgerufenen Daten. 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,
));
}Der Anbieter ist ein Tool für das staatliche Management. Hier können Sie mehr darüber verweisen: Providerexample
Hinweis: Es kann einige Zeit dauern, bis der Anbieter verstanden wird, mein Fall war nicht anders. (Denken Sie daran: Nichts kommt über Nacht, gute Dinge brauchen Zeit!)
Wir haben 2 grundlegende Anforderungen mit dem Anbieter.
Fall-1: Inkrement/Abnahme des Zählerwerts auf dem Wagensymbol auf der Homepage (siehe Bilder oben).
Fall-2: Erstellen der Karrenseite.
Fall-1: Inkrement-/Abnahme-Zählercode hier: 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 ();
}
}Als nächstes brauchen wir den Anbieter? Wenn die Taste gedrückt wird!
Code hier
context. read < CartCounterProvider >(). increment ();Code hier
//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;Lesen und Watch ist eine Möglichkeit, dies zu tun. Ein anderer verwendet die Instanz der von Ihnen erstellten Anbieterklasse und diskutieren diesen Ansatz für Fall-2.
Fall-2: Erstellen der Karrenseite.
HINWEIS: Versuchen Sie immer, die Funktionen vor der Implementierung zu definieren.
Der Plan für die CART -Seite ist einfach:
Anbieterklasse zum Anzeigen von Wagen (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,
});
}Jetzt ist es für uns bequem, Memes auf der Wagenseite zu rendern. Wir durchqueren einfach die Liste und zeigen Elemente entsprechend an.
Aber wie werden wir sicherstellen, dass nur diese Elemente vom Benutzer hinzugefügt wurden? Anbieter ist es wieder!.
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 hier
//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 hier
//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 }" ,Last but not least müssen wir die Löschfunktion implementieren
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 ();
},
Und ... das ist ein Wrap! Ich hoffe, das hat dir geholfen und du hast etwas Neues gelernt. Wenn Sie möchten, sollten Sie diesem Repo a geben. Für den Fall, dass Sie Fragen haben, können Sie mich sicherlich durch meine Sozialen erreichen.
ALLES GUTE?
