bottom page move

tpids·2024년 9월 20일

Flutter

목록 보기
31/40

bottom.dart

import 'package:flutter/material.dart';
import 'package:flutter_bottom/ex_page/ex01_page.dart';
import 'package:flutter_bottom/ex_page/ex02_page.dart';

// 바텀 아이템을 선택한 인덱스
int selectedIndex = 0;
List<Widget> bodyList = [Ex01Page(), Ex02Page()];

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

  @override
  State<ExBottom> createState() => _ExBottomState();
}

class _ExBottomState extends State<ExBottom> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: bodyList[selectedIndex],
      bottomNavigationBar: BottomNavigationBar(items: [
        // 아이템은 2개 이상만 가능
        BottomNavigationBarItem(
            icon: Icon(Icons.person), label: "사람"),
        BottomNavigationBarItem(
            icon: Icon(Icons.chat_bubble_outline_rounded), label: "채팅"),
      ],

      // 라벨을 지우고 싶은 경우
        showSelectedLabels: false,
        showUnselectedLabels: false,

      // bottom navigation bar 색상 변경
        backgroundColor: Colors.green,
        // 선택 되었을 때 색상 변경
        selectedItemColor: Colors.orange,
        // 선택 되지 않은 bottom 색상 변경
        unselectedItemColor: Colors.white,
        // 현재 선택 된 아이템 --> currentIndex를 변수로 설정
        currentIndex: selectedIndex,
        // 아이템 클릭시 이벤트
        onTap: (int index){
          print(index);
          setState(() {
            selectedIndex = index;
            print(selectedIndex);
          });
        },

      ),
    );
  }
}

page1.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.blue,
      child: Center(child: Text("Hello world")),
    );
  }
}

page2.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.orange,
      child: Center(child: Text("안녕"),),
    );
  }
}

바텀 네비게이션 버튼 누르면 페이지1,2 이동

profile
개발자

0개의 댓글