In the home_screen.dart, I added 5 of bottomNavigationBar to move easily to other pages. At the second tab(Icons.directions_boat_filled), when I tab this It shows the AppBar and bottomNavigationBar also.
However, the GestureDetector which moves to the vessel_screen.dart, I couldn't find any AppBar and bottomNavigationBar when I click this button.
How can I see the AppBar and bottomNavigationBar in the same way when I clicked the second bottomNavigationBar Icon?
Here is the home_screen.dart
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:shipda/constants.dart';
import 'package:shipda/screens/home/home_main.dart';
import 'package:get/get.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:shipda/screens/license_screen/license_screen.dart';
import 'package:shipda/screens/parts_screen/parts_screen.dart';
import 'package:shipda/screens/tab_bar_screen/tab_bar_screen.dart';
import 'package:shipda/screens/vessel_screen/vessel_screen.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final _authentication = FirebaseAuth.instance;
User? loggedUser;
final firestore = FirebaseFirestore.instance;
var resultData;
void getData() async {
var result = await firestore
.collection('user')
.doc('vUj4U27JoAU6zgFDk6sSZiwadQ13')
.get();
setState(() {
resultData = result.data();
});
}
@override
void initState() {
super.initState();
getCurrentUser();
getData();
}
void getCurrentUser() {
try {
final user = _authentication.currentUser;
if (user != null) {
loggedUser = user;
print(loggedUser!.email);
}
} catch (e) {
print(e);
}
}
// Bottom Navigation Bar 스크린 인덱스
int _selectedIndex = 0;
final List<Widget> _widgetOptions = <Widget>[
HomeMain(),
VesselScreen(),
LicenseScreen(),
PartsScreen(),
TabBarScreen(),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
// ----
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'쉽다로고',
style: TextStyle(
color: baseColor50,
),
),
backgroundColor: baseColor10,
elevation: 0.0,
),
body: SafeArea(
child: _widgetOptions.elementAt(_selectedIndex),
),
// 바텀네비게이션바
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: primaryColor50,
currentIndex: _selectedIndex,
onTap: _onItemTapped,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: _selectedIndex == 0
? Icon(Icons.home)
: Icon(Icons.home_outlined),
label: '홈',
),
// This is the icon.
BottomNavigationBarItem(
icon: _selectedIndex == 1
? Icon(Icons.directions_boat_filled)
: Icon(Icons.directions_boat_outlined),
label: '선박',
),
BottomNavigationBarItem(
icon: _selectedIndex == 2
? Icon(Icons.document_scanner)
: Icon(Icons.document_scanner_outlined),
label: '허가',
),
BottomNavigationBarItem(
icon: _selectedIndex == 3
? Icon(Icons.handyman)
: Icon(Icons.handyman_outlined),
label: '부품',
),
BottomNavigationBarItem(
icon: Icon(Icons.menu),
label: '전체',
),
],
),
);
}
}
home_main.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:shipda/screens/vessel_screen/vessel_screen.dart';
import '../../constants.dart';
import '../vessel_screen/fishing_vessel/fishing_vessel_screen.dart';
class HomeMain extends StatelessWidget {
const HomeMain({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
height: 680,
width: MediaQuery.of(context).size.width,
color: baseColor20,
child: Padding(
padding: const EdgeInsets.fromLTRB(16.0, 0.0, 16.0, 0.0),
child: Column(
children: [
marginHeight22,
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// 최근검색버튼
GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
color: primaryColor20,
border: Border.all(
color: primaryColor20,
),
borderRadius: BorderRadius.all(
Radius.circular(12.0),
),
),
height: 48,
width: MediaQuery.of(context).size.width * 0.435,
child: Center(
child: Text(
'최근검색',
style: TextStyle(
color: primaryColor50,
fontFamily: 'semi-bold',
fontSize: titleSmall,
),
),
),
),
),
// 관심매물버튼
GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
color: primaryColor20,
border: Border.all(
color: primaryColor20,
),
borderRadius: BorderRadius.all(
Radius.circular(12.0),
),
),
height: 48,
width: MediaQuery.of(context).size.width * 0.435,
child: Center(
child: Text(
'관심매물',
style: TextStyle(
color: primaryColor50,
fontFamily: 'semi-bold',
fontSize: titleSmall,
),
),
),
),
),
],
),
marginHeight22,
// 광고영역
Container(
decoration: BoxDecoration(
color: primaryColor30,
borderRadius: BorderRadius.all(
Radius.circular(12.0),
),
),
height: 120,
width: MediaQuery.of(context).size.width,
child: Center(
child: Text(
'광고영역',
style: TextStyle(
fontSize: titleLarge,
color: baseColor10,
),
),
),
),
marginHeight22,
// 선박판매 버튼
Container(
decoration: BoxDecoration(
color: primaryColor50,
borderRadius: BorderRadius.all(
Radius.circular(12.0),
),
),
height: 48,
width: MediaQuery.of(context).size.width,
child: Center(
child: Text(
'내 선박 판매하기',
style: TextStyle(
fontSize: titleMedium,
fontFamily: 'semi-bold',
color: baseColor10,
),
),
),
),
marginHeight22,
// 선박매물검색, 허가, 부품
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
// This is the button to move the vessel_screeen.dart
GestureDetector(
onTap: (){
Get.to(() => VesselScreen());
},
child: Container(
decoration: BoxDecoration(
color: baseColor10,
borderRadius: BorderRadius.all(
Radius.circular(12.0),
),
),
height: 196,
width: MediaQuery.of(context).size.width * 0.435,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'선박매물',
style: TextStyle(
fontSize: titleLarge,
fontFamily: 'semi-bold',
color: baseColor50,
),
),
marginHeight4,
Text(
'검색하러가기',
style: TextStyle(
fontSize: bodyLarge,
fontFamily: 'regular',
color: baseColor50,
),
),
],
),
),
),
),
Column(
children: [
// 어업 허가
Container(
decoration: BoxDecoration(
color: baseColor10,
borderRadius: BorderRadius.all(
Radius.circular(12.0),
),
),
height: 90,
width: MediaQuery.of(context).size.width * 0.435,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'어업허가',
style: TextStyle(
fontSize: titleLarge,
fontFamily: 'semi-bold',
color: baseColor50,
),
),
marginHeight4,
Text(
'매매',
style: TextStyle(
fontSize: bodyLarge,
fontFamily: 'regular',
),
)
],
),
),
),
marginHeight16,
Container(
decoration: BoxDecoration(
color: baseColor10,
borderRadius: BorderRadius.all(
Radius.circular(12.0),
),
),
height: 90,
width: MediaQuery.of(context).size.width * 0.435,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'부품',
style: TextStyle(
fontSize: titleLarge,
fontFamily: 'semi-bold',
color: baseColor50,
),
),
marginHeight4,
Text(
'중고부품거래',
style: TextStyle(
fontSize: bodyLarge,
fontFamily: 'regular',
),
)
],
),
),
),
],
),
],
),
marginHeight22,
// 내 선박 등록하기
Container(
decoration: BoxDecoration(
color: baseColor10,
borderRadius: BorderRadius.all(
Radius.circular(12.0),
),
),
height: 132,
width: MediaQuery.of(context).size.width,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'어선번호 입력하고 선박관리 한 번에!',
style: TextStyle(
fontSize: titleMedium,
color: baseColor50,
fontFamily: 'semi-bold',
),
),
marginHeight16,
Container(
decoration: BoxDecoration(
color: baseColor10,
border: Border.all(
color: primaryColor50,
),
borderRadius: BorderRadius.all(
Radius.circular(12.0),
),
),
height: 48,
width: MediaQuery.of(context).size.width * 0.75,
child: Center(
child: Text(
'내 선박 등록하기',
style: TextStyle(
fontSize: titleMedium,
fontFamily: 'semi-bold',
color: primaryColor50,
),
),
),
),
],
),
),
),
],
),
),
),
);
}
}
Here is the vessel_screen.dart
import 'package:flutter/material.dart';
import 'package:shipda/constants.dart';
import 'package:shipda/screens/vessel_screen/fishing_vessel/fishing_vessel_screen.dart';
import 'package:shipda/screens/vessel_screen/leisure_vessel/leisure_vessel_screen.dart';
import 'package:shipda/screens/vessel_screen/other_vessel/other_vessel_screen.dart';
class VesselScreen extends StatelessWidget {
const VesselScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: TabBar(
indicatorColor: informationColor50,
labelStyle: TextStyle(
fontSize: titleMedium,
fontFamily: 'semi-bold',
),
unselectedLabelColor: primaryColor50,
labelColor: informationColor50,
tabs: [
Tab(text: '어선'),
Tab(text: '레저선'),
Tab(text: '특수선/기타선'),
],
),
body: TabBarView(
children: [
FishingVesselScreen(),
LeisureVesselScreen(),
OtherVesselScreen(),
],
),
),
);
}
}
original missing appear and bottomnavbar
CodePudding user response：
In your home_screen.dart, wrap the safe area in Navigator widget. This way, all the routes pushed will be inside the Scaffold of home_screen.dart
More info https://codewithandrea.com/articles/flutter-bottom-navigation-bar-nested-routes-gorouter-beamer/
CodePudding user response：
This method can be applied and it will keep you away from all bottomnavbar problems