Textfield가있는 키보드와 함께 BottomSheet를 이동하는 방법 (자동 초점이 true)?

하단 시트는 콘텐츠를 화면에 표시하는 데 사용되는 위젯입니다.

Flutter에서 제공하는 thesite() 함수를 사용하여 바텀 시트를 생성할 수 있습니다.

context와 builder는 이 함수의 두 가지 필수 속성입니다.

Future<t?> showModalBottomSheet<t>(
         {required BuildContext context,
         required WidgetBuilder builder,
         Color? backgroundColor,
         double? elevation,
         ShapeBorder? shape,
         Clip? clipBehavior,
         Color? barrierColor,
         bool isScrollControlled = false,
         bool useRootNavigator = false,
         bool isDismissible = true,
         bool enableDrag = true,
         RouteSettings? routeSettings,
        AnimationController? transitionAnimationController}
)
</t></t?>

bottomSheethow to create a Bottomsheet in Flutter에 대해서도 자세히 이해할 수 있습니다.

사용자 경험 및 장치 호환성에 따라 bottomSheet에 TextField or TextFormField을 표시하고 사용자가 TextField에 데이터를 추가하려고 할 때 발생합니다. 하지만 bottomSheet와 함께 키보드가 나타나지 않으므로 이 문서에서는 이 문제를 해결하는 방법을 보여줍니다. 또한 원활한 솔루션 및 엔터프라이즈급 모바일 소프트웨어 개발을 위해 consult our Flutter expert 할 수 있습니다.

isScrollControlled = true를 BottomSheetDialog에 추가하면 bottomSheet가 필요한 전체 높이를 차지할 수 있으므로 TextField가 키보드로 덮이지 않는다는 확신이 더 커집니다.

BottomSheetModel이 열이면 mainAxisSize: MainAxisSize.min을 추가해야 합니다. 그렇지 않으면 시트가 전체 화면을 덮게 됩니다.

MediaQuery.of(context).viewInsets.bottom을 사용하여 키보드 패딩 추가

Padding( 
  padding: EdgeInsets.only( 
    bottom: MediaQuery.of(context).viewInsets.bottom),
  child : widget,
       ),

이 위젯의 ​​예를 살펴보겠습니다.

Center 위젯을 사용하여 화면 중앙에 ElevatedButton을 포함할 Scaffold Widget 을 만듭니다. 이 버튼은 화면 하단에 bottomSheet를 표시합니다.

onPressed() 함수를 사용하여 버튼 누름 동작을 처리할 수 있습니다.

예시:

Scaffold(
        body: Center(
      child: ElevatedButton(
        onPressed: () {
          showModalBottomSheet(
              shape: const RoundedRectangleBorder(
                  borderRadius:
                      BorderRadius.vertical(top: Radius.circular(25.0))),
              backgroundColor: Colors.grey,
              context: context,
              isScrollControlled: true,
              builder: (context) => Padding(
                    padding: EdgeInsets.only(top: 20,  right: 20,  left: 20,
                        bottom: MediaQuery.of(context).viewInsets.bottom),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: const <widget>[
                        Center(
                          child: Text(
                            'Login',
                          ),
                        ),
                        SizedBox( height: 8.0),
                        TextField(
                          decoration: InputDecoration(hintText: 'enter email'),
                          autofocus: true,
                        ),
                        SizedBox(height: 10),
                        TextField(
                          decoration:
                              InputDecoration(hintText: 'enter password'),
                          autofocus: true,
                        ),
                        SizedBox(height: 10),
                      ],
                    ),
                  ));
        },
        child: const Text('Show Modal Bottom Sheet'),
      ),
    ));
</widget>

결론:

그래서 이번 글에서는 키보드와 함께 바텀 시트를 이동하는 방법에 대해 알아보았습니다. 이 기사를 사용하여 하단 시트 이동 문제를 해결하는 방법을 이해하시기 바랍니다. 계속 방문하세요Flutter Agency .