[Flutter] BottomNavigation 구현

요새 앱에서 대세로 많이 쓰고 있는 패턴이다.

메인에서 바텀 네비게이션 바로 이벤트를 주자.

안드로이드 보다 쉽다. 우선 전체코드는 아래와 같다.

 

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
import 'dart:ui';
import 'package:google_fonts/google_fonts.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:smithflutter/WidgetUtil.dart';
import 'package:smithflutter/utils.dart';

import 'Person.dart';

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

class Scene3 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ScenceState();
  }
}

class ScenceState extends State<Scene3>{
  int _selectedIndex =0;
  final screens = [ //이게 하나하나의 화면이되고, Text등을 사용하거나, dart파일에 있는 class를 넣는다. 
    Text('first'),
    Text('second'),
    Text('third'),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('bottom navigation'),
      ),
      body: screens[_selectedIndex],

      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.green,
        selectedItemColor: Colors.red,
        unselectedItemColor: Colors.orangeAccent,
        onTap: (int index){
          print(index);

          setState(() {
            _selectedIndex=index;
          });

        },
        items: const [
          BottomNavigationBarItem(
              label: '1',
              icon: Icon(Icons.ac_unit_outlined)
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.ac_unit_outlined),
              label: '2',),
          BottomNavigationBarItem(
              icon: Icon(Icons.ac_unit_outlined),
              label: '3',),
        ],
      ),

    );
  }

}

 

유의 깊게 짤라서 보자

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('bottom navigation'),
      ),
      body: screens[_selectedIndex],

      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.green,
        selectedItemColor: Colors.red,
        unselectedItemColor: Colors.orangeAccent,
        onTap: (int index){
          print(index);

          setState(() {
            _selectedIndex=index;
          });

        },

Scaffold에 바디에 스크린 배열 및 인덱스를 넣어준다. 초기값은 0이다.

그리고, 해당 위젯과 객체 속성을 정의해주고

내부 이벤트 (OnTap을 사용해서, State로, 재 사용 및 인덱스를 변경해준다.)

여기서 내부 속성과 연결을 시켜주려면 currentIndex와 매핑을 시켜야

비선택,선택에 따라서 색깔을 다르게 줄수있다.

제일 상단 초기값은 이렇게 한다

 int _selectedIndex =0;
  final screens = [ //이게 하나하나의 화면이되고, Text등을 사용하거나, dart파일에 있는 class를 넣는다. 
    Text('first'),
    Text('second'),
    Text('third'),
  ];

사실 텍스트가 아니라 위젯을 선언해도된다.

class ScenceState extends State<Scene3>{
  int _selectedIndex =0;
  final screens = [ //이게 하나하나의 화면이되고, Text등을 사용하거나, dart파일에 있는 class를 넣는다. 
    Text('first'),
    Scene4(),
    Text('third'),
  ];

 

 

그리고 하단의 리스트 아이템을 정렬할 수 있다.

   items: const [
          BottomNavigationBarItem(
              label: '1',
              icon: Icon(Icons.ac_unit_outlined)
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.ac_unit_outlined),
              label: '2',),
          BottomNavigationBarItem(
              icon: Icon(Icons.ac_unit_outlined),
              label: '3',),
        ],

 

해당과 같이 사용하면, 해당 리스트들이 하단 네비게이션에 노출되어서 사용할 수 있다.

 

안드로이드나 기타 네이티브보다 훨씬 간편하다.