[Flutter] Appbar 상단바와 하단바 예제

지금 정리할 내용은 NavigationBar와는 달리,

화면내에서 추가로 사용될 상단바와 하단바에 대해서 이야기해보고자 한다.

분명 많은 플러그인과 방법이 있겠지만, 사용해보고 좋았던 플러그인과 위젯을 기록해두려 한다.

 

1. 상단바로 좋은 TabBar

https://pub.dev/packages/contained_tab_bar_view

contained_tab_bar_view | Flutter Package

플러터 2.0 3.0에서 지원되며, 널안정성을 갖추고 있다.

사용 예제

// Example 1
import 'package:contained_tab_bar_view/contained_tab_bar_view.dart';

...

Container(
  padding: const EdgeInsets.all(8.0),
  color: Colors.blue,
  width: 200,
  height: 300,
  child: ContainedTabBarView(
    tabs: [
      Text('First'),
      Text('Second'),
    ],
    views: [
      Container(color: Colors.red),
      Container(color: Colors.green)
    ],
    onChange: (index) => print(index),
  ),
),

해당 package readme에서 제공하는 위 gif의 구현 코드이다.

한 소스내에서는 한번만 사용가능하며,  액자식으로 하위화면에서 연속적인 구성도 가능하다.

나의 사이드 플젝..

tabs와 views는 갯수를 맞춰주어야 1:1로 대응하며, 

기본적으로 한 화면에 모든 정보를 Tab으로 나눠논것이므로

새로운 화면을 띄우거나 전환하는 방식이 아닌 Tab의 변경이라는것이 매력적이다.

기본적으로 슬라이딩 애니메이션이 들어가 있어서 이쁘고 간편한 사용이 가능하다.  

 

 

2. 하단바

플러터 기본제공되는 위젯으로 BottomNavigationBar 를 주로 많이 이용한다. 

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

BottomNavigationBar class - material library - Dart API

 

 

사용예제

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

하단바는 Scaffold 안에서 bottomNavigationBar 속성에 연결해서 사용할 수 있다.