27. [Flutter] showModalBottomSheet 로 하단에서 올라오는 작은 화면 만들기

showModalBottomSheet

showModalBottomSheet 위젯을 이용하면 하단에서 올라오는 Sheet를 만들수 있습니다.

GestureDetector의 onTap을 이용하여 클릭했을 때 Sheet가 나오는 기능을 만들어보겠습니다.

Sheet안에는 ListView의 아이템이 나오도록 만들었습니다.

 

예시.

import 'package:flutter/material.dart';

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

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  void _onTap(BuildContext context) async {
    await showModalBottomSheet(
      shape: Border.all(),
      isScrollControlled: true,
      context: context,
      builder: (context) {
        return Container(
          height: MediaQuery.of(context).size.height * 0.7,
          decoration: const BoxDecoration(color: Colors.white),
          clipBehavior: Clip.hardEdge,
          child: Scaffold(
            appBar: AppBar(
              centerTitle: true,
              elevation: 0,
              title: const Text(
                "showModalBottomSheet",
                style: TextStyle(color: Colors.black),
              ),
            ),
            body: ListView.separated(
              padding: const EdgeInsets.all(10),
              itemCount: 3,
              itemBuilder: (context, index) {
                return const Row(
                  children: [
                    CircleAvatar(
                      child: FaIcon(FontAwesomeIcons.guitar),
                    ),
                    Text("Guitar")
                  ],
                );
              },
              separatorBuilder: (context, index) => const SizedBox(
                height: 20,
              ),
            ),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: () => _onTap(context),
          child: const CircleAvatar(
            radius: 30,
            child: Text("Gyu"),
          ),
        ),
      ),
    );
  }
}

 

설명.

1. 클릭할 위젯에 GestureDetector의 onTap: () => _onTap(context) 를 통해 BuildContext를 메소드에 넘겨줍니다.

 

2. 비동기 함수를 만들기 위해 async을 붙이고, showModalBottomSheet 를 await 합니다.

 void _onTap(BuildContext context) async {
    await showModalBottomSheet(
      shape: Border.all(),   

      //shape는 Border와 같은 테두리 속성을 설정합니다.
      isScrollControlled: true, 

      //isScrollControlled를 true로 설정하여 높이가 자동으로 설정되는 것을 해지하고 아래 위젯의 높이로 설정합니다.
      context: context,
      builder: (context) {
        return Container(
          height: MediaQuery.of(context).size.height * 0.7,         

         //MediaQury는 단말기의 물리적 정보를 가져오는 역할을 하며 여기서는 사용 단말기의 높이를 가져옵니다.

         //연산을 통해 사용 단말기의 높이의 70%의 높이로 Sheet 높이를 설정합니다.
          decoration: const BoxDecoration(color: Colors.white),

          //decoration:을 설정해야 높이가 적용됩니다.
          clipBehavior: Clip.hardEdge,

 

3. Sheet에 나올 위젯들을 builder: 에 작성합니다.