2024. 11. 12 플러터 기본기 다지기 - 3

 

BottomSheet 위젯

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

 

 

main2.dart

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();
                    },
                  )
                ],
              ),
            );
          });
        },
      ),
    );
  }
}

 

 

---

 

TabBar 위젯

 

 

 

 

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

 

main3.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 {
  // SingleTickerProviderStateMixin : 애니메이션 사용

  // 멤버 변수 선언
  // late --> 나중에 초기화 할꺼야
  // late --> 옵셔널 안 붙여도 된다.
  late TabController _tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'main3',
      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('HOME'),),
          Center( child: Text('HOME'),),
        ],),
      ),
    );
  }
}