이번엔 위 사진처럼 어플의 하단바와 바 클릭 시 화면 전환을 구현해 보겠다.
BottomBar(하단 바)
class BottomBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.grey,
child: TabBar(
indicatorSize: TabBarIndicatorSize.label,
indicatorWeight: 4,
labelColor: Colors.black,
unselectedLabelColor: Colors.black38,
labelStyle: TextStyle(
fontSize: 17,
),
tabs: [
Tab(
icon: Icon(
Icons.home,
size: 20,
),
text: 'Home',
),
Tab(
icon: Icon(
Icons.message,
size: 20,
),
text: 'Messages',
),
Tab(
icon: Icon(
Icons.people,
size: 20,
),
text: 'My',
),
],
),
);
}
}
class BottomBar extends StatelessWidget 이 코드만 사용하면 손쉽게 하단 바를 구현할 수 있었다.
하지만 여기서 주의해야 할 점이
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
),
body: Center(
bottomNavigationBar: BottomBar(),
),
),
);
}
이걸 넣어워야 한다. 나도 bottomNavigationBar: BottomBar(), 이걸 빼먹어서 애먹었음 💦💦
플러터가 정말 좋은 점이 Icons.home 이거 하나면 집모양의 아이콘을 사용할 수 있다.
나는 home, messages , my 이렇게 3개로 구성했다
https://muhly.tistory.com/22
[플러터] bottom Navigation을 구현하는 3가지 방법
하단에 위치하는 네비게이션바를 구현하는 방법은 크게 3가지가 있다. 약간의 차이점이 있으니 필요에 따라 사용하면 되겠다. DefaultTabController 사용 return MaterialApp( title: 'chat used firebase', theme: Them
muhly.tistory.com
참고한 사이트
Navigator(화면 전환)
플러터에서는 화면 전환을 위해선 Navigator를 사용한다.
나는 문의 -> InquiryScreen / 추가 -> AddProductScreen / 자유 -> FreeBoardScreen / 신고 -> ReportScreen
먼저class CustomerServiceHome extends StatelessWidget 이걸 만들어 여기 안에
children: <Widget>[
buildGridItem(
context,
'문의하기',
InquiryScreen(),
),
buildGridItem(context, '제품추가', AddProductScreen()),
buildGridItem(context, '자유게시판', FreeBoardScreen()),
buildGridItem(context, '신고하기', ReportScreen()),
],
Widget buildGridItem(BuildContext context, String title, Widget screen) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => screen),
);
},
child: Container(
margin: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
title,
style: TextStyle(color: Colors.black),
),
Icon(
Icons.arrow_forward,
color: Colors.black,
size: 60,
),
],
),
),
);
}
}
내가 전환할 화면들은 그리드아이템으로 구현했다.
class InquiryScreen extends StatelessWidget {
const InquiryScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("문의하기"),
),
body: Center(
child: ElevatedButton(
child: Text("문의 화면 내용"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => InquiryDetailScreen(),
),
);
},
),
),
);
}
}
class InquiryDetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('문의 화면'),
),
body: Center(
child: Text('문의 화면 내용'),
),
);
}
}
이어서 이동할 화면도 구현해서 페이지 이동이 가능하도록 하였다.
InquiryScreen, InquiryDetailScreen 둘중에 하나라도 하지 않으면 나중에
Another exception was thrown: Navigator operation requested with a context that does not include a Navigator. 이 오류가 나면서 화면 전환이 되지 않으니 주의해야 한다.
또한 Navigator.push이걸 사용해서 새로운 화면에 내가 요청한 화면의 스택을 추가하도록 하였다.
이걸 통해 이전화면으로 돌아갈 수 있다.
https://www.youtube.com/watch?v=BWG9XS5ecig
참고한 영상
내가 구현한 화면
화면이 잘 이동된 모습
오늘은 이동될 화면까지만 구현했지만 이제 문의 화면 , 상품 추가화면 등등 화면을 구성하고
글 작성 시 추가되도록 구현 할 예정이다.
일단 화면 구성이 우선!!