[Flutter] 바텀 시트에서 입력받기(TextField) - 키보드 위로 패딩 조절

✍ 키보드가 차지하는 영역

키보드가 차지하는 영역은 MediaQuery.of(context).viewInsets 에서 가져올 수 있다.

 

[Flutter] MediaQuery , MediaQueryData

 

 

 

✍ 바텀 시트에서 입력받기

바텀 시트 위젯에 전체적으로 높이를 (기본 높이 + 키보드가 차지하는 영역) 으로 하고 bottom padding 값을 (기본 bottom padding + 키보드가 차지하는 영역) 으로 하면 키보드에 따라 자연스럽게 늘어났다 줄어든다.

 

 

 

 

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: Scaffold(body: _HomeScreen())));

class _HomeScreen extends StatefulWidget {
  _HomeScreen({Key? key}) : super(key: key);

  @override
  State<_HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<_HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () async {
          await showModalBottomSheet(
            isScrollControlled: true,
            context: context,
            builder: (context) {
              return _TestBottomSheet();
            },
          );
        },
        child: Text("바텀 시트 on"),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // 키보드가 차지하는 영역
    final bottomInset = MediaQuery.of(context).viewInsets.bottom;

    return Container(
      padding: EdgeInsets.only(
          right: 16.0, left: 16.0, bottom: bottomInset + 8.0),
      color: Colors.white,
      width: MediaQuery.of(context).size.width,
      height: 200 + bottomInset,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text("Title"),
          TextField(),
          OutlinedButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: Text("저장"),
          )
        ],
      ),
    );
  }
}