Algolia flicker bug

[ayuno]

Expected behavior (required)

No flicker when changing to any screen within the app.

Current behavior (required)

My app uses dark background colors. When changing to any page with an Algolia backend query, the screen flickers in both Test/Run mode and on my iOS device. This is due to a white loading screen showing up for milliseconds before it changes into a loading screen with the dark background color I have on the page. Both are using the custom loading indicator that I have selected.

To Reproduce (required)

1. Create page with dark background and Algolia backend query
2. Test app in Test/Run mode

Context (required)

I am trying to have a flicker-free app - this is obviously a major bug, and everyone who has tested my app has noted this behavior.

Screenshots / recordings (you'll need to stop the recording at the right frame)

315004723_5484534608297849_4542986665059530324_n.mp4

Your environment

• Bug Report Code:
• Version of FlutterFlow used: 3.3.4
• Platform (e.g. Web, MacOS Desktop): Windows Chrome, iPhone 12
• Browser name and version: Chrome/mobile Safari
• Operating system and version (desktop or mobile): Windows 10, iOS 15

[wenkaifan0720]

Hi @ayuno. I made a test app with Algolia search but haven't experienced flicker when navigating to the search result page (see https://app.flutterflow.io/project/flutterflow-issue-116-fh4olh). Is it possible for you to share the project with me so I can find the cause of the issue quicker?

[ayuno]

Hi @ayuno. I made a test app with Algolia search but haven't experienced flicker when navigating to the search result page (see https://app.flutterflow.io/project/flutterflow-issue-116-fh4olh). Is it possible for you to share the project with me so I can find the cause of the issue quicker?

Hi! Yes, sure, this is the project: [(https://app.flutterflow.io/project/matenic-3p61rm)] -> use version 13 (I am testing various workarounds in later versions)

The bug happens on my Home page and the Search page (the first 2 menu items on the nav bar). Both use Algolia ListView queries.

I checked your test project, and I noticed the following differences:

1/ In your test project, the background color is white to begin with (detecting a white flicker would be difficult in this environment - albeit I cloned your project & changed it, and I don't see a flicker)
2/ I am using an Algolia query in a ListView, which might be relevant
3/ In both cases, the flicker happens when I navigate to a new page through the navbar as described above - not sure if this is relevant

I also tested both ListViews (on my Home and Search pages) with a simple backend query rather than Algolia, and the flicker disappeared.

Really appreciate you looking into this, it's been driving me crazy!

[ayuno]

Hi @wenkaifan0720!

On my 3rd point above, I just tested using a non-navbar link to the flickering Home page, and that didn't solve the issue (same behavior).

[wenkaifan0720]

Hi @ayuno. Sorry for taking this long to respond to you. I am currently on vacation but I'll take a look at this issue this week.

[wenkaifan0720]

I haven't been able to find a page that uses Algolia search in your project. Could you direct me to one (or post the generated code of that page here)?

[ayuno]

Hey @wenkaifan0720! Really appreciate you taking a look after your vacation, I've tried multiple workarounds but nothing worked :/ It's driving me nuts!

My Home Page has a ListView that uses Algolia. Here is the generated Dart code of that page:

import '../backend/backend.dart';
import '../components/joined_empty_widget.dart';
import '../flutter_flow/flutter_flow_icon_button.dart';
import '../flutter_flow/flutter_flow_theme.dart';
import '../flutter_flow/flutter_flow_util.dart';
import '../flutter_flow/custom_functions.dart' as functions;
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:google_fonts/google_fonts.dart';

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

  @override
  _HomePageWidgetState createState() => _HomePageWidgetState();
}

class _HomePageWidgetState extends State<HomePageWidget> {
  LatLng? currentUserLocationValue;
  final scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
    getCurrentUserLocation(defaultLocation: LatLng(0.0, 0.0), cached: true)
        .then((loc) => setState(() => currentUserLocationValue = loc));
    WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {}));
  }

  @override
  Widget build(BuildContext context) {
    if (currentUserLocationValue == null) {
      return Center(
        child: SizedBox(
          width: 50,
          height: 50,
          child: SpinKitThreeBounce(
            color: FlutterFlowTheme.of(context).primaryColor,
            size: 50,
          ),
        ),
      );
    }
    return Title(
        title: 'HomePage',
        color: FlutterFlowTheme.of(context).primaryColor,
        child: Scaffold(
          key: scaffoldKey,
          backgroundColor: FlutterFlowTheme.of(context).primaryBackground,
          appBar: AppBar(
            backgroundColor: FlutterFlowTheme.of(context).primaryBackground,
            automaticallyImplyLeading: false,
            title: Text(
              'Nearby',
              style: FlutterFlowTheme.of(context).title2.override(
                    fontFamily: 'Poppins',
                    color: Colors.white,
                    fontSize: 20,
                    fontWeight: FontWeight.w600,
                  ),
            ),
            actions: [
              Padding(
                padding: EdgeInsetsDirectional.fromSTEB(0, 0, 20, 0),
                child: FlutterFlowIconButton(
                  borderColor: Colors.transparent,
                  borderRadius: 30,
                  borderWidth: 1,
                  buttonSize: 50,
                  icon: Icon(
                    Icons.add_box,
                    color: Color(0xFF796BFF),
                    size: 25,
                  ),
                  onPressed: () async {
                    context.pushNamed(
                      'CreateEvent',
                      extra: <String, dynamic>{
                        kTransitionInfoKey: TransitionInfo(
                          hasTransition: true,
                          transitionType: PageTransitionType.bottomToTop,
                          duration: Duration(milliseconds: 300),
                        ),
                      },
                    );
                  },
                ),
              ),
            ],
            centerTitle: false,
            elevation: 0,
          ),
          body: SafeArea(
            child: FutureBuilder<List<EventsRecord>>(
              future: EventsRecord.search(
                location: functions.getLocation(currentUserLocationValue),
                searchRadiusMeters: 5000,
              ),
              builder: (context, snapshot) {
                // Customize what your widget looks like when it's loading.
                if (!snapshot.hasData) {
                  return Center(
                    child: SizedBox(
                      width: 50,
                      height: 50,
                      child: SpinKitThreeBounce(
                        color: FlutterFlowTheme.of(context).primaryColor,
                        size: 50,
                      ),
                    ),
                  );
                }
                List<EventsRecord> listViewEventsRecordList = snapshot.data!;
                if (listViewEventsRecordList.isEmpty) {
                  return Center(
                    child: JoinedEmptyWidget(
                      emptyText: 'No events nearby.',
                    ),
                  );
                }
                return ListView.builder(
                  padding: EdgeInsets.zero,
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                  itemCount: listViewEventsRecordList.length,
                  itemBuilder: (context, listViewIndex) {
                    final listViewEventsRecord =
                        listViewEventsRecordList[listViewIndex];
                    return Visibility(
                      visible:
                          listViewEventsRecord.startDate! > getCurrentTimestamp,
                      child: Container(
                        decoration: BoxDecoration(),
                        child: Padding(
                          padding: EdgeInsetsDirectional.fromSTEB(0, 0, 0, 20),
                          child: Column(
                            mainAxisSize: MainAxisSize.max,
                            children: [
                              Row(
                                mainAxisSize: MainAxisSize.max,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Container(
                                    width: MediaQuery.of(context).size.width,
                                    height: 200,
                                    child: Stack(
                                      alignment: AlignmentDirectional(0, 0),
                                      children: [
                                        Padding(
                                          padding:
                                              EdgeInsetsDirectional.fromSTEB(
                                                  10, 0, 10, 0),
                                          child: InkWell(
                                            onTap: () async {
                                              context.pushNamed(
                                                'Event',
                                                queryParams: {
                                                  'currentEvent':
                                                      serializeParam(
                                                    listViewEventsRecord
                                                        .reference,
                                                    ParamType.DocumentReference,
                                                  ),
                                                }.withoutNulls,
                                              );
                                            },
                                            child: Hero(
                                              tag: listViewEventsRecord
                                                  .coverUrl!,
                                              transitionOnUserGestures: true,
                                              child: ClipRRect(
                                                borderRadius:
                                                    BorderRadius.circular(10),
                                                child: CachedNetworkImage(
                                                  imageUrl: listViewEventsRecord
                                                      .coverUrl!,
                                                  width: MediaQuery.of(context)
                                                      .size
                                                      .width,
                                                  height: 200,
                                                  fit: BoxFit.cover,
                                                ),
                                              ),
                                            ),
                                          ),
                                        ),
                                        Align(
                                          alignment:
                                              AlignmentDirectional(0.8, 0.75),
                                          child: Material(
                                            color: Colors.transparent,
                                            elevation: 0,
                                            shape: RoundedRectangleBorder(
                                              borderRadius:
                                                  BorderRadius.circular(10),
                                            ),
                                            child: Container(
                                              width: 100,
                                              height: 20,
                                              decoration: BoxDecoration(
                                                color:
                                                    FlutterFlowTheme.of(context)
                                                        .secondaryColor,
                                                borderRadius:
                                                    BorderRadius.circular(10),
                                              ),
                                              child: Align(
                                                alignment:
                                                    AlignmentDirectional(0, 0),
                                                child: Text(
                                                  dateTimeFormat(
                                                      'MMMEd',
                                                      listViewEventsRecord
                                                          .startDate!),
                                                  textAlign: TextAlign.center,
                                                  style: FlutterFlowTheme.of(
                                                          context)
                                                      .bodyText1
                                                      .override(
                                                        fontFamily: 'Poppins',
                                                        color:
                                                            FlutterFlowTheme.of(
                                                                    context)
                                                                .secondaryText,
                                                        fontSize: 12,
                                                      ),
                                                ),
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                              Row(
                                mainAxisSize: MainAxisSize.max,
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Container(
                                    width:
                                        MediaQuery.of(context).size.width * 0.9,
                                    decoration: BoxDecoration(),
                                    child: Padding(
                                      padding: EdgeInsetsDirectional.fromSTEB(
                                          0, 10, 0, 0),
                                      child: Column(
                                        mainAxisSize: MainAxisSize.max,
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Text(
                                            listViewEventsRecord.name!
                                                .maybeHandleOverflow(
                                                    maxChars: 64),
                                            textAlign: TextAlign.start,
                                            maxLines: 2,
                                            style: FlutterFlowTheme.of(context)
                                                .bodyText1
                                                .override(
                                                  fontFamily: 'Poppins',
                                                  color: FlutterFlowTheme.of(
                                                          context)
                                                      .primaryText,
                                                  fontSize: 14,
                                                  fontWeight: FontWeight.w600,
                                                ),
                                          ),
                                          Padding(
                                            padding:
                                                EdgeInsetsDirectional.fromSTEB(
                                                    0, 5, 0, 0),
                                            child: Row(
                                              mainAxisSize: MainAxisSize.max,
                                              children: [
                                                Icon(
                                                  Icons.place,
                                                  color: FlutterFlowTheme.of(
                                                          context)
                                                      .tertiaryColor,
                                                  size: 22,
                                                ),
                                                Padding(
                                                  padding: EdgeInsetsDirectional
                                                      .fromSTEB(5, 0, 0, 0),
                                                  child: Text(
                                                    '${listViewEventsRecord.city}, ${listViewEventsRecord.locationExact}',
                                                    textAlign: TextAlign.start,
                                                    style: FlutterFlowTheme.of(
                                                            context)
                                                        .bodyText1
                                                        .override(
                                                          fontFamily: 'Poppins',
                                                          color: FlutterFlowTheme
                                                                  .of(context)
                                                              .secondaryText,
                                                        ),
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                );
              },
            ),
          ),
        ));
  }
}

[ayuno]

Hey @wenkaifan0720 I think I found a workaround for my current issue.

I don't know much Flutter, but I saw in the code above that because I'm grabbing the current user location global variable as part of my Algolia query to filter results, in the code the location is being queried before the page is built. I think this is causing a delay (with the white loading screen I assume). To work around this, I am now saving the user location on page load to a local variable and using that value in the Algolia query.

I do still think that the white loading screen never should've been visible at all, so I think it'd be something to look into.

[wenkaifan0720]

@ayuno You are right. I think this is the piece of code that caused the white screen:
if (currentUserLocationValue == null) { return Center( child: SizedBox( width: 50, height: 50, child: SpinKitThreeBounce( color: FlutterFlowTheme.of(context).primaryColor, size: 50, ), ), ); }

Ideally this piece of code should be wrapped inside of the Scaffold widget so that the theme of your app gets applied to the background. I will notify our team for a fix. Sorry for taking this long to deal with this issue.