Crash Backendless in web Flutter 7.1.6

Ehsan_Nikaeen1 · October 30, 2021, 2:21pm

This error is in web flutter project.
I have set initApp in main as instructed:

  void initBackend()  async{
    Backendless.setUrl(Constants.SERVER_URL);
    await Backendless.initApp(
        applicationId: Constants.APPLICATION_ID,
        jsApiKey: Constants.JVScript);

  }

and add the line to the head of index.html.
but I got this error:

2021-10-30 14:33:00.031 10096-10172/com.example.foroodja_web E/flutter:

[ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: Null check operator used on a null value
    #0      Backendless.initApp (package:backendless_sdk/src/backendless.dart:36:29)
    #1      _MyAppState.initBackend (package:foroodja_web/main.dart:35:23)
    #2      _MyAppState.initState (package:foroodja_web/main.dart:30:5)
    #3      StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4726:57)
    #4      ComponentElement.mount (package:flutter/src/widgets/framework.dart:4559:5)
    #5      Element.inflateWidget (package:flutter/src/widgets/framework.dart:3631:14)
    #6      Element.updateChild (package:flutter/src/widgets/framework.dart:3383:18)
    #7      RenderObjectToWidgetElement._rebuild (package:flutter/src/widgets/binding.dart:1198:16)
    #8      RenderObjectToWidgetElement.mount (package:flutter/src/widgets/binding.dart:1167:5)
    #9      RenderObjectToWidgetAdapter.attachToRenderTree.<anonymous closure> (package:flutter/src/widgets/binding.dart:1112:18)
    #10     BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2531:19)
    #11     RenderObjectToWidgetAdapter.attachToRenderTree (package:flutter/src/widgets/binding.dart:1111:13)
    #12     WidgetsBinding.attachRootWidget (package:flutter/src/widgets/binding.dart:944:7)
    #13     WidgetsBinding.scheduleAttachRootWidget.<anonymous closure> (package:flutter/src/widgets/binding.dart:924:7)
    #14     _rootRun (dart:async/zone.dart:1420:47)
    #15     _CustomZone.run (dart:async/zone.dart:1328:19)
    #16     _CustomZone.runGuarded (dart:async/zone.dart:1236:7)
    #17     _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:1276:23)
    #18     _rootRun (dart:async/zone.dart:1428:13)
    #19     _CustomZone.run (dart:async/zone.dart:1328:19)
    #20     _CustomZone.bindCallback.<anonymous closure> (dart:async/zone.dart:1260:23)
    #21     Timer._createTimer.<anonymous closure> (dart:async-patch/timer_patch.dart:18:15)
    #22     _Timer._runTimers (dart:isolate-patch/timer_impl.dart:395:19)
    #23     _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:426:5)
    #24     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:192:12)

Ehsan_Nikaeen1 · October 31, 2021, 8:36am

Nothing??!

vladimir-upirov · November 1, 2021, 6:59am

Hello @Ehsan_Nikaeen1

Welcome to the community and thanks for trying out Backendless.

Could you please share your index.html file?

Regards, Vlad

Ehsan_Nikaeen1 · November 1, 2021, 7:14am

Thanks, This is my index.html:

foroodja_web

vladimir-upirov · November 1, 2021, 7:31am

do you have only this content in the file?

Ehsan_Nikaeen1 · November 1, 2021, 7:32am

Yes, It’s all. I just copied and paste it here!

vladimir-upirov · November 1, 2021, 7:41am

could you please provide a link to the guide you are following

Ehsan_Nikaeen1 · November 1, 2021, 8:13am

This one:

and this is one of commands:

Future get() async {
DataQueryBuilder queryBuilder = DataQueryBuilder()
…pageSize = 50
…sortBy = [‘id’];
await Backendless.data.of(tableName).find(queryBuilder).then((value) {
//print(‘This is Value: $value’);
if (value!.isNotEmpty) {
for (var i = 0; i < value.length; i++) {
output.add(value[i]![rowName]);
}
}
}).onError((error, stackTrace) {
// print(‘this is error: $error’);
});
return output;
}

vladimir-upirov · November 1, 2021, 9:49am

in the index.html file you should see something like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="MyAppChat">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="shortcut icon" type="image/png" href="favicon.png"/>

  <title>MyAppChat</title>
  <link rel="manifest" href="manifest.json">
  <script src="https://api.backendless.com/sdk/js/latest/backendless.min.js"></script>
</head>
<body>
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

Ehsan_Nikaeen1 · November 1, 2021, 10:00am

I changed my index.html with yours. And it didn’t change and didn’t work.
I am using BloC to call backendless command. and they work very well on mobile, but nothing on the web.

vladimir-upirov · November 1, 2021, 10:11am

Do you see any errors in the Browser’s Dev Console?

It is very strange you had this index.html file empty, I assume it should be generated by Flutter when you enable web.

I can recommend you to check steps you did from this doc Building a web application with Flutter | Flutter

Ehsan_Nikaeen1 · November 1, 2021, 10:22am

As you can see it project the other element of the page which are not related to backenless very well, and I also to be sure I wrote another web app with http request and cubit and it worked fine on web.

vladimir-upirov · November 1, 2021, 11:54am

Alright, could you please describe

what you do
what you expect
and what you receive

looking at the screenshot I’m not sure I understand where the error Network Error comes from

Ehsan_Nikaeen1 · November 1, 2021, 1:32pm

this is the function I call with backendless:

class FetchProductList {

late List<Map?> result;
late int countRows;
Future<List<Map?>> productList(String where) async {
await Backendless.data.of(‘ProductDetails’).getObjectCount().then((count) {
countRows = count!;
});

DataQueryBuilder query = DataQueryBuilder()
  ..pageSize = countRows
  ..sortBy = ["updated DESC"]
  ..whereClause = where;
await Backendless.data.of('ProductDetails').find(query).then((value) {
  if (value == null) {
    return null;
  } else{
    print(value.toString());
    result = value;
  }
}).catchError((onError) {
  throw onError;
});
return result;

}
}

this bloc I call it throw:

abstract class ProductsListEvent{}

class LoadProductsList extends ProductsListEvent{
final String where;
LoadProductsList(this.where);
}

abstract class ProductsListState{}

class LoadingProductsList extends ProductsListState{}
class LoadedProductsList extends ProductsListState{
List<Map?> products;
LoadedProductsList(this.products);
}
class FailedProductsList extends ProductsListState{
// ignore: prefer_typing_uninitialized_variables
final error;
FailedProductsList(this.error);
}

class ProductsListBloc extends Bloc<ProductsListEvent, ProductsListState> {
final FetchProductList _fetchProductList = FetchProductList();
ProductsListBloc() : super(LoadingProductsList());

@override
Stream mapEventToState(ProductsListEvent event) async*{
if(event is LoadProductsList){
yield LoadingProductsList();
try{
List<Map?> products = await _fetchProductList.productList(event.where);
yield LoadedProductsList(products);
} catch (e){
yield FailedProductsList(e);
}
}
}
}

and this is view:
return BlocProvider(
create: (context) => ProductsListBloc()…add(LoadProductsList(‘enabled = true’)),
child: BlocBuilder<ProductsListBloc, ProductsListState>(
builder: (context, state) {
if (state is LoadingProductsList) {
return Center(
child: Image.asset(‘assets/images/icons/foroodja.gif’, height: 100,),
);
} else if (state is LoadedProductsList) {
return RefreshIndicator(
onRefresh: () => refreshList(context),
child: Column(
children: [
const CategoriesHorizental(),
SizedBox(
height: wide? pageHeight0.4:(pageHeight0.77)-kToolbarHeight,
child: ListView.builder(
shrinkWrap: true,
itemCount: state.products.length,
itemBuilder: (context, index) {
return ProductsCardView(state.products[index] ?? {});
}, ),
),

            ],
          ),
        );
      }else if (state is FailedProductsList){
        return Center(child: Text('Error occures: ${state.error}'),);
      }else{
        return Container();
      }
    },
  ),
);

the error comes from here:
Center(child: Text(‘Error occures: ${state.error}’),);
which get its data from Bloc in Failed State which it get it from backendless error!

vladimir-upirov · November 1, 2021, 2:16pm

Could you please minimize your code snippet because it’s very tough to find the problem?

For example I can see two Backendless methods Data.getObjectCount and Data.find, which one doesn’t work

Ehsan_Nikaeen1 · November 1, 2021, 5:39pm

In the first message, I send there is backendless error!
error is backendless cannot initApp!

vladimir-upirov · November 1, 2021, 6:37pm

have you tried to debug it?

Nikita_Fedorishchev · November 1, 2021, 7:43pm

Could you please clarify what value is in your Constants.SERVER_URL?

Best Regards, Nikita.

Ehsan_Nikaeen1 · November 1, 2021, 7:45pm

static const String SERVER_URL = “https://eu-api.backendless.com”;

Nikita_Fedorishchev · November 1, 2021, 7:52pm

This is really weird. I just ran a simple example that just fetches an object from the console. Everything worked correctly, so initApp ran without problems.
Make sure the correct appID\apiKey\url is specified everywhere. Perhaps somewhere just an extra space.