[Flutter] Bottom Navigation Bar 의 "모든 것"

[Flutter]

 

추천 포스팅

[Flutter] Bottom App Bars의 "모든 것"

[Flutter] Bottom App Bars 의 "모든 것"

 

0

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(title: 'MyApp', home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyApp createState() => _MyApp();
}

class _MyApp extends State<MyApp> {
  int _selectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomNavigationBar'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.grey,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.white.withOpacity(.60),
        selectedFontSize: 14,
        unselectedFontSize: 14,
        currentIndex: _selectedIndex, //현재 선택된 Index
        onTap: (int index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            title: Text('Favorites'),
            icon: Icon(Icons.favorite),
          ),
          BottomNavigationBarItem(
            title: Text('Music'),
            icon: Icon(Icons.music_note),
          ),
          BottomNavigationBarItem(
            title: Text('Places'),
            icon: Icon(Icons.location_on),
          ),
          BottomNavigationBarItem(
            title: Text('News'),
            icon: Icon(Icons.library_books),
          ),
        ],
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
    );
  }

  List _widgetOptions = [
    Text(
      'Favorites',
      style: TextStyle(fontSize: 30, fontFamily: 'DoHyeonRegular'),
    ),
    Text(
      'Music',
      style: TextStyle(fontSize: 30, fontFamily: 'DoHyeonRegular'),
    ),
    Text(
      'Places',
      style: TextStyle(fontSize: 30, fontFamily: 'DoHyeonRegular'),
    ),
    Text(
      'News',
      style: TextStyle(fontSize: 30, fontFamily: 'DoHyeonRegular'),
    ),
  ];
}

 

* [Flutter] 외부 Font 추가 및 변경 정리 "Google Font 이용"

[Flutter] 외부 Font 추가 및 변경 정리 "Google Font 이용"

fontFamily까지 똑같이 적용할려면 위의 포스팅처럼 외부 폰트를 추가해야 한다.

 

BottomNavigationBar의 아이템을 누르면 화면을 다시 빌드해야 하기 때문에, StatefulWidget으로 만들어야 한다.

 

[Flutter] StatelessWidget & StatefulWidget 차이점 정리

[Flutter] StatelessWidget & StatefulWidget 차이점 정리

 

BottomNavigationBar 속성에 대해 알아보자.

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  backgroundColor: Colors.grey, //Bar의 배경색
  selectedItemColor: Colors.white, //선택된 아이템의 색상
  unselectedItemColor: Colors.white.withOpacity(.60), //선택 안된 아이템의 색상
  selectedFontSize: 14, //선택된 아이템의 폰트사이즈
  unselectedFontSize: 14, //선택 안된 아이템의 폰트사이즈
  currentIndex: _selectedIndex, //현재 선택된 Index
  onTap: (int index) { //눌렀을 경우 어떻게 행동할지
    setState(() { //setState()를 추가하여 인덱스를 누를때마다 빌드를 다시함
      _selectedIndex = index; //index는 처음 아이템 부터 0, 1, 2, 3
    });
  },
  items: [
    BottomNavigationBarItem(
      title: Text('Favorites'),
      icon: Icon(Icons.favorite),
    ),
    BottomNavigationBarItem(
      title: Text('Music'),
      icon: Icon(Icons.music_note),
    ),
    BottomNavigationBarItem(
      title: Text('Places'),
      icon: Icon(Icons.location_on),
    ),
    BottomNavigationBarItem(
      title: Text('News'),
      icon: Icon(Icons.library_books),
    ),
  ],
),

 

 

tpye은 아래의 글을 참고 하면 좋을 거 같다.

api.flutter.dev/flutter/material/BottomNavigationBarType-class.html

BottomNavigationBarType enum - material library - Dart API

body: Center(
  child: _widgetOptions.elementAt(_selectedIndex),
),

List _widgetOptions = [
  Text(
    'Favorites',
    style: TextStyle(fontSize: 30, fontFamily: 'DoHyeonRegular'),
  ),
  Text(
    'Music',
    style: TextStyle(fontSize: 30, fontFamily: 'DoHyeonRegular'),
  ),
  Text(
    'Places',
    style: TextStyle(fontSize: 30, fontFamily: 'DoHyeonRegular'),
  ),
  Text(
    'News',
    style: TextStyle(fontSize: 30, fontFamily: 'DoHyeonRegular'),
  ),
];

 

body는 widgetOptions 리스트의 요소를 출력하게 만들었기 때문에 선택된 인덱스의 화면을 변경하고 싶으면 widgetOptions리스트의 위젯들을 변경하면 된다.

 

 

참고한 글

material.io/develop/flutter/components/bottom-navigation/

Material Design

api.flutter.dev/flutter/material/BottomNavigationBar-class.html

BottomNavigationBar class - material library - Dart API