Şimdi Ara

Flutter BottomNavigationBar nasıl gösterilir?

Daha Fazla
Bu Konudaki Kullanıcılar: Daha Az
2 Misafir - 2 Masaüstü
5 sn
3
Cevap
0
Favori
140
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
0 oy
Öne Çıkar
Sayfa: 1
Giriş
Mesaj
  • 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

    Yığını:
    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; } }







  • Bir tane StatefulWidget oluştur tab diye. En aşağısına bir bar koy. Tıklamana göre üstte widget göster.

  • 
Sayfa: 1
- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.