<div id="readability-page-1" class="page"><div>
 <div id="SE-60bab83c-eb73-4b23-a7c4-00932f0a24a5">
 ​​개요​Flutter 에서 제공하는 BottomNavigationBar 를 사용하는 방법을 설명한다.​​​디렉토리 구조​아래 화면과 같이 디렉토리 구조를 잡았다.<ul><li>main -&gt; root_screen.dart (bottomNavigationBar 포함) -&gt; (선택에 따라) page 표시</li></ul>
 </div> <div id="SE-5b83b42c-8069-4430-8da3-2cc3942fa815">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-5b83b42c-8069-4430-8da3-2cc3942fa815&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMzEyMTlfNTgg/MDAxNzAyOTc4OTQxODEz.15n16PaxrkzhCXKzaHw6nLx2t9_guoHQVPwEDjg7gLUg.3OhEYNepRLHmw1s1ycbBMV5qjPhsfjYsJn2eyCAxQ9gg.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2023-12-19_%EC%98%A4%ED%9B%84_6.42.19.png&quot;, &quot;originalWidth&quot; : &quot;298&quot;, &quot;originalHeight&quot; : &quot;167&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyMzEyMTlfNTgg/MDAxNzAyOTc4OTQxODEz.15n16PaxrkzhCXKzaHw6nLx2t9_guoHQVPwEDjg7gLUg.3OhEYNepRLHmw1s1ycbBMV5qjPhsfjYsJn2eyCAxQ9gg.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2023-12-19_%EC%98%A4%ED%9B%84_6.42.19.png?type=w800" data-width="693" data-height="388" alt="">
 </a>
 
 </div>
 <div id="SE-875ef55e-aa6c-4ea3-b6db-619754c90c3a">
 import 'package:demo/screens/root_screen.dart';
import 'package:flutter/material.dart';

void main() {
 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
 const MyApp({super.key});

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'Flutter Demo',
 theme: ThemeData(
 primarySwatch: Colors.blue,
 ),
 home: RootScreen(),
 );
 }
}

 </div> <div id="SE-ded57a1d-11c5-4efb-a7ab-f0cfa4905b0e">
 ​​​screens/root_screen.dart
 </div> <div id="SE-567c71d8-2f76-47be-89b8-b169a086dfe0">
 import 'package:demo/screens/home_screen.dart';
import 'package:demo/screens/profile_screen.dart';
import 'package:demo/screens/settings_screen.dart';
import 'package:flutter/material.dart';

class RootScreen extends StatefulWidget {
 const RootScreen({super.key});

 @override
 State&lt;RootScreen&gt; createState() =&gt; _RootScreenState();
}

class _RootScreenState extends State&lt;RootScreen&gt; {
 int currentIndex = 0;

 final screens = [
 HomeScreen(),
 ProfileScreen(),
 SettingsScreen(),
 ];

 void onBottomNavigationBarItemTap(int index) {
 print(index);
 setState(() {
 currentIndex = index;
 });
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 body: screens[currentIndex],
 bottomNavigationBar: BottomNavigationBar(
 currentIndex: currentIndex,
 onTap: onBottomNavigationBarItemTap,
 items: [
 BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
 BottomNavigationBarItem(icon: Icon(Icons.person), label: "Profile"),
 BottomNavigationBarItem(
 icon: Icon(Icons.settings), label: "Settings"),
 ],
 ),
 );
 }
}

 </div> <div id="SE-8d002ff3-a2ce-49d0-819e-e173899f5dce">
 ​​​​screens/home_screen.dart
 </div> <div id="SE-53fc6313-b5e7-4583-8461-3f709733cad4">
 import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
 const HomeScreen({super.key});

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 body: Center(
 child: Text("Home Page"),
 ),
 );
 }
}

 </div> <div id="SE-a20be1df-0d08-4f41-84f2-f8fcc0146655">
 ​​​​screens/profile_screen.dart
 </div> <div id="SE-e498b7ba-0ca4-41b3-a7d9-47e233670051">
 import 'package:flutter/material.dart';

class ProfileScreen extends StatelessWidget {
 const ProfileScreen({super.key});

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 body: Center(
 child: Text("Profile Page"),
 ),
 );
 }
}

 </div> <div id="SE-c75a1318-bb53-4dd3-bdff-99904dfff682">
 ​​​​screens/settings_screen.dart
 </div> <div id="SE-6d2e8fbf-b516-46d2-8321-e759fcaede87">
 import 'package:flutter/material.dart';

class SettingsScreen extends StatelessWidget {
 const SettingsScreen({super.key});

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 body: Center(
 child: Text("Settings Page"),
 ),
 );
 }
}

 </div> <div id="SE-fac0e2f6-f46e-41ef-8e36-6c8a8ae83ca5">
 ​​​참고자료​BottomNavigationBar 에 관해 좀 더 깊이있는 내용을 알고싶다면 아래 링크를 참고하자.상당히 설명을 자세히 잘 해놓은듯 하다.​
 </div> <div id="SE-8b7c41d2-2e9a-4943-a025-106de9bce715">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-8b7c41d2-2e9a-4943-a025-106de9bce715&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;256&quot;, &quot;originalHeight&quot; : &quot;103&quot;, &quot;linkUse&quot; : &quot;true&quot;, &quot;link&quot; : &quot;https://qr.kakaopay.com/2810060110000443710583945dc00000&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1" alt="">
 </a>
 
 카카오페이로 후원
 </div>
 <div id="SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;330&quot;, &quot;originalHeight&quot; : &quot;330&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1" alt="">
 </a>
 
 카카오페이 QR코드로 후원
 </div>
 </div></div>

나만의공간。

KIM JUNGHWAN

개요 Flutter 에서 제공하는 BottomNavigationBar 를 사용하는 방법을 설명한다. 디렉토리 구조 아래 화면과 같이 디렉토리 구조를 잡았다. main -> root_screen.dart (bottomNavigationBar 포함) -> (선택에 따라) page 표시 코드 main.dart screens/root_screen.dart screens/home_screen.dart screens/profile_screen.dart screens/settings_screen.dart 참고자료 BottomNavigationBar 에 관해 좀 더 깊이있는 내용을 알고싶다면 아래 링크를 참고하자. 상당히 설명을 자세히 잘 해놓은듯 하다.

[Flutter] BottomNavigationBar 구현

댓글