Böyle bir root page yazdım fakat istediğim sayfalarda bottomNavigationBar'ı nasıl gösterceğimi bilmiyorum, nasıl yapmalıyım? Yani tabPages de gösterilen sayfalarda nasıl bu yazdığım Navigation bar'ı göstereceğim?
Kod:
import 'dart:async';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:mythgames/core/init/constants/widget_constants.dart';
import 'package:mythgames/presentation/pages/homepage/homepage_screen.dart';
import 'package:mythgames/presentation/pages/profile/profile_screen.dart';
import 'package:mythgames/presentation/pages/settings/settings_screen.dart';
class RootPage extends StatefulWidget {
_RootPageState createState() => _RootPageState();
}
class _RootPageState extends State<RootPage>{
int selectedTab = 0;
late PageController _pageController;
List<Widget> tabPages = [
HomepageScreen(),
SettingsScreen(),
ProfileScreen()
];
@override
void initState() {
_pageController = PageController(initialPage: selectedTab);
super.initState();
}
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
Color iconColor = Color(0xFFC4D9FF);
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
double widthSize = resWidthSize(context);
double heightSize = resHeightSize(context);
return GestureDetector(
onTap: () => FocusScope.of(context).requestFocus(new FocusNode()),
child: Scaffold(
backgroundColor: Colors.black,
key: _scaffoldKey,
bottomNavigationBar: ClipRRect(
borderRadius: const BorderRadius.only(
topRight: Radius.circular(40),
topLeft: Radius.circular(40),
),
child: Container(
color: const Color(0xFF2a2319),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15,vertical: 20),
child: GNav(
selectedIndex: selectedTab,
tabBorderRadius: WidgetConstants.borderRadius1,
gap: 8,
backgroundColor: const Color(0xFF2a2319),
color: const Color(0xFF625546),
activeColor: const Color(0xFFffffff),
tabBackgroundColor:const Color(0xFFac8c6b),
padding: const EdgeInsets.all(9),
onTabChange: onTabTapped,
tabs: const [
GButton(
icon: Icons.home_filled,
text: "Home",
textStyle: TextStyle(
fontSize: 15,
fontFamily: "Inter",
fontWeight: FontWeight.w500,
color: Color(0xFFffffff),
),
),
GButton(
icon: Icons.explore_outlined,
text: "Search",
textStyle: TextStyle(
fontSize: 15,
fontFamily: "Inter",
fontWeight: FontWeight.w500,
color: Color(0xFFffffff),
),
),
GButton(
icon: Icons.person_outline,
text: "Profile",
textStyle: TextStyle(
fontSize: 15,
fontFamily: "Inter",
fontWeight: FontWeight.w500,
color: Color(0xFFffffff),
),
),
],
),
),
),
),
body: PageView(
children: tabPages,
onPageChanged: onPageChanged,
controller: _pageController,
physics: NeverScrollableScrollPhysics(),
),
),
);
}
void onPageChanged(int page) {
// PageView onPageChanged
setState(() {
this.selectedTab = page;
});
}
void onTabTapped(int index) { // BottomNavigatonBar OnTap
FocusScope.of(context).requestFocus(new FocusNode());
this._pageController.jumpToPage(index);
}
double resWidthSize(BuildContext context){
double widthSize;
if(MediaQuery.of(context).size.width>598) widthSize = MediaQuery.of(context).size.width * 0.0072;
else widthSize = MediaQuery.of(context).size.width * 0.01;
return widthSize;
}
double resHeightSize(BuildContext context){
double heightSize = MediaQuery.of(context).size.height * 0.01;
return heightSize;
}
}
Son düzenleyen: Moderatör: