[플러터] 11. 디지털 주사위

사전 지식

shake 플러그인

shake 플러그인을 사용하여 모바일 기기 흔들림을 감지할 수 있습니다.

TabBarView, TabController

TabBarView 와 TabController를 이용하여 여러 스크린을 탭으로 나누고 탭 클릭 시 스크린 전환이 가능합니다.

탭 화면 전환 코드

import 'package:flutter/material.dart';
import 'package:ch11/screen/home_screen.dart';
import 'package:ch11/screen/setting_screen.dart';

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

  @override
  _RootScreenState createState() => _RootScreenState();
}

// 탭 컨트롤러를 초기화하려면 vsync가 필요하므로 TickerProviderStateMixin을 추가
// TickerProviderStateMixin은 애니메이션의 효율을 올리주는 역할을 함 (fps와 렌더링 주기를 맞춰줌)
class _RootScreenState extends State<RootScreen> with TickerProviderStateMixin {
  TabController? tabController;

  void tabListener() {}

  @override
  void initState() {
    super.initState();

    // 탭 컨트롤러 초기화 (탭의 개수와 TickerProviderMixin을 사용하는 State클래스를 this 형태로 주입)
    tabController = TabController(length: 2, vsync: this);

    // 탭 컨트롤러 속성이 변경될 때마다 실행할 함수 등록
    tabController!.addListener(tabListener);
  }

  // 위젯 삭제 시 실행되는 함수
  @override
  void dispose() {
    tabController!.removeListener(tabListener);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TabBarView(
        controller: tabController,
        children: [
          HomeScreen(),
          SettingScreen(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        // 현재 화면에 렌더링되는 탭의 인덱스
        currentIndex: tabController!.index,

        // 탭이 선택될 때마다 실행되는 함수
        onTap: (int index) {
          setState(() {
            // 선택한 탭의 인덱스로 애니메이션을 적용하여 이동함
            tabController!.animateTo(index);
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.edgesensor_high_outlined,
            ),
            label: '주사위',
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.settings,
            ),
            label: '설정',
          ),
        ],
      ),
    );
  }
}

《Must Have 코드팩토리의 플러터 프로그래밍 2판》의 스터디 내용 입니다.