sharon
Reputation: 403
Exception caught by widgets library in bottom navigation bar
Hi, anyone know what the problem is? I'm trying to add a bottom navigation bar, but the following message is showing i tried to add bottom navigation bar and this is the code i made.
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Builder(builder: (context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedFontSize: 12,
unselectedItemColor: Colors.grey,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Beranda',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'Akademik',
),
BottomNavigationBarItem(
icon: Icon(Icons.credit_card),
label: 'Pembayaran',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
selectedItemColor: primaryColor,
onTap: (index) {
setState(
() {
_selectedIndex = index;
},
);
},
),
body: Column(
children: [
_widgetOptions.elementAt(_selectedIndex),
body(),
],
),
);
}),
),
);
}
but when I try to run it the following error occurs, and I feel a little confused, I've tried to find some references but still can't find a solution that fits my case
Launching lib\main.dart on sdk gphone64 x86 64 in debug mode...
lib\main.dart:1
√ Built build\app\outputs\flutter-apk\app-debug.apk.
Connecting to VM Service at ws://127.0.0.1:62216/ZIcDnqzIkLk=/ws
E/SurfaceSyncer( 7593): Failed to find sync for id=0
W/Parcel ( 7593): Expecting binder but got null!
D/EGL_emulation( 7593): app_time_stats: avg=7.90ms min=2.99ms max=180.93ms count=62
D/EGL_emulation( 7593): app_time_stats: avg=15.06ms min=3.37ms max=21.43ms count=60
════════ Exception caught by widgets library ═══════════════════════════════════
The following StackOverflowError was thrown building Builder:
Stack Overflow
The relevant error-causing widget was
Builder
lib\…\homepage\home_page.dart:31
When the exception was thrown, this was the stack
this my home_page.dart
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
int _selectedIndex = 0;
final List<Widget> _widgetOptions = <Widget>[
const HomePage(),
const AcademicPage(),
const CreditPage(),
const ProfilePage(),
];
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Scaffold(
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedFontSize: 12,
unselectedItemColor: Colors.grey,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Beranda',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'Akademik',
),
BottomNavigationBarItem(
icon: Icon(Icons.credit_card),
label: 'Pembayaran',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
selectedItemColor: primaryColor,
onTap: (index) {
setState(
() {
_selectedIndex = index;
},
);
},
),
body: Column(
children: [
_widgetOptions.elementAt(_selectedIndex),
body(),
],
),
),
),
);
}
Widget body() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(
height: 30,
),
Container(
child: FutureBuilder<UserBiodata>(
future: AuthProvider().getDataMahasiswa(),
builder: (context, snapshot) {
if (snapshot.hasData) {
// return Text(snapshot.data!.status);
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${snapshot.data!.data.name}',
style: bold4,
),
Text(
'${snapshot.data!.data.prodi}',
style: bold6,
),
Text(
'Semester ${snapshot.data!.data.smt}',
style: regular6,
)
],
),
Image.asset(
'assets/images/user.png',
width: 60,
),
],
);
} else if (snapshot.hasError) {
return Text('${snapshot.error}');
}
return const CircularProgressIndicator();
},
),
),
const SizedBox(
height: 30,
),
Image.asset(
'assets/images/statis.png',
),
const SizedBox(
height: 30,
),
Text(
'Akses Cepat',
style: bold4,
),
const SizedBox(
height: 18,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
height: 90,
width: 90,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(
Radius.circular(20),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 1,
blurRadius: 9,
offset: const Offset(1, 2), // changes position of shadow
),
],
),
child: Column(
children: [
const SizedBox(
height: 10,
),
Image.asset(
'assets/images/icon_jadwal.png',
height: 40,
),
const SizedBox(
height: 12,
),
Text(
'Jadwal Kuliah',
style: regular7,
)
],
),
),
Container(
height: 90,
width: 90,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(
Radius.circular(20),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 1,
blurRadius: 9,
offset: const Offset(1, 2), // changes position of shadow
),
],
),
child: Column(
children: [
const SizedBox(
height: 10,
),
Image.asset(
'assets/images/icon_jadwal.png',
height: 40,
),
const SizedBox(
height: 12,
),
Text(
'Jadwal Kuliah',
style: regular7,
)
],
),
),
Container(
height: 90,
width: 90,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(
Radius.circular(20),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 1,
blurRadius: 9,
offset: const Offset(1, 2), // changes position of shadow
),
],
),
child: Column(
children: [
const SizedBox(
height: 10,
),
Image.asset(
'assets/images/icon_jadwal.png',
height: 40,
),
const SizedBox(
height: 12,
),
Text(
'Jadwal Kuliah',
style: regular7,
)
],
),
),
],
),
const SizedBox(
height: 18,
),
Text(
'Dosen',
style: bold4,
),
const SizedBox(
height: 18,
),
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(
Radius.circular(8),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 1,
blurRadius: 9,
offset: const Offset(1, 2), // changes position of shadow
),
],
),
child: Padding(
padding: const EdgeInsets.all(14),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Muhamad Fahmi Nugraha M.Kom',
style: bold6,
),
Text(
'kaprodi Fakultas Komputer',
style: bold7,
),
const SizedBox(
height: 12,
),
Row(
children: [
Container(
width: 94,
height: 32,
child: TextButton(
onPressed: () => showDialog(
context: context,
builder: (BuildContext context) =>
_signOutDialog(context),
),
style: TextButton.styleFrom(
backgroundColor: primaryColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
child: Text(
"WhatsApp",
style: boldButton1,
),
),
),
const SizedBox(
width: 8,
),
Container(
width: 94,
height: 32,
child: TextButton(
onPressed: (() {
var result = Navigator.pushNamed(
context,
AppRoute.biodataeRoute,
);
}),
style: TextButton.styleFrom(
backgroundColor: button,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
child: Text(
"Detail",
style: boldButton2,
),
),
),
],
)
],
),
Image.asset(
'assets/images/user.png',
width: 50,
)
],
),
),
),
const SizedBox(
height: 18,
),
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: const BorderRadius.all(
Radius.circular(8),
),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 1,
blurRadius: 9,
offset: const Offset(1, 2), // changes position of shadow
),
],
),
child: Padding(
padding: const EdgeInsets.all(14),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Muhamad Fahmi Nugraha M.Kom',
style: bold6,
),
Text(
'kaprodi Fakultas Komputer',
style: bold7,
),
const SizedBox(
height: 12,
),
Row(
children: [
Container(
width: 94,
height: 32,
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
backgroundColor: primaryColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
child: Text(
"WhatsApp",
style: boldButton1,
),
),
),
const SizedBox(
width: 8,
),
Container(
width: 94,
height: 32,
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
backgroundColor: button,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
child: Text(
"Detail",
style: boldButton2,
),
),
),
],
)
],
),
Image.asset(
'assets/images/user.png',
width: 50,
)
],
),
),
),
],
);
}
}
Widget _signOutDialog(BuildContext context) {
return AlertDialog(
title: Column(
children: [
Image.asset(
'assets/images/ic_lgt.png',
)
],
),
content: const Text('Apakah kamu yakin ingin logout?'),
actions: <Widget>[
TextButton(
onPressed: () => AuthProvider().signOut(context),
child: const Text('Ya'),
),
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text(
'TIDAK',
style: TextStyle(color: Colors.red),
),
),
],
);
}
Upvotes: 0
Views: 88
Answers (1)
Prashant Vaddoriya
Reputation: 615
replace your code with this.
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),
child:Scaffold(
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
selectedFontSize: 12,
unselectedItemColor: Colors.grey,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Beranda',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'Akademik',
),
BottomNavigationBarItem(
icon: Icon(Icons.credit_card),
label: 'Pembayaran',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
selectedItemColor: primaryColor,
onTap: (index) {
setState(
() {
_selectedIndex = index;
},
);
},
),
body: Column(
children: [
_widgetOptions.elementAt(_selectedIndex),
body(),
],
),
),
),
);
}
Upvotes: 2
Related Questions
- Why is my app crashing when I try to implement my bottom navigation bar in Flutter?
- Flutter Exception caught by widgets library
- BottomNavigationBar index error (flutter)
- Flutter navigation with the bottomNavigationBar between pages crash the app
- Exception Caught By Widgets Library when coming back from a page
- Invalid argument(s) on bottom navigation, flutter
- EXCEPTION CAUGHT BY WIDGETS LIBRARY in flutter app
- Flutter: BottomNavigationBar file giving error for context
- Widgets in my body stopped working after adding Bottom Navigation bar in flutter
- Flutter BottomNavigation Issue