[Flutter] 하단바, 페이지 하단에 떠 있는 버튼 위젯(FloatingActionButton)

return Scaffold(
  floatingActionButton: renderFloatingActionButton(),
  body: SafeArea(
    child: Column(
      children: [
        Calendar( ... 생략

오늘은 앱 밑에 떠 있는 하단 버튼에 대해 알아보려고 한다.

 

 

Scaffold 위젯 아래에 floatingActionButton 을 통해 생성 할 수 있고, 나는 아래와 같이 따로 함수로 빼서 정의해주었다.

FloatingActionButton renderFloatingActionButton() {
return FloatingActionButton(
    onPressed: () {
      showModalBottomSheet(
        context: context,
	// showModalBottomSheet의 원래 최대 스크린 값은 화면의 절반인데
	// isScrollControlled : true 를 통해 화면 절반 이상까지 늘려줄 수 있다.
        isScrollControlled:true,
        builder: (_) {
return ScheduleBottomSheet();
        },
      );
    },
    backgroundColor: PRIMARY_COLOR,
    child: Icon(Icons.add),
  );

클릭 시 이벤트에 나는 ScheduleBottomSheet() 컴포넌트가 화면에 그려지게 만들어 주었으며 그 코드는 아래와 같다.

import'package:flutter/material.dart';

class ScheduleBottomSheetextendsStatelessWidget {
const ScheduleBottomSheet({Key? key}) :super(key: key);

@override
Widget build(BuildContext context) {
// 시스템으로 가려진 아래부분을 우리가 가져올 수 있게 된다. (TextField에 가려진 부분을 
// 가려지지 않게 하고싶기 때문에 사용.
final bottomInset = MediaQuery
        .of(context)
        .viewInsets.bottom;

return Container(
      color: Colors.white,
	// 전체 높이의 절반만큼만 차지하도록 하고 가려진 부분만큼 위로 올려주기 위해
	// bottomInset을 더해주게 된다.
      height: MediaQuery
          .of(context)
          .size
          .height / 2 + bottomInset,
      child: Padding(
	// 가려진 부분만큼 패딩을 줘야 하기 때문에 아래에서부터 시스템으로 가려진 부분까지
	// 패딩을 주게 된다.
        padding: EdgeInsets.only(bottom: bottomInset),
        child: Column(
          children: [
            TextField(),
          ],
        ),
      ),
    );
  }
}

해결.