Flutter use Provider in BottomNavigationBar - flutter

Question

I want to get data from Provider based on argument and populate that data into each BottomNavigationBarItem
On this screen I get "meetingId" argument and use that on Provider to populate a model class with data.
class MeetingDetailScreen extends StatefulWidget {
final meetingId;
const MeetingDetailScreen({Key? key, this.meetingId}) : super(key: key);
static const routeName = '/meeting-detail';
#override
_MeetingDetailScreenState createState() => _MeetingDetailScreenState();
}
class _MeetingDetailScreenState extends State<MeetingDetailScreen> {
String meetingId = '';
var _isInit = true;
var _isLoading = false;
final List<Widget> _pages = [
DetailsScreen(),
DocumentsScreen(),
AgendaScreen(),
MinutesScreen(),
];
int _selectedPageIndex = 0;
void _selectPage(int index) {
setState(() {
_selectedPageIndex = index;
});
}
#override
void initState() {
super.initState();
}
#override
void didChangeDependencies() {
if (_isInit) {
setState(() {
_isLoading = true;
});
//This is provider
Provider.of<MeetingDetails>(context)
.fetchAndSetMeetingDetails(widget.meetingId)
.then((_) {
setState(() {
_isLoading = false;
});
});
}
_isInit = false;
super.didChangeDependencies();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromRGBO(242, 243, 248, 1),
appBar: AppBar(
backgroundColor: Colors.white,
centerTitle: true,
iconTheme: const IconThemeData(color: Color.fromRGBO(150, 188, 51, 1)),
title: Image.asset(
"assets/images/appbar-logo.png",
fit: BoxFit.contain,
height: 50,
),
),
drawer: const MainDrawer(),
body: _pages[_selectedPageIndex],
//body: getPage(_selectedPageIndex),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.info_outline),
label: 'Details',
),
BottomNavigationBarItem(
icon: Icon(Icons.file_download),
label: 'Documents',
),
BottomNavigationBarItem(
icon: Icon(Icons.format_list_bulleted_outlined),
label: 'Agenda',
),
BottomNavigationBarItem(
icon: Icon(Icons.note_alt_outlined),
label: 'Minutes',
),
],
currentIndex: _selectedPageIndex,
selectedItemColor: Colors.amber[800],
onTap: _selectPage,
),
);
}
}
This is the BottomNavigationBarItem screen "DetailsScreen()"
class DetailsScreen extends StatelessWidget {
static const routeName = '/meeting-detail';
const DetailsScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final meetingDetailsList = Provider.of<MeetingDetails>(context);
final meetingDetails = meetingDetailsList.items.toList()[0];
return Center(
child: Text(
meetingDetails.event_name,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
),
),
);
}
}
Problem is Provider updates data from API and it takes a moment. when I try to use Provider data on BottomNavigationBar it throws an error because provider data is null when loading the screen. Is there any way to delay the BottomNavigationBarItem until Provider populates data?
Thank you

Answer 1

Problem is I wasn't using builder with ChangeNotifierProvider.
Inside widget I used following builder code and problem solved.
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(10.0),
itemCount: meeting.length,
itemBuilder: (ctx, i) => ChangeNotifierProvider.value(
value: meeting[i],
child:
buildDetailRow(context, 'Meeting Name', meeting[i].event_name),
),
),
],
);