[Flutter] 플러터 BottomNavigationBar, BottomNavigationBarItime 전체 소드코드

플러터(Flutter)의 BottomNavigationBar에 대한 결과 화면과 전체 소스코드입니다. 샘플 코드 전체를 복사하여 프로젝트에 붙여놓기 하시고 빌드하시면 바로 확인이 가능합니다.

 

 

 

 플러터(Flutter) BottomNavigationBar 전체 코드 실행 화면

BottomNavigationBar 최종 결과 화면

 

플러터(Flutter)의 BottomNavigationBar에 관련된 상세한 설명은 아래 포스팅을 통해 보실수 있습니다.

👇 👇 👇 👇 👇 👇

[Flutter] 플러터 BottomNavigationBar, BottomNavigationBarItem 위젯 - font, color, label

 

 

 

 플러터(Flutter) BottomNavigationBar 전체 코드

import 'package:flutter/material.dart';

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

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

  @override
  State<MyBottomNavigationBar> createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {

  // BottomNavigationBar 위젯과 연결과 3가지(home, person, settings) 위젯
  final List<Widget> _bottomWidgets = const [
    Center(
      child: Text('Index 0: Home',
          style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
    ),
    Center(
      child: Text('Index 1: Pserson',
          style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
    ),
     Center(
      child: Text('Index 2: Telegram',
          style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
    ),
    Center(
      child: Text('Index 3: Settings',
          style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
    ),
  ];

  // BottomNavigationBar 위젯에서 현재 선택한 아이콘 인덱스
  int _currentBottomNavbarIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: 
      Scaffold(
        body: _bottomWidgets[_currentBottomNavbarIndex],
        bottomNavigationBar: 
        
        BottomNavigationBar(
          currentIndex: _currentBottomNavbarIndex,
          onTap: (value) {
            setState(() {
              _currentBottomNavbarIndex = value;
            });
          },
          backgroundColor: Colors.green, //Bar의 배경색
          selectedItemColor: Colors.white, //선택된 아이템의 색상
          unselectedItemColor: Colors.white.withOpacity(.60), //선택 안된 아이템의 색상
          selectedFontSize: 14, //선택된 아이템의 폰트사이즈
          unselectedFontSize: 14, //선택 안된 아이템의 폰트사이즈
          showSelectedLabels: false, // 선택 라벨 보여줄지 여부
          showUnselectedLabels: false, // 비선택 라벨 보여줄지 여부
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
            BottomNavigationBarItem(icon: Icon(Icons.person), label: 'person'),
            BottomNavigationBarItem(icon: Icon(Icons.telegram), label: 'telegram'),
            BottomNavigationBarItem(
                icon: Icon(Icons.settings), label: 'settings'),
          ],
        ),
      ),
    );
  }
}