kajunkenny
Reputation: 3
custom bottomNavigationBar help need in flutter to call pages into view
I have a working page of code that I wanted to modify for my portfolio. I used this YouTube https://youtu.be/1ToqYMSnNhA and git https://github.com/retroportalstudio/flutter_bnb_v2 to make my design, but now I can't get my pages to call in.
working Code I used...
circular_bottom_navigation: ^2.3.0
class MainScreenScaffold extends StatefulWidget {
const MainScreenScaffold({Key? key}) : super(key: key);
@override
State<MainScreenScaffold> createState() => _MainScreenScaffoldState();
}
bool value = false;
class _MainScreenScaffoldState extends State<MainScreenScaffold> {
late List<Map<String, Object>> _pages;
int _selectedPageIndex = 2;
@override
void initState() {
_pages = [
{
'page': Abilities(),
},
{
'page': Education(),
},
{
'page': HomePage(),
},
{
'page': Employment(),
},
{
'page': About(),
},
];
super.initState();
}
void _selectPage(int index) {
setState(() {
_selectedPageIndex = index;
});
}
bool _onTap = false;
@override
Widget build(BuildContext context) {
final themeState = Provider.of<DarkThemeProvider>(context);
return Scaffold(
appBar: AppBar(
toolbarHeight: 40,
backgroundColor: Theme.of(context).brightness == Brightness.dark ? navigationBarsDMColor : navigationBarsLMColor,
elevation: Theme.of(context).brightness == Brightness.dark ? 0.0 : 3.0,
actions: <Widget>[
IconButton(
icon: FaIcon(
themeState.darkTheme
? FontAwesomeIcons.lightbulb
: FontAwesomeIcons.lightbulb,
size: 20,
color: _onTap ? Colors.black : Colors.white),
tooltip: 'Light/Dark Mode',
onPressed: () {
themeState.darkTheme = value;
setState(() {
value = !value;
_onTap = !_onTap;
});
},
),
],
leading: Builder(
builder: (context) => IconButton(
onPressed: () {
Scaffold.of(context).openDrawer();
},
icon: FaIcon(
themeState.darkTheme
? FontAwesomeIcons.bars
: FontAwesomeIcons.bars,
size: 20,
color: _onTap ? Colors.black : Colors.white),
tooltip: 'Quick Look',
color: Colors.grey,
),
),
centerTitle: true,
title: AnimatedCapsuleButton(
onPressed: () {
// Open the webpage here
},
darkModeColor: yellowDMColor,
lightModeColor: yellowLMColor,
text: 'Resume',
),
),
drawer: SkillsPageDrawer(),
body: _pages[_selectedPageIndex]['page'] as Widget,
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 0.1,
clipBehavior: Clip.antiAlias,
child: Container(
height: kBottomNavigationBarHeight * 1.1,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 50.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).brightness == Brightness.dark ? orangeDMColor : orangeLMColor,
),
child: IconButton(
icon: Icon(Icons.bar_chart, color: Colors.white),
onPressed: () => _selectPage(0),
tooltip: 'Abilities',
),
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).brightness == Brightness.dark ? greenDMColor : greenLMColor,
),
child: IconButton(
icon: Icon(Icons.school, color: Colors.white),
onPressed: () => _selectPage(1),
tooltip: 'Education',
),
),
SizedBox(width: 48), // This empty space is for the FAB.
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).brightness == Brightness.dark ? purpleDMColor : purpleLMColor,
),
child: IconButton(
icon: Icon(Icons.work, color: Colors.white),
onPressed: () => _selectPage(3),
tooltip: 'Employments',
),
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).brightness == Brightness.dark ? magentaDMColor : magentaLMColor,
),
child: IconButton(
icon: Icon(Icons.person, color: Colors.white),
onPressed: () => _selectPage(4),
tooltip: 'About',
),
),
],
),
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.miniCenterDocked,
floatingActionButton: Container(
height: 70.0,
width: 70.0,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: FloatingActionButton(
backgroundColor: Theme.of(context).brightness == Brightness.dark ? blueDMColor : blueLMColor,
foregroundColor: Colors.black,
hoverElevation: 10,
splashColor: Colors.blueGrey,
tooltip: 'Home',
elevation: 4,
child: FaIcon(
themeState.darkTheme
? FontAwesomeIcons.houseChimney
: FontAwesomeIcons.houseChimney,
color: _onTap ? Colors.white : Colors.white),
onPressed: () => setState(() {
_selectedPageIndex = 2;
}),
),
),
),
);
}
}
enter image description here working screen shot
not working
class MainScreenScaffold3 extends StatefulWidget {
const MainScreenScaffold3({Key? key}) : super(key: key);
@override
State<MainScreenScaffold3> createState() => _MainScreenScaffold3State();
}
bool value = false;
class _MainScreenScaffold3State extends State<MainScreenScaffold3> {
late List<Map<String, Object>> _pages;
int _selectedPageIndex = 2;
@override
void initState() {
_pages = [
{
'page': Abilities(),
},
{
'page': Education(),
},
{
'page': HomePage(),
},
{
'page': Employment(),
},
{
'page': About(),
},
];
super.initState();
}
void _selectPage(int index) {
setState(() {
_selectedPageIndex = index;
});
}
bool _onTap = false;
@override
Widget build(BuildContext context) {
final themeState = Provider.of<DarkThemeProvider>(context);
return Scaffold(
appBar: AppBar(
toolbarHeight: 40,
backgroundColor: Theme.of(context).brightness == Brightness.dark
? navigationBarsDMColor
: navigationBarsLMColor,
elevation: Theme.of(context).brightness == Brightness.dark ? 0.0 : 3.0,
actions: <Widget>[
IconButton(
icon: FaIcon(
themeState.darkTheme
? FontAwesomeIcons.lightbulb
: FontAwesomeIcons.lightbulb,
size: 20,
color: _onTap ? Colors.black : Colors.white),
tooltip: 'Light/Dark Mode',
onPressed: () {
themeState.darkTheme = value;
setState(() {
value = !value;
_onTap = !_onTap;
});
},
),
],
leading: Builder(
builder: (context) => IconButton(
onPressed: () {
Scaffold.of(context).openDrawer();
},
icon: FaIcon(
themeState.darkTheme
? FontAwesomeIcons.bars
: FontAwesomeIcons.bars,
size: 20,
color: _onTap ? Colors.black : Colors.white),
tooltip: 'Quick Look',
color: Colors.grey,
),
),
centerTitle: true,
title: AnimatedCapsuleButton(
onPressed: () {
// Open the webpage here
},
darkModeColor: yellowDMColor,
lightModeColor: yellowLMColor,
text: 'Resume',
),
),
drawer: SkillsPageDrawer(),
body: _pages[_selectedPageIndex]['page'] as Widget,
bottomNavigationBar: Stack(
children: [
Positioned(
bottom: 0,
left: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: 90,
child: Stack(
clipBehavior: Clip.none,
children: [
CustomPaint(
size: Size(MediaQuery.of(context).size.width, 90),
painter: BNBCustomPainter(),
),
Center(
heightFactor: 0.7,
child: FloatingActionButton(
backgroundColor:
Theme.of(context).brightness == Brightness.dark
? blueDMColor
: blueLMColor,
child: FaIcon(
themeState.darkTheme
? FontAwesomeIcons.houseChimney
: FontAwesomeIcons.houseChimney,
color: _onTap ? Colors.white : Colors.white),
elevation: 0.1,
onPressed: () => setState(() {
_selectedPageIndex = 2;
}),
),
),
Container(
width: MediaQuery.of(context).size.width,
height: 111,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(150, 0, 0, 0),
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).brightness ==
Brightness.dark
? orangeDMColor
: orangeLMColor,
),
child: IconButton(
icon: Icon(Icons.bar_chart, color: Colors.white),
onPressed: () => _selectPage(0),
tooltip: 'Abilities',
),
),
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color:
Theme.of(context).brightness == Brightness.dark
? greenDMColor
: greenLMColor,
),
child: IconButton(
icon: Icon(Icons.school, color: Colors.white),
onPressed: () => _selectPage(1),
tooltip: 'Education',
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.20,
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color:
Theme.of(context).brightness == Brightness.dark
? purpleDMColor
: purpleLMColor,
),
child: IconButton(
icon: Icon(Icons.work, color: Colors.white),
onPressed: () => _selectPage(3),
tooltip: 'Employments',
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 150, 0),
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Theme.of(context).brightness ==
Brightness.dark
? magentaDMColor
: magentaLMColor,
),
child: IconButton(
icon: Icon(Icons.person, color: Colors.white),
onPressed: () => _selectPage(4),
tooltip: 'About',
),
),
),
],
),
),
],
),
),
),
],
),
floatingActionButtonLocation:
FloatingActionButtonLocation.miniCenterDocked,
);
}
}
class BNBCustomPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = new Paint()
..color = Colors.green
..style = PaintingStyle.fill;
Path path = Path();
path.moveTo(0, 30); // Start
path.quadraticBezierTo(size.width * 0.20, 0, size.width * 0.40, 0);
path.quadraticBezierTo(size.width * 0.45, 0, size.width * 0.45, 20);
path.arcToPoint(Offset(size.width * 0.55, 20),
radius: Radius.circular(20.0), clockwise: false);
path.quadraticBezierTo(size.width * 0.55, 0, size.width * 0.65, 0);
path.quadraticBezierTo(size.width * 0.80, 0, size.width, 30);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.lineTo(0, 30);
canvas.drawShadow(path, Colors.black, 5, true);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
enter image description here screen shot of how new code should be, but won't call pages
chatGPT4 for 5 hrs of fails in every way until I ripped my eyes out.
Upvotes: 0
Views: 50
Answers (1)
Neil-NotNeo
Reputation: 996
You code seems ok, except for the optimisations needed. You are not able to see the change of page as for the usage of Stack in the bottomNavigationBar. The Stack here covers the entire viewport and the sub pages in the body goes behind.
Wrap the Stack with a SizedBox as below:
SizedBox(
height: 100,
child: Stack(
children: [
Positioned(
This will help you to see the page contents.
I suggest some optimisation as below:
late List<Map<String, Widget>> _pages;
For the body:
body: Column(
children: [
Expanded(
child: Column(
children: [
_pages[_selectedPageIndex]['page']!,
],
),
),
],
),
Here is build method code after removing some variables:
@override
Widget build(BuildContext context) {
// final themeState = Provider.of<DarkThemeProvider>(context);
print('rebuild with $_selectedPageIndex');
return Scaffold(
appBar: AppBar(
toolbarHeight: 40,
backgroundColor: Colors.blue,
elevation: 3.0,
centerTitle: true,
),
body: Column(
children: [
Expanded(
child: Column(
children: [
_pages[_selectedPageIndex]['page']!,
],
),
),
],
),
bottomNavigationBar: SizedBox(
height: 100,
child: Stack(
children: [
Positioned(
bottom: 0,
left: 0,
child: Container(
width: MediaQuery.of(context).size.width,
height: 90,
child: Stack(
clipBehavior: Clip.none,
children: [
CustomPaint(
size: Size(MediaQuery.of(context).size.width, 90),
painter: BNBCustomPainter(),
),
Center(
heightFactor: 0.7,
child: FloatingActionButton(
backgroundColor: Colors.blue,
child: Icon(Icons.house,
color: _onTap ? Colors.white : Colors.white),
elevation: 0.1,
onPressed: () => setState(() {
_selectedPageIndex = 2;
}),
),
),
Container(
//width: MediaQuery.of(context).size.width,
height: 111,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(50, 0, 0, 0),
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.orange,
),
child: IconButton(
icon:
Icon(Icons.bar_chart, color: Colors.white),
onPressed: () => _selectPage(0),
tooltip: 'Abilities',
),
),
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.indigo,
),
child: IconButton(
icon: Icon(Icons.school, color: Colors.white),
onPressed: () => _selectPage(1),
tooltip: 'Education',
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.20,
),
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.purple,
),
child: IconButton(
icon: Icon(Icons.work, color: Colors.white),
onPressed: () => _selectPage(3),
tooltip: 'Employments',
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 50, 0),
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
child: IconButton(
icon: Icon(Icons.person, color: Colors.white),
onPressed: () => _selectPage(4),
tooltip: 'About',
),
),
),
],
),
),
],
),
),
),
],
),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.miniCenterDocked,
);
}
}
And the _pages List I used to test
_pages = [
{
'page': Container(
color: Colors.orange,
child: Text('Page 1'),
),
},
{
'page': Container(
color: Colors.indigo,
child: Text('Page 2'),
),
},
{
'page': Container(
color: Colors.blue,
child: Text('Page 3'),
),
},
{
'page': Container(
color: Colors.purple,
child: Text(
'Page 4',
),
),
},
{
'page': Container(
color: Colors.red,
child: Text('Page 5'),
),
},
];
Upvotes: 0