BottomSheet 위젯 & TabBar 위젯

1. BottomSheet 위젯

• 화면 아래쪽에서 올라오는 다이얼로그
• showBottomSheet() 및 showModalBottomSheet()의 builder 속성에 지정한 위젯을 화면 아래쪽에서 올라오도록 보여줌
  • showModalBottomSheet()는 사용자가 Bottom Sheet 외부를 터치하면 Bottom Sheet가 자동으로 닫히지만, showBottomSheet()는 사용자가 Bottom Sheet 외부를 터치해도 Bottom Sheet가 닫히지 않음
• 다이얼로그를 닫기 위해서는 닫히게 하려면, Navigator.of(context).pop()을 호출하면 됨

import 'package:flutter/material.dart';


 void main() {
   runApp(BottomSheetApp());
 }

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

   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'myApp1',
       theme: ThemeData(
         useMaterial3: true,
         colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue)
       ),
       home: Scaffold(
         appBar: AppBar(title: const Text('Bottom Sheet Sample'),),
         body: MyBottomSheet(),
       ),
     );
   }
 }

 // 새로운 클래스
class MyBottomSheet extends StatelessWidget {
  const MyBottomSheet({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('show bottom sheet'),
        onPressed: () {
          // 이벤트 핸들러 처리
          // showBottomSheet(context: context, builder: builder)
          showModalBottomSheet(context: context, builder: (context) {
            return Container(
              child: Column(
                children: [
                  ListTile(
                    leading: Icon(Icons.add),
                    title: Text('Add Item'),
                    onTap: () {
                      Navigator.of(context).pop();
                    },
                  ),
                  ListTile(
                    leading: Icon(Icons.remove),
                    title: Text('Remove Item'),
                    onTap: () {
                      Navigator.of(context).pop();
                    },
                  )
                ],
              ),
            );
          });
        },
      ),
    );
  }
}

2. TabBar 위젯

TabBar와 TabBarView 개념

• TabBar: 여러 개의 탭을 화면에 표시하며, 각 탭을 클릭할 수 있도록 해주는 위젯이다. 사용자가 탭을 클릭하면 해당 탭에 대한 내용을 표시한다.
• TabBarView: TabBar와 연결되어 각 탭에 해당하는 내용을 표시하는 역할을 한다. 사용자가 탭을 선택하면 이 위젯이 해당하는 내용을 보여준다.
• TabController
  • TabController: 탭의 상태를 관리하는 클래스입니다. 탭의 개수와 현재 활성화된 탭을 추적한다. SingleTickerProviderStateMixin을 사용하여 애니메이션과 상태 관리를 돕는다.
  • length: 탭의 개수를 지정한다.
  • vsync: 애니메이션의 성능을 최적화하는 데 사용된다. 이 예제에서는 this를 사용하여 현재 상태를 참조한다.
• 위젯 생명주기
  • initState(): 위젯이 처음 생성될 때 호출됩니다. 이곳에서 TabController를 초기화한다.
  • dispose(): 위젯이 더 이상 필요하지 않을 때 호출됩니다. 이곳에서 TabController를 정리하여 메모리 누수를 방지한다.

import 'package:class_v03/main.dart';
import 'package:flutter/material.dart';

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

// StatefulWidget  클래스 - 상태를 관리 표현
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

// 부모 클래스에 상태를 접근 수정 등 역할 수정.
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {

  // 멤버 변수 선언
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    // 메모리에 올라 갈때 단 한번 호출 되는 메서드
    _tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    // 위젯 제거 될 때 호출 된다.
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TabBar'),
          bottom: TabBar(
            controller: _tabController,
            tabs: [
              Tab(text: 'HOME'),
              Tab(text: 'Favorites', icon: Icon(Icons.star)),
              Tab(text: 'Settings', icon: Icon(Icons.settings)),
            ],
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: [
            Center(child: Text('HOME')),
            Center(child: Text('Favorites')),
            Center(child: Text('Settings')),
          ],
        ),
      ),
    );
  }
}

목차로 돌아가기