[Flutter] BottomSheet의 Keyboard 패딩

BottomSheet Widget 부분

1) 화면에서 System UI에 의해서 가려지는 사이즈 알아오기
final bottomInset = MediaQuery.of(context).viewInsets.bottom;

2) Container의 높이에 더해주기
height: MediaQuery.of(context).size.height / 2 + bottomInset

3) padding 추가해주기
padding: EdgeInsets.only(bottom: bottomInset)

그런데 여기까지만 하면 안되고, FloatingActionButton 수정 필요

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    final bottomInset = MediaQuery.of(context).viewInsets.bottom;

    return Container(
      color: Colors.white,
      height: MediaQuery.of(context).size.height / 2 + bottomInset,
      child: Padding(
        padding: EdgeInsets.only(bottom: bottomInset),
        child: Column(
          children: [
            TextField(),
          ],
        ),
      ),
    );
  }
}

FloatingActionButton 부분

• isScrollControlled: true,
• 참고로 showModalBottomSheet함수를 사용해서 BottomSheet 표시

 FloatingActionButton renderFloatingActionButton() {
    return FloatingActionButton(
      backgroundColor: PRIMARY_COLOR,
      child: const Icon(Icons.add),
      onPressed: () {
        showModalBottomSheet(
          context: context,
          isScrollControlled: true,
          builder: (_) {
            return ScheduleBottomSheet();
          },
        );
      },
    );
  }