flutter & dart - BottomNavigationBar , IndexedStack 위젯

Overview.

바텀에 네비게이션 바를 만들어 보자

1. BottomNavigationBar
2. IndexedStack

0. 문서

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

BottomNavigationBar class - material library - Dart API

https://api.flutter.dev/flutter/widgets/IndexedStack-class.html

IndexedStack class - widgets library - Dart API

 

1. BttomNavigationBar

일반적으로 3~5개 사이의 적은 수의 뷰 중에서 선택하기 위해 앱 하단에 표시되는 머티리얼 위젯입니다.

이 구성요소의 업데이트된 버전인 NavigationBar 가 있는데 , 이는 새 애플리케이션과 Material 3용으로 구성된 애플리케이션에 선호됩니다

하단 탐색 모음은 자료 위에 배치된 텍스트 레이블, 아이콘 또는 둘 다 형태의 여러 항목으로 구성됩니다. 앱의 최상위 보기 간 빠른 탐색을 제공합니다. 더 큰 화면의 경우 측면 탐색이 더 적합할 수 있습니다.

하단 탐색 모음은 일반적으로 Scaffold.bottomNavigationBar 인수 로 제공되는 Scaffold 와 함께 사용됩니다 .

하단 탐색 모음의 유형 에 따라 해당 항목이 표시되는 방식이 변경됩니다. 지정하지 않으면 항목이 4개 미만일 때 자동으로 BottomNavigationBarType.fixed 로 설정되고 그렇지 않으면 BottomNavigationBarType.shifting으로 설정됩니다 .

항목 길이 는 2개 이상이어야 하며 각 항목의 아이콘과 라벨은 null이 아니어야 합니다.

 

위의 설명과 같이 항목의 길이는 최소 2개 이상이여야 하며 지금은 label 도 함께 같이 넣어야 실행이 됩니다.

또한 위젯은 최대 4개까지만 가능하며 그 이상 등록시 BattomNavigationBarType 을 fixed 로 설정하면 가능합니다.

 

currentIndex 항목으로 선택 효과 인덱스를 실행할 수 있으며, onTap 으로 해당 인덱스를 확인할 수 있습니다.

 

Page1 ,2 ,3 ... 은 컬러만 지정했습니다.

import 'package:flutter/material.dart';
import 'package:online_class_3/screens/bottom_navii_page.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _Home(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: BottomNavigationBarPage(),
    );
  }
}

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

  @override
  State<BottomNavigationBarPage> createState() => _HomePageState();
}

class _HomePageState extends State<BottomNavigationBarPage> {
  var _selecttedindex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // IndexedStack
      body: IndexedStack(
        index: _selecttedindex,
        children: [
          BottomNaviPage1(),
          BottomNaviPage2(),
          BottomNaviPage3(),
          BottomNaviPage4(),
        ],
      ),
      bottomNavigationBar: buildBottomNavigationBar(),
    );
  }

  BottomNavigationBar buildBottomNavigationBar() {
    return BottomNavigationBar(
      // BottomNavigationBar 위젯은 3개 한정이므로
      // 4개 이상 추가하려면 type 을 fixed 로 교체한다.
      type: BottomNavigationBarType.fixed,
      currentIndex: _selecttedindex, // 선택 효과 인덱스
      onTap: (index) {
        setState(() {
          _selecttedindex = index;
        });
      },
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: "home",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.school),
          label: "school",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          label: "business",
        ),
        // 3개로 제한된 위젯이므로 추가시 fix 위젯을 사용해야 한다.
        BottomNavigationBarItem(
          icon: Icon(Icons.search),
          label: "search",
        ),
      ],
    );
  }
}

2. IndexedStack 위젯

위와 BottomNavigationBar 와 같이 쓰이는게 IndexedStack 이 많이 쓰일 것 같습니다.

인덱스에 맞게 화면을 전환할 수 있는데 이는 매우 유용하겠죠??

IndexedStack(
        index: _selecttedindex,
        children: [
          BottomNaviPage1(),
          BottomNaviPage2(),
          BottomNaviPage3(),
          BottomNaviPage4(),
        ],
      )