Dynamic Tabbar with firebase firestore
7 min readJul 14, 2023
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:readmore/readmore.dart';
import 'package:vimeo_video_player/vimeo_video_player.dart';
import '../../globalinfo.dart';
class MyHomeTBPage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomeTBPage> with SingleTickerProviderStateMixin {
CollectionReference _collectionRef = FirebaseFirestore.instance.collection('categories');
//CollectionReference _collectionRef = FirebaseFirestore.instance.collection('categories').orderBy("sort") as CollectionReference<Object>;
//CollectionReference _collectionRef = FirebaseFirestore.instance.collection('categories').where('is_active',isEqualTo: true).orderBy('sort') as CollectionReference<Object>;
//CollectionReference _collectionRef = FirebaseFirestore.instance.collection('categories').orderBy('sort',descending: false) as CollectionReference<dynamic>;
List<Tab> tabsCategory = List();
int _currentIndex = 0;
final List<String> _tabs = [];
//TabController _tabController;
// final List<Widget> _children = [
// FirstPage(),
// SecondPage(),
// ThirdPage(),
// ];
getData1() {
print("getData1 - Step1");
// Get docs from collection reference
_collectionRef.orderBy("sort").get().then((QuerySnapshot querySnapshot) {
// Get data from docs and convert map to List
final allData = querySnapshot.docs.map((doc) => doc.data()).toList();
allData.forEach((dynamic item) {
final tab_name = item['name'] ;
final tab_count = " (" + item["video_count"].toString() + ")";
final full_tab = tab_name + tab_count;
_tabs.add(full_tab);
tabsCategory.add(Tab(child: Text(full_tab,style: TextStyle(color: Colors.black),),));
});
}).catchError((error) {
// Handle any errors that occur during the data retrieval
print('Error fetching data: $error');
});
}
@override
void initState() {
super.initState();
getData1();
//_tabController = TabController(length: _tabs.length, vsync: this);
}
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
print(_currentIndex);
});
}
// @override
// void dispose() {
// _tabController.dispose();
// super.dispose();
// }
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: _tabs.length,
child: Scaffold(
appBar: TabBar(
//onTap: onTabTapped,
indicatorWeight: 4,
indicatorColor: ColorTheme.Blue,
isScrollable: true,
//controller: _tabController,
tabs: [
for (final tab in _tabs)
//Tab(text: tab.toString(),),
Tab(child: Row(
children: [
Text(tab, style: TextStyle(color: ColorTheme.Blue, fontSize: 20)),
SizedBox(
width: 5,
),
//Text('(5)',style:TextStyle(color: ColorTheme.Blue, fontSize: 20),)
],
)),
],
),
body: TabBarView(
//controller: _tabController,
children: [
// FutureBuilder(
// future: FirebaseFirestore.instance.collection('categories').get(),
// builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
// if (snapshot.hasError) {
// return Text('Error: ${snapshot.error}');
// }
// if (snapshot.connectionState == ConnectionState.waiting) {
// return CircularProgressIndicator();
// }
// return ListView(
// children: snapshot.data.docs.map((DocumentSnapshot document) {
// Map<String, dynamic> data = document.data() as Map<String, dynamic>;
// return ListTile(
// title: Text(data['name'].toString()),
// subtitle: Text(data['id'].toString()),
// );
// }).toList(),
// );
// },
// ),
// Content for other tabs
// Content for Tab 1
///1st container
// Container(
// child: Center(
// child: Text('ALl'),
// ),
// ),
//
///All Container
RefreshIndicator(
onRefresh: (){
Duration(seconds: 2);
},
child: Container(
child: Center(
child: FutureBuilder(
future: FirebaseFirestore.instance.collection('videos').where('category_id',isEqualTo: 2).where('is_active',isEqualTo: true).get(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}
return ListView(
children: snapshot.data.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data = document.data() as Map<String, dynamic>;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Column(children: [
ClipRRect(
borderRadius: BorderRadius.circular(15),
child: VimeoVideoPlayer(
autoPlay: false,
url: data['vimeo_url'],
),
),
Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
data['title'],
style: TextStyle(color: ColorTheme.Blue, fontSize: 15,fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: ReadMoreText(
data['description']+'',
trimLines: 2,
colorClickableText: Colors.pink,
trimMode: TrimMode.Line,
trimCollapsedText: 'Show more',
trimExpandedText: '...'+'Show less',
moreStyle: TextStyle(fontSize: 14,color: Colors.pink),
style: TextStyle(color: ColorTheme.Blue, fontSize: 15),
),
),
]),
),
);
ListTile(
title: Text(data['title'].toString()),
subtitle: Text(data['id'].toString()),
);
}).toList(),
);
},
),
),
),
),
// Content for Tab 2
///Narrative
Container(
child: Center(
child: FutureBuilder(
future: FirebaseFirestore.instance.collection('videos').get(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}
return ListView(
children: snapshot.data.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data = document.data() as Map<String, dynamic>;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Column(children: [
ClipRRect(
borderRadius: BorderRadius.circular(15),
child: VimeoVideoPlayer(
autoPlay: false,
url: data['vimeo_url'],
),
),
Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
data['title'],
style: TextStyle(color: ColorTheme.Blue, fontSize: 15,fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: ReadMoreText(
data['description']+'',
trimLines: 2,
colorClickableText: Colors.pink,
trimMode: TrimMode.Line,
trimCollapsedText: 'Show more',
trimExpandedText: '...'+'Show less',
moreStyle: TextStyle(fontSize: 14,color: Colors.pink),
style: TextStyle(color: ColorTheme.Blue, fontSize: 15),
),
),
]),
),
);
ListTile(
title: Text(data['title'].toString()),
subtitle: Text(data['id'].toString()),
);
}).toList(),
);
},
),
),
),
// Content for Tab 3
Container(
child: Center(
child: FutureBuilder(
future: FirebaseFirestore.instance.collection('videos').get(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}
return ListView(
children: snapshot.data.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data = document.data() as Map<String, dynamic>;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Column(children: [
ClipRRect(
borderRadius: BorderRadius.circular(15),
child: VimeoVideoPlayer(
autoPlay: false,
url: data['vimeo_url'],
),
),
Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
data['title'],
style: TextStyle(color: ColorTheme.Blue, fontSize: 15,fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: ReadMoreText(
data['description']+'',
trimLines: 2,
colorClickableText: Colors.pink,
trimMode: TrimMode.Line,
trimCollapsedText: 'Show more',
trimExpandedText: '...'+'Show less',
moreStyle: TextStyle(fontSize: 14,color: Colors.pink),
style: TextStyle(color: ColorTheme.Blue, fontSize: 15),
),
),
]),
),
);
ListTile(
title: Text(data['title'].toString()),
subtitle: Text(data['id'].toString()),
);
}).toList(),
);
},
),
),
),
// Content for Tab 4
Container(
child: Center(
child: FutureBuilder(
future: FirebaseFirestore.instance.collection('videos').get(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}
return ListView(
children: snapshot.data.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data = document.data() as Map<String, dynamic>;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Column(children: [
ClipRRect(
borderRadius: BorderRadius.circular(15),
child: VimeoVideoPlayer(
autoPlay: false,
url: data['vimeo_url'],
),
),
Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
data['title'],
style: TextStyle(color: ColorTheme.Blue, fontSize: 15,fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: ReadMoreText(
data['description']+'',
trimLines: 2,
colorClickableText: Colors.pink,
trimMode: TrimMode.Line,
trimCollapsedText: 'Show more',
trimExpandedText: '...'+'Show less',
moreStyle: TextStyle(fontSize: 14,color: Colors.pink),
style: TextStyle(color: ColorTheme.Blue, fontSize: 15),
),
),
]),
),
);
ListTile(
title: Text(data['title'].toString()),
subtitle: Text(data['id'].toString()),
);
}).toList(),
);
},
),
),
),
// Content for Tab 5
Container(
child: Center(
child: FutureBuilder(
future: FirebaseFirestore.instance.collection('videos').get(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}
return ListView(
children: snapshot.data.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data = document.data() as Map<String, dynamic>;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Column(children: [
ClipRRect(
borderRadius: BorderRadius.circular(15),
child: VimeoVideoPlayer(
autoPlay: false,
url: data['vimeo_url'],
),
),
Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
data['title'],
style: TextStyle(color: ColorTheme.Blue, fontSize: 15,fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: ReadMoreText(
data['description']+'',
trimLines: 2,
colorClickableText: Colors.pink,
trimMode: TrimMode.Line,
trimCollapsedText: 'Show more',
trimExpandedText: '...'+'Show less',
moreStyle: TextStyle(fontSize: 14,color: Colors.pink),
style: TextStyle(color: ColorTheme.Blue, fontSize: 15),
),
),
]),
),
);
ListTile(
title: Text(data['title'].toString()),
subtitle: Text(data['id'].toString()),
);
}).toList(),
);
},
),
),
),
// Content for Tab 6
Container(
child: Center(
child: FutureBuilder(
future: FirebaseFirestore.instance.collection('videos').get(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}
return ListView(
children: snapshot.data.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data = document.data() as Map<String, dynamic>;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Column(children: [
ClipRRect(
borderRadius: BorderRadius.circular(15),
child: VimeoVideoPlayer(
autoPlay: false,
url: data['vimeo_url'],
),
),
Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
data['title'],
style: TextStyle(color: ColorTheme.Blue, fontSize: 15,fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: ReadMoreText(
data['description']+'',
trimLines: 2,
colorClickableText: Colors.pink,
trimMode: TrimMode.Line,
trimCollapsedText: 'Show more',
trimExpandedText: '...'+'Show less',
moreStyle: TextStyle(fontSize: 14,color: Colors.pink),
style: TextStyle(color: ColorTheme.Blue, fontSize: 15),
),
),
]),
),
);
ListTile(
title: Text(data['title'].toString()),
subtitle: Text(data['id'].toString()),
);
}).toList(),
);
},
),
),
),
// Content for Tab 7
Container(
child: Center(
child: FutureBuilder(
future: FirebaseFirestore.instance.collection('videos').get(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}
return ListView(
children: snapshot.data.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data = document.data() as Map<String, dynamic>;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Column(children: [
ClipRRect(
borderRadius: BorderRadius.circular(15),
child: VimeoVideoPlayer(
autoPlay: false,
url: data['vimeo_url'],
),
),
Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
data['title'],
style: TextStyle(color: ColorTheme.Blue, fontSize: 15,fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: ReadMoreText(
data['description']+'',
trimLines: 2,
colorClickableText: Colors.pink,
trimMode: TrimMode.Line,
trimCollapsedText: 'Show more',
trimExpandedText: '...'+'Show less',
moreStyle: TextStyle(fontSize: 14,color: Colors.pink),
style: TextStyle(color: ColorTheme.Blue, fontSize: 15),
),
),
]),
),
);
ListTile(
title: Text(data['title'].toString()),
subtitle: Text(data['id'].toString()),
);
}).toList(),
);
},
),
),
),
// Content for Tab 8
Container(
child: Center(
child: FutureBuilder(
future: FirebaseFirestore.instance.collection('videos').get(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}
return ListView(
children: snapshot.data.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data = document.data() as Map<String, dynamic>;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Column(children: [
ClipRRect(
borderRadius: BorderRadius.circular(15),
child: VimeoVideoPlayer(
autoPlay: false,
url: data['vimeo_url'],
),
),
Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
data['title'],
style: TextStyle(color: ColorTheme.Blue, fontSize: 15,fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: ReadMoreText(
data['description']+'',
trimLines: 2,
colorClickableText: Colors.pink,
trimMode: TrimMode.Line,
trimCollapsedText: 'Show more',
trimExpandedText: '...'+'Show less',
moreStyle: TextStyle(fontSize: 14,color: Colors.pink),
style: TextStyle(color: ColorTheme.Blue, fontSize: 15),
),
),
]),
),
);
ListTile(
title: Text(data['title'].toString()),
subtitle: Text(data['id'].toString()),
);
}).toList(),
);
},
),
),
),
// Content for Tab 9
Container(
child: Center(
child: FutureBuilder(
future: FirebaseFirestore.instance.collection('videos').get(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}
return ListView(
children: snapshot.data.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data = document.data() as Map<String, dynamic>;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Column(children: [
ClipRRect(
borderRadius: BorderRadius.circular(15),
child: VimeoVideoPlayer(
autoPlay: false,
url: data['vimeo_url'],
),
),
Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
data['title'],
style: TextStyle(color: ColorTheme.Blue, fontSize: 15,fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: ReadMoreText(
data['description']+'',
trimLines: 2,
colorClickableText: Colors.pink,
trimMode: TrimMode.Line,
trimCollapsedText: 'Show more',
trimExpandedText: '...'+'Show less',
moreStyle: TextStyle(fontSize: 14,color: Colors.pink),
style: TextStyle(color: ColorTheme.Blue, fontSize: 15),
),
),
]),
),
);
ListTile(
title: Text(data['title'].toString()),
subtitle: Text(data['id'].toString()),
);
}).toList(),
);
},
),
),
),
// Content for Tab 10
Container(
child: Center(
child: FutureBuilder(
future: FirebaseFirestore.instance.collection('videos').get(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}
return ListView(
children: snapshot.data.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data = document.data() as Map<String, dynamic>;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Column(children: [
ClipRRect(
borderRadius: BorderRadius.circular(15),
child: VimeoVideoPlayer(
autoPlay: false,
url: data['vimeo_url'],
),
),
Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
data['title'],
style: TextStyle(color: ColorTheme.Blue, fontSize: 15,fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: ReadMoreText(
data['description']+'',
trimLines: 2,
colorClickableText: Colors.pink,
trimMode: TrimMode.Line,
trimCollapsedText: 'Show more',
trimExpandedText: '...'+'Show less',
moreStyle: TextStyle(fontSize: 14,color: Colors.pink),
style: TextStyle(color: ColorTheme.Blue, fontSize: 15),
),
),
]),
),
);
ListTile(
title: Text(data['title'].toString()),
subtitle: Text(data['id'].toString()),
);
}).toList(),
);
},
),
),
),
Container(
child: Center(
child: FutureBuilder(
future: FirebaseFirestore.instance.collection('videos').get(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}
return ListView(
children: snapshot.data.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data = document.data() as Map<String, dynamic>;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Column(children: [
ClipRRect(
borderRadius: BorderRadius.circular(15),
child: VimeoVideoPlayer(
autoPlay: false,
url: data['vimeo_url'],
),
),
Padding(
padding: const EdgeInsets.all(9.0),
child: Text(
data['title'],
style: TextStyle(color: ColorTheme.Blue, fontSize: 15,fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(12.0),
child: ReadMoreText(
data['description']+'',
trimLines: 2,
colorClickableText: Colors.pink,
trimMode: TrimMode.Line,
trimCollapsedText: 'Show more',
trimExpandedText: '...'+'Show less',
moreStyle: TextStyle(fontSize: 14,color: Colors.pink),
style: TextStyle(color: ColorTheme.Blue, fontSize: 15),
),
),
]),
),
);
ListTile(
title: Text(data['title'].toString()),
subtitle: Text(data['id'].toString()),
);
}).toList(),
);
},
),
),
),
],
// children: [
// for (final tab in _tabs)
// Center(child: Text(tab)),
//
// ],
),
),
);
}
}
