Flutter IndexedStack alternative

Question

is there any alternative for something like IndexedStack on flutter? I used IndexedStack before but my WebView app feels slower and sometimes crashes on some devices. Someone in GitHub says that cause using IndexedStack and SetState. Is there any solution to avoid crashes and increase the WebView performance? For your information, I using the InAppWebView package in this case.

I wanna show a loading screen like this when onLoadStart, then show the WebView page when onLoadStop.

here is my sample app code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class SimpleWebiew extends StatefulWidget {
  @override
  _SimpleWebiewState createState() => _SimpleWebiewState();
}

class _SimpleWebiewState extends State<SimpleWebiew> {
  num _stackToView = 1;
  InAppWebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: AppBar(
        title: Text('Simple WebView'),
        centerTitle: true,
      ),
      body: IndexedStack(
        index: _stackToView,
        children: [
          Opacity(
            opacity: _stackToView == 0 ? 1 : 0,
            child: InAppWebView(
              initialUrlRequest: URLRequest(
                url: Uri.parse('https://flutter.dev/'),
              ),
              onWebViewCreated: (InAppWebViewController controller) {
                _webViewController = controller;
              },
              onReceivedServerTrustAuthRequest: (controller, _challenge) async {
                return ServerTrustAuthResponse(
                  action: ServerTrustAuthResponseAction.PROCEED,
                );
              },
              initialOptions: InAppWebViewGroupOptions(
                android: AndroidInAppWebViewOptions(
                  allowContentAccess: true,
                  builtInZoomControls: true,
                  thirdPartyCookiesEnabled: true,
                  allowFileAccess: true,
                  geolocationEnabled: true,
                  supportMultipleWindows: true,
                ),
                crossPlatform: InAppWebViewOptions(
                  useShouldOverrideUrlLoading: true,
                  useOnDownloadStart: true,
                  allowFileAccessFromFileURLs: true,
                  allowUniversalAccessFromFileURLs: true,
                ),
              ),
              onLoadStart: (inAppWebViewController, uri) {
                setState(() {
                  _stackToView = 1;
                });
              },
              onLoadStop: (inAppWebViewController, uri) {
                setState(() {
                  _stackToView = 0;
                });
              },
            ),
          ),
          Padding(
            padding: EdgeInsets.only(bottom: 50.0),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.network(
                    'https://raw.githubusercontent.com/duythien0912/flutter_zalo_login/master/flutter.jpeg',
                    width: 200.0,
                    height: 200.0,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 5.0),
                    child: Text(
                      'Connecting to server ',
                      style: TextStyle(
                        fontSize: 15,
                        color: Colors.red,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

You can use AnimatedSwitcher too : Youtube

AnimatedSwitcher is similar to IndexedStack so IDK if that will help but try it first.

Or you just use inline if statement to achieve what you want. like this:

bool _isLoading = true;
...
_isLoading ? LoadingWidget : WebView

if it is loading, LoadingWidget will be shown, otherwise the WebView will be shown.

And the debug version will always be slow. Try it on release version with: flutter run --release