MemeAppFlutter
1.0.0
Kode di sini: home_page.dart
Menguras data dari 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 membuat UI, kalau tidak, jika snapshot.hasError menampilkan kesalahan, selain itu membuat CircularProgressIndicator, IE sambil menunggu data diambil. 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,
));
}Penyedia adalah alat manajemen negara, Anda dapat merujuk lebih banyak tentang itu di sini: Contoh ProviderExel
Catatan: Mungkin perlu waktu untuk memahami penyedia, kasus saya tidak berbeda. (Ingat: tidak ada yang datang semalam, hal -hal baik membutuhkan waktu!)
Kami memiliki 2 persyaratan dasar menggunakan penyedia.
Case-1: Peningkatan/penurunan nilai penghitung pada ikon keranjang di beranda (rujuk gambar di atas).
Kasus-2: Membangun halaman keranjang.
Case-1: Kode penghitung tambahan/penurunan di sini: 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 ();
}
}Selanjutnya, kapan kita membutuhkan penyedia?, Saat tombol ditekan!, Maka tulis kode di dalam fungsi onpressed () dari tombol "Dapatkan meme ini"
Kode di sini
context. read < CartCounterProvider >(). increment ();Kode di sini
//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;Menggunakan Baca dan Tonton adalah salah satu cara untuk melakukannya. Yang lain menggunakan contoh kelas penyedia yang Anda buat, mari kita bahas pendekatan ini untuk kasus-2.
Kasus-2: Membangun halaman keranjang.
CATATAN: Selalu cobalah untuk mendefinisikan fungsionalitas sebelumnya sebelum diterapkan.
Halaman Rencana untuk Keranjang sederhana:
Kelas Penyedia untuk Menampilkan Cart (MemecartProvider)
Kode 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,
});
}Sekarang nyaman bagi kita untuk membuat meme di halaman keranjang. Kami cukup melintasi daftar dan menampilkan item yang sesuai.
Tapi, bagaimana kami memastikan hanya barang -barang yang diberikan yang ditambahkan oleh pengguna? Penyedia itu, sekali lagi!.
Kode 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);Kode di sini
//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];Kode di sini
//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 }" ,Terakhir tetapi tidak sedikit, kita perlu mengimplementasikan fitur Hapus
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 ();
},
Dan ... itu bungkus! Saya harap ini membantu Anda dan Anda belajar sesuatu yang baru. Jika Anda ingin, pertimbangkan untuk memberikan repo ini a. Jika Anda memiliki pertanyaan, Anda pasti dapat menghubungi saya melalui sosial saya.
Semua yang terbaik?
