Flutter: Background Image Moves Up When Tapping on TextFormField – How to Prevent Layout Shift?

I have a CustomScaffold widget that contains a background image, and the body of the screen is placed inside a Scaffold widget. However, when I tap on a TextFormField, the background image shifts upward along with the body content. I want to prevent the background image from shifting when the keyboard appears without breaking my layout.

What I Tried:

• I set resizeToAvoidBottomInset: false in my Scaffold, which should have prevented the body from resizing when the keyboard appears, but the background image still shifts up.

• I wrapped the scrollable elements with a SingleChildScrollView to make it scrollable, but it didn’t fix the issue.

What Worked:

I found a solution by wrapping the background image in a SingleChildScrollView. This allowed the background to remain fixed while the body could still scroll independently. Below is my updated CustomScaffold widget that fixed the issue:

class CustomScaffold extends StatelessWidget {
  final Widget body;
  final Color? backgroundColor;
  final PreferredSizeWidget? appBar;
  final Widget? bottomNavigationBar;
  final bool? extendBodyBehindAppBar;
  final bool? resizeToAvoidBottomInset;
  final bool bgImg;
  final String productType;

  const CustomScaffold({
    Key? key,
    required this.body,
    this.backgroundColor,
    this.appBar,
    this.bottomNavigationBar,
    this.extendBodyBehindAppBar = false,
    this.resizeToAvoidBottomInset,
    this.bgImg = false,
    this.productType = "",
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        WidgetsBinding.instance.focusManager.primaryFocus?.unfocus();
      },
      child: Stack(
        children: [
          bgImg == false && productType.isEmpty
              ? SizedBox.shrink()
              : Positioned.fill(
                  left: 0,
                  top: 0,
                  right: 0,
                  bottom: 0,
                  child: SingleChildScrollView( // Added SingleChildScrollView
                    child: Image.asset(
                      _getBackgroundImage(productType),
                      fit: BoxFit.fill,
                    ),
                  )),
          Scaffold(
            extendBodyBehindAppBar: extendBodyBehindAppBar ?? false,
            resizeToAvoidBottomInset: resizeToAvoidBottomInset,
            appBar: appBar,
            backgroundColor: backgroundColor ??
                (bgImg == false
                    ? Constants.colors.background
                    : Colors.transparent),
            body: body,
            bottomNavigationBar: bottomNavigationBar,
          ),
        ],
      ),
    );
  }

  String _getBackgroundImage(String? productType) {
    switch (productType) {
      case "A":
        return 'assets/images/pl_bg.webp';
      case "B":
        return 'assets/images/pl_bg.webp';
      case "C":
        return 'assets/images/pl_bg.webp';
      case "D":
        return 'assets/images/pl_bg.webp';
      case "E":
        return 'assets/images/pl_bg.webp';
      case "F":
        return 'assets/images/pl_bg.webp';
      case "G":
        return 'assets/images/ce_bg.webp';
      default:
        return 'assets/images/splash.webp';
    }
  }
}

and here is my UI

child: CustomScaffold(
            resizeToAvoidBottomInset: false,
bgImg : true,
productType: "A",
            body: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                LabelWidget(
                  text: 'My UI'.tr,
                  fontWeight: FontWeight.w600,
                  fontSize: 28.sp,
                  textColor: Colors.black,
                  padding: 0,
                ).marginSymmetric(horizontal: 16.w),

                // Select the card for offers
                CardWidgetForOffers(
                    offerController: controller,
                    entitiesController: entController), // select card
                16.verticalSpace,

                Expanded(
                  child: SingleChildScrollView(
                    controller: scrollController,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        // Banners widget  swipe cards
                        BannerWidget(),

                        // saved offers
                        SavedOffersWidget(
                            offersController: controller),

                        // search offers here [This is my TextFormField]
                        SearchOffersWidget(offersController: offersController),

                        //  offers in list view
                        NewTestListViewWidget(),
                        15.verticalSpace,
                      ],
                    ),
                  ),
                ),
              ],
            ).marginOnly(top: 50.h),
          ),