728x90
반응형
body 안에 TabBarView 넣는 걸로 시작
pyshics 는
physics: NeverScrollableScrollPhysics(),
로 해서 사용자가 옆으로 넘기는 제스처를 해도 넘어가지 않게 설정 가능하고
children 안에 Container() 들 넣어줬다.
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
late TabController controller;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'netflix',
theme: ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.black,
accentColor: Colors.white),
home: DefaultTabController(
length: 4,
child: Scaffold(
body: TabBarView(
physics: NeverScrollableScrollPhysics(),
children: [
Container(),
Container(),
Container(),
Container(),
],
),
bottomNavigationBar: Bottom(),
),
),
);
}
}
하단 네비게이션바를 Bottom 이라는 위젯으로 따로 만들어줬는데
여기선 TabBar() 로 탭들을 만들어줌. 이 안에 tabs 를 여러개의 Tab() 들로 만들어주면 됨.
class Bottom extends StatelessWidget {
const Bottom({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.black,
child: Container(
height: 50,
child: TabBar(
labelColor: Colors.white,
unselectedLabelColor: Colors.white60,
indicatorColor: Colors.transparent,
tabs: <Widget>[
Tab(
icon: Icon(
Icons.home,
size: 18,
),
child: Text(
'홈',
style: TextStyle(fontSize: 9),
)),
Tab(
icon: Icon(
Icons.search,
size: 18,
),
child: Text(
'검색',
style: TextStyle(fontSize: 9),
)),
Tab(
icon: Icon(
Icons.save_alt,
size: 18,
),
child: Text(
'저장한 콘텐츠 목록',
style: TextStyle(fontSize: 9),
)),
Tab(
icon: Icon(
Icons.list,
size: 18,
),
child: Text(
'더보기',
style: TextStyle(fontSize: 9),
)),
],
),
),
);
}
}
728x90
반응형
728x90
반응형
body 안에 TabBarView 넣는 걸로 시작
pyshics 는
physics: NeverScrollableScrollPhysics(),
로 해서 사용자가 옆으로 넘기는 제스처를 해도 넘어가지 않게 설정 가능하고
children 안에 Container() 들 넣어줬다.
class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { late TabController controller; @override Widget build(BuildContext context) { return MaterialApp( title: 'netflix', theme: ThemeData( brightness: Brightness.dark, primaryColor: Colors.black, accentColor: Colors.white), home: DefaultTabController( length: 4, child: Scaffold( body: TabBarView( physics: NeverScrollableScrollPhysics(), children: [ Container(), Container(), Container(), Container(), ], ), bottomNavigationBar: Bottom(), ), ), ); } }
하단 네비게이션바를 Bottom 이라는 위젯으로 따로 만들어줬는데
여기선 TabBar() 로 탭들을 만들어줌. 이 안에 tabs 를 여러개의 Tab() 들로 만들어주면 됨.
class Bottom extends StatelessWidget { const Bottom({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Container( color: Colors.black, child: Container( height: 50, child: TabBar( labelColor: Colors.white, unselectedLabelColor: Colors.white60, indicatorColor: Colors.transparent, tabs: <Widget>[ Tab( icon: Icon( Icons.home, size: 18, ), child: Text( '홈', style: TextStyle(fontSize: 9), )), Tab( icon: Icon( Icons.search, size: 18, ), child: Text( '검색', style: TextStyle(fontSize: 9), )), Tab( icon: Icon( Icons.save_alt, size: 18, ), child: Text( '저장한 콘텐츠 목록', style: TextStyle(fontSize: 9), )), Tab( icon: Icon( Icons.list, size: 18, ), child: Text( '더보기', style: TextStyle(fontSize: 9), )), ], ), ), ); } }
728x90
반응형