Initial white screen caused by auto-generated code that blocks rendering until user location is resolved

[MendesCorporation]

Can we access your project?

• I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

When using Current Device Location, FlutterFlow automatically inserts the following code at the very beginning of the page:

@override
Widget build(BuildContext context) {
  if (currentUserLocationValue == null) {
    return Container(
      color: FlutterFlowTheme.of(context).primaryBackground,
      child: Center(
        child: SizedBox(
          width: 50,
          height: 50,
          child: SpinKitThreeBounce(
            color: FlutterFlowTheme.of(context).primary2,
            size: 50,
          ),
        ),
      ),
    );
  }
}

This completely ruins the user experience. Current Device Location already defaults to (0,0), so please let us handle the rest ourselves. With this auto-generated code, the initial experience is poor, and every time the page loads it ends up “flashing.”

Expected Behavior

Do not create any widget that appears on top of everything, ruining the app experience.

Steps to Reproduce

1.Create new page
2.Use current device location

Reproducible from Blank

• The steps to reproduce above start from a blank project.

Bug Report Code (Required)

ITFfisnLuJVPm+FE7q6IbuxapCQ4JW0cTIMziNZ+exUbfaL1BuwxPeLeak1CTbC5aVNcEVH8sDkxp97tiYTLOvUCA0iqbIRR/rpuTQz0e2iQb6a3OqrpfnJAM8NQfE+P4Z+02yR+GPVuLGQ+2Vy1N+e8Z3TDFOu/Zwh9f6PHaOI=

Visual documentation

Environment

- FlutterFlow version: 6.1.47+
- Platform: Android
- Browser name and version: 
- Operating system and version affected: All

Additional Information

No response

[Alezanello]

Hello!

I created a new blank project and added the device’s current location inside an alert dialog, but the code block wasn’t generated. You can check the project and clone it to test or review the code here:

• Project: https://app.flutterflow.io/project/qa-4789-yc84dr
• Project Code: https://app.flutterflow.io/code/qa-4789-yc84dr?HomePage
  

[MendesCorporation]

Hello Alezanello,
Apparently FF adds this code if there is an element on the screen that needs localization, could you test it by changing it to text as shown below?

`import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/flutter_flow/flutter_flow_widgets.dart';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:provider/provider.dart';

import 'testloc_model.dart';
export 'testloc_model.dart';

class TestlocWidget extends StatefulWidget {
const TestlocWidget({super.key});

static String routeName = 'testloc';
static String routePath = '/testloc';

@OverRide
State createState() => _TestlocWidgetState();
}

class _TestlocWidgetState extends State {
late TestlocModel _model;

final scaffoldKey = GlobalKey();
LatLng? currentUserLocationValue;

@OverRide
void initState() {
super.initState();
_model = createModel(context, () => TestlocModel());

getCurrentUserLocation(defaultLocation: LatLng(0.0, 0.0), cached: true)
    .then((loc) => safeSetState(() => currentUserLocationValue = loc));
WidgetsBinding.instance.addPostFrameCallback((_) => safeSetState(() {}));

}

@OverRide
void dispose() {
_model.dispose();

super.dispose();

}

@OverRide
Widget build(BuildContext context) {
if (currentUserLocationValue == null) {
return Container(
color: FlutterFlowTheme.of(context).primaryBackground,
child: Center(
child: SizedBox(
width: 50,
height: 50,
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(
FlutterFlowTheme.of(context).primary,
),
),
),
),
);
}

return GestureDetector(
  onTap: () {
    FocusScope.of(context).unfocus();
    FocusManager.instance.primaryFocus?.unfocus();
  },
  child: Scaffold(
    key: scaffoldKey,
    backgroundColor: FlutterFlowTheme.of(context).primaryBackground,
    appBar: AppBar(
      backgroundColor: FlutterFlowTheme.of(context).primary,
      automaticallyImplyLeading: false,
      title: Text(
        'Page Title',
        style: FlutterFlowTheme.of(context).headlineMedium.override(
              font: GoogleFonts.outfit(
                fontWeight:
                    FlutterFlowTheme.of(context).headlineMedium.fontWeight,
                fontStyle:
                    FlutterFlowTheme.of(context).headlineMedium.fontStyle,
              ),
              color: Colors.white,
              fontSize: 22,
              letterSpacing: 0.0,
              fontWeight:
                  FlutterFlowTheme.of(context).headlineMedium.fontWeight,
              fontStyle:
                  FlutterFlowTheme.of(context).headlineMedium.fontStyle,
            ),
      ),
      actions: [],
      centerTitle: false,
      elevation: 2,
    ),
    body: SafeArea(
      top: true,
      child: Align(
        alignment: AlignmentDirectional(0, 0),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            Text(
              valueOrDefault<String>(
                currentUserLocationValue?.toString(),
                '-',
              ),
              style: FlutterFlowTheme.of(context).bodyMedium.override(
                    font: GoogleFonts.roboto(
                      fontWeight: FlutterFlowTheme.of(context)
                          .bodyMedium
                          .fontWeight,
                      fontStyle:
                          FlutterFlowTheme.of(context).bodyMedium.fontStyle,
                    ),
                    letterSpacing: 0.0,
                    fontWeight:
                        FlutterFlowTheme.of(context).bodyMedium.fontWeight,
                    fontStyle:
                        FlutterFlowTheme.of(context).bodyMedium.fontStyle,
                  ),
            ),
          ],
        ),
      ),
    ),
  ),
);

}
}
`

[Alezanello]

Thank you so much for catching this detail!

Internally, I’ve been informed that removing this functionality could impact many existing projects that are already implemented or rely on it working this way.

In your case, what you can do is retrieve the current device location through a Custom Action or Custom Widget, and pass it there so you can handle it in the way that best fits your needs. This approach will give you flexibility without blocking your development.

For now, I reviewed the code that was added, and here’s the diff for reference: DiffChecker. However, as mentioned, this isn’t something that can be easily changed at the moment.

That said, I’ll register this as an enhancement request so it’s considered for the future, and we can evaluate how to provide a smoother transition. In the meantime, using Custom Widgets/Actions is the recommended approach since it gives you full control.