Flutter Tab Kullanımı

ilk olarak aşağıdaki gib bir tab listesinin oldugunu varsayıyoruz.

List<String> categories = ["a", "b", "c", "d", "e", "f", "g", "h"];

aşağıdaki gibi kod bloğunu kullanırsak tab sekmelerimiz otomatik olarak listedeki ler adedince uretilecektir.

class TabsDemo extends StatefulWidget {
  @override
  _TabsDemoState createState() => _TabsDemoState();
}

class _TabsDemoState extends State<TabsDemo> {
  TabController _controller;

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

    @override
    Widget build(BuildContext ctxt) {
      return new MaterialApp(
        home: DefaultTabController(
            length: categories.length,
            child: new Scaffold(
              appBar: new AppBar(
                title: new Text("Title"),
                bottom: new TabBar(
                  isScrollable: true,
                    tabs: List<Widget>.generate(categories.length, (int index){
                  print(categories[0]);
                  return new Tab(icon: Icon(Icons.directions_car), text: "some random text");

                }),

              ),
            ),

        body: new TabBarView(
             children: List<Widget>.generate(categories.length, (int index){
                print(categories[0]);
                return new Text("again some random text");

             }),
          )
       ))
      );
  }

 

burada önemli nokta tabbarwiew adedi ile tab sekmelerinin adedi aynı olmalıdır. defaulr sıralamaya göre calısır. 

birinci tab tıklandıgında  birinci tabbarwiew görüntülenir.

Müellifi: Hüsrev YILDIZ
Yayın Tarihi : 1.9.2019

Hüsrev YILDIZ