🙂 İNSANLARIN EN HAYIRLISI INSANLARA FAYDALI OLANDIR 🙂

Ramazan HABER / FLUTTER / dinamik tabbar view kullanımı How to create a dynamic TabBarView

1-) FLUTTER - dinamik tabbar view kullanımı How to create a dynamic TabBarView

 

1- EKRAN GÖRÜNTÜSÜ

 

 

2- KODLAR

 

 

import 'package:flutter/material.dart';

class DinamikTabbar3 extends StatefulWidget {
  
const DinamikTabbar3({Key? key}) : super(key: key);

  
@override
  
State<DinamikTabbar3> createState() => _DinamikTabbar3State();
}

class KategoriModel{
  
int? id;
  
String? kategoriAd; // YİYECEKLER , İÇECEKLER
}

class UrunModel{
  
int? id;
  
int? kategoriId;
  
String? urunAd; // AYRAN KOLA DÖNER PİZZA
}

class _DinamikTabbar3State extends State<DinamikTabbar3> {
  
List<KategoriModel> listKategori=[];
  
List<UrunModel> listUrun=[];

  
List<Widget> listTabWidget=[];
  
List<Widget> listUrunWidget=[];
  
List<Widget> listViewWidget=[];

  
void kategoriEkle(int id,String katAd){
    
KategoriModel kat=new KategoriModel();
    
kat.id=id;
    
kat.kategoriAd=katAd;
    
listKategori.add(kat);
  }
  
void urunEkle(int kategoriId,int urunId,String urunAd){
    
UrunModel urun=new UrunModel();
    
urun.id=urunId;
    
urun.kategoriId=kategoriId;
    
urun.urunAd=urunAd;
    
listUrun.add(urun);
  }

  
@override
  
void initState() {
    
// TODO: implement initState
    
super.initState();
    kategoriEkle(
1,"İçecekler");
    kategoriEkle(
2,"Yiyecekler");
    urunEkle(
1,1,"Ayran1");
    urunEkle(
1,2,"Kola");
    urunEkle(
2,3,"Döner");
    urunEkle(
2,4,"Pizza");

    
listKategori.forEach((kategori) {
      
Widget tab=Tab(child: Text(kategori.kategoriAd!),);
      
listTabWidget.add(tab);

      
var urunler = listUrun.where((element) => element.kategoriId==kategori.id).toList();

      
List<Widget> urunWidget=[];
      
urunler.forEach((urun) {
        
var con =  Container(child: Text(urun.urunAd!),);
        
urunWidget.add(con);
      });

      
var listWidget= ListView(children: urunWidget,);
      
listViewWidget.add(listWidget);

    });
  }
  
@override
  
Widget build(BuildContext context) {
    
return DefaultTabController(
      length:
listKategori.length,
      child:
Scaffold(
          appBar:
AppBar(
            toolbarHeight:
0,
            bottom:
TabBar(tabs: listTabWidget,),),
          body:
TabBarView(children: listViewWidget,)),
    );
  }
}

 

 

 

 

3- DYNAMİC TABBAR 2

 

import 'package:flutter/material.dart';
import 'package:pos/Ekhizmetlerpk/Sabitler.dart';

class MasalarPage extends StatefulWidget {
  
const MasalarPage({Key? key}) : super(key: key);

  
@override
  
State<MasalarPage> createState() => _MasalarPageState();
}

class KategoriModel {
  
int? id;
  
String? kategoriAd; // YİYECEKLER , İÇECEKLER
}

class UrunModel {
  
int? id;
  
int? kategoriId;
  
String? urunAd; // AYRAN KOLA DÖNER PİZZA
}

class _MasalarPageState extends State<MasalarPage> {
  
List<KategoriModel> listKategori = [];
  
List<UrunModel> listUrun = [];

  
List<Widget> listTabWidget = [];
  
List<Widget> listUrunWidget = [];
  
List<Widget> listViewWidget = [];

  
void kategoriEkle(int id, String katAd) {
    
KategoriModel kat = new KategoriModel();
    
kat.id = id;
    
kat.kategoriAd = katAd;
    
listKategori.add(kat);
  }

  
void urunEkle(int kategoriId, int urunId, String urunAd) {
    
UrunModel urun = new UrunModel();
    
urun.id = urunId;
    
urun.kategoriId = kategoriId;
    
urun.urunAd = urunAd;
    
listUrun.add(urun);
  }

  
int dizayncount = 3;

  
@override
  
void initState() {
    
super.initState();

    masalariYukle();
  }

  
void masalariYukle() {
    
listKategori = [];
    
listUrun = [];
    
listTabWidget = [];
    
listUrunWidget = [];
    
listViewWidget = [];

    kategoriEkle(
1, "BAHÇE");
    kategoriEkle(
2, "SALON");

    
for (int i = 1; i < 50; i++) {
      urunEkle(
1, i, "MASA $i");
      urunEkle(
1, i, "MASA $i");
    }

    
for (int i = 50; i < 100; i++) {
      urunEkle(
2, i, "MASA $i");
      urunEkle(
2, i, "MASA $i");
    }

    
listKategori.forEach((kategori) {
      
Widget tab = Tab(
        child:
Text(kategori.kategoriAd!),
      );
      
listTabWidget.add(tab);

      
var urunler = listUrun
          
.where((element) => element.kategoriId == kategori.id)
          .toList();

      
// burayı ekledim
      
var grid = GridView.builder(
        itemCount:
urunler.length,
        
// scrollDirection: Axis.horizontal, // scrool soldan sağa olur
        
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount:
dizayncount,
          mainAxisExtent:
85, // yükseklik demek
        
),
        itemBuilder: (
BuildContext contex, int index) {
          
var urun = urunler[index];
          
return Container(
            child:
InkWell(
              onTap: () {
                
Sabitler.mesajYaz(urun.urunAd!);
              },
              child:
Card(
                shape:
RoundedRectangleBorder(
                    borderRadius:
BorderRadius.circular(20)),
                child:
Center(
                  child:
Container(
                    padding:
EdgeInsets.only(left: 5, right: 5),
                    child:
Text(
                      
urun.urunAd!,
                      textAlign:
TextAlign.center,
                      style:
                          
TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      );

      
listViewWidget.add(grid);
    });
  }

  
@override
  
Widget build(BuildContext context) {
    masalariYukle();

    
return DefaultTabController(
      length:
listKategori.length,
      child:
Scaffold(
          appBar:
AppBar(
            title:
Text("MASALAR"),
            actions: [
              
IconButton(
                  onPressed: () {},
                  icon:
Icon(
                    
Icons.refresh,
                    size:
30.0,
                  )),
              
IconButton(
                  onPressed: () {
                    
dizayncount++;
                    
if (dizayncount == 6) {
                      
dizayncount = 1;
                    }
                    setState(() {});
                  },
                  icon:
Icon(
                    
Icons.list_alt_outlined,
                    size:
30.0,
                  )),
            ],
            toolbarHeight:
35,
            bottom:
TabBar(
              tabs:
listTabWidget,
            ),
          ),
          body:
TabBarView(
            children:
listViewWidget,
          )),
    );
  }
}

 

 

 

 2023 Mart 19 Pazar
 374