🙂 İNSANLARIN EN HAYIRLISI INSANLARA FAYDALI OLANDIR 🙂

Ramazan HABER / FLUTTER / Getx Kullanımı 2

1-) FLUTTER - Getx Kullanımı 2

 

flutter pub add get

 

kaynak : https://www.youtube.com/watch?v=-FAiH638BHo&list=PL3wGb9_yWsvJ-QUBbkXvhjhQFRsb4wqbY&index=3&ab_channel=CodeX

 

1- Sayfalar arası geçiş için MaterialApp -> GetMaterialApp yapılır ve

 

 

Get.to(GetHomePage()); // diğer sayfaya gider

Get.off(GetHomePage()); // bulunduğum sayfayı siler ve gider

Get.offAll(GetHomePage()); // her sayfayı siler ve gider

Get.back(); // geri gider

Get.to(GetHomePage(),arguments:"Hello World!"); // değer yollama
Get.back(result: "Hello world"); // result olarak geri değer yollar

 

 

2- İsimlendirme olarak geçiş yapmak için

 

 

GetMaterialApp(

  home: Home(),

  getPages: [

    GetPage(name: '/', page: () => Home()),

    GetPage(name: '/second', page: () => Second()),

    GetPage(name: '/third', page: () => Third()),

    GetPage(name: "/fourth", page: () => Fourth()),

  ],

);

2. Then After we can use simple method as per below :

 

Get.toNamed("/second");

Also we can pass an arguments with Named Navigator as per below example :

 

Get.toNamed("/fourth", arguments: "Hello World!");

 

 

3- basit counter için

 

import 'package:get/get.dart';

class GetxArtan extends GetxController{
  
var sayi =0.obs;
  
GetxArtan(){
    print(
"burası çalıştı ");
  }
}

 

var getxArtan = Get.put(GetxArtan()); // hafızadakini alır

//var getxArtan = new GetxArtan(); // hafızadakini almaz

Obx(() => Text(getxArtan.sayi.value.toString()))

 

onPressed: () {
 
getxArtan.sayi.value++;
},

 

 

 

4- List Getx için

 

4.1- GetxKategori.dart

 

import 'package:get/get.dart';
import 'KategorilerApi.dart';
import 'KategorilerModel.dart';

class GetxKategori extends GetxController{
  
var kategoriModel  = <KategorilerModel>[].obs;
  
var verilerGeldimi = false.obs;
  
void kategoriYukle(){
    
KategorilerApi api = new KategorilerApi();
    
api.getKategoriler().then((value) {
      
kategoriModel.value=value;
      
verilerGeldimi.value=true;
    });
  }
}

 

 

 

4.2- GetxKategori.dart

 

var getxKategori = Get.put(GetxKategori());

@override
void initState() {
  
super.initState();
  
getxKategori.kategoriYukle();
}

@override
Widget build(BuildContext context) {
  
return Scaffold(
      appBar:
AppBar(
        title:
Text("Başlık"),
      ),
      body:
Container(
        child:
GetX<GetxKategori>(
          builder: (controller) {
            
return controller.verilerGeldimi.value==false?Center(child: CircularProgressIndicator(),): ListView.builder(
                itemCount: controller.
kategoriModel.value.length,
                itemBuilder: (context, index) {
                  
var model = controller.kategoriModel.value[index];
                  
return Container(
                    height:
50,
                    child:
Card(
                      child:
Text(model.ad!),
                    ),
                  );
                });
          },
        ),
      ));
}

 

 

5- GetBuilder ve GetX farkı . GetBuilder de update kullanmak zorundasın. GetX de otomatik update yapar

 

 

body: Container(
  child:
GetBuilder<GetxKategori>( // GetBuilder kullanırsan update yapmak zorundasın
    
builder: (controller){
      
if(controller.verilerGeldimi==false) return Container();
      
return Text(controller.kategoriModel.value[0].ad!);
    },
  ),

 

 

body: Container(
  child:
GetX<GetxKategori>( // GetBuilder kullanırsan update yapmak zorundasın
    
builder: (controller){
      
if(controller.verilerGeldimi==false) return Container();
      
return Text(controller.kategoriModel.value[0].ad!);
    },
  ),

 

import 'package:get/get.dart';
import 'KategorilerApi.dart';
import 'KategorilerModel.dart';

class GetxKategori extends GetxController{
  
var kategoriModel  = <KategorilerModel>[].obs;
  
var verilerGeldimi = false.obs;
  
void kategoriYukle(){
    
KategorilerApi api = new KategorilerApi();
    
api.getKategoriler().then((value) {
      
kategoriModel.value=value;
      
verilerGeldimi.value=true;
      update();
// GetBuilder için eklendi
    
});
  }
}

 

 

 

6- obx ile gridviewbuilder kullanımı

 

 

Obx(
  () {
    
return Container(
        child:
GridView.builder(
            itemCount:
getxKategori.urunModels.value.length,
            gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
                mainAxisExtent:
60, crossAxisCount: 2),
            itemBuilder: (context, index) {
              
var model = getxKategori.urunModels.value[index];

              
return Card(
                child:
Column(
                  children: [
                    
Text(model.urunAdiTr!),
                    
Expanded(
                        child:
Image.memory(
                      
Base64Decoder().convert(model.urunResim!),
                      height:
150,
                      fit:
BoxFit.fill,
                    )),
                  ],
                ),
              );
            }));
  },
)

 

 

 

7- obx ile gridviewbuilder içinde api den gelen modeli getx e bağlama

 

7.1 UrunModel2.dart

 

import 'package:get/get.dart';

class UrunModel2 extends GetxController{
  
var urunAdiTr="".obs;
  
String? urunResim;
  
var sayac=0.obs;

  
UrunModel2({required this.urunAdiTr, this.urunResim});

  
UrunModel2.fromJson(Map<String, dynamic> json) {
    
urunAdiTr.value = json['Urun_AdiTr'];
    
urunResim = json['Urun_Resim'];
  }

  
Map<String, dynamic> toJson() {
    
final Map<String, dynamic> data = new Map<String, dynamic>();
    
data['Urun_AdiTr'] = this.urunAdiTr.obs;
    
data['Urun_Resim'] = this.urunResim;
    
return data;
  }
}

 

 

7.2 Gridview ve obx

 

body: Obx(
  () {
    
return Container(
        child:
GridView.builder(
            itemCount:
getxKategori.urunModels.value.length,
            gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
                mainAxisExtent:
120, crossAxisCount: 2),
            itemBuilder: (context, index) {
              
var model = getxKategori.urunModels.value[index];

              print(index);
              
return Card(
                child:
Column(
                  children: [
                    
Obx(() => Text(model.urunAdiTr.value),),
                    
Expanded(
                        child:
Image.memory(
                      
Base64Decoder().convert(model.urunResim!),
                      height:
150,
                      fit:
BoxFit.fill,
                    )),
                    
Expanded(
                        child:
ElevatedButton(
                      onPressed: () {
                        
model.sayac.value++;
                        
model.urunAdiTr.value = model.urunAdiTr.value + " a";
                      },
                      child:
Obx(() => Text("Ekle " + model.sayac.value.toString())),
                    ))
                  ],
                ),
              );
            }));
  },

 

 

7.3 GetxConttoler.dart

 

 

class GetxKategori extends GetxController{
    
var urunModels  = <UrunModel2>[].obs;
 

void urunYukle(){
  
KategorilerApi api = new KategorilerApi();
  
api.getUruns().then((value) {
    
urunModels.value=value;
    
 });
}

}

 

 

7.4 Api.dart

 

Future<List<UrunModel2>> getUruns() async {
  
var path ="/api/Kategoriler/getUruns";
  var uri = Uri.http(apiBaseIrl,path);
  
var header = {
    
'Content-Type':'application/json:charset=UTF-8'
  
};
  
return http.post(uri,headers: header,).then((response)  {
    
int statusCode = response.statusCode;
    
String donenDeger = response.body.toString();
    
var modelim = (jsonDecode(donenDeger) as List)
        .map((e) =>
UrunModel2.fromJson(e))
        .toList();

    print(
donenDeger);
    
return modelim;
  });

}

 

 

 

 2023 Kasım 02 Perşembe
 1,002