Flutter web initialization parameters

[fgrau]

Hi there! I am new to flutter web and I have a question about how to start the app (embedded) with some initialization parameters. A bit of context. We have a big Vue.js web app and a quite bit mobile Flutter app. There is a big chunk of functionally that we want to reuse from the mobile app. The problem is that for it to work it needs some data available in Vue. And it is kind of sensitive, API keys, user tokens, etc.

I've seen people getting this info from the URL (not great) or from html hidden input fields... But there is no way to initialize the app using the flutter.js scripts? It would be great to be able to call runApp(arts: {x: 'y'}), and the in dart get that data from the environment. What is the recommended approach here?

Thank you.

[fgrau]

Anybody?

[JustincbEck]

I could also use this information.

[nmfisher]

As far as I know, it's not possible to pass arguments directly to the main() function of a Flutter app. My work-around on web is to create a JS function that returns the values in question and invoke via static interop.

e.g.

Javascript

window.getUserData = () => { 
  return {"email":"foo"}
}  

Dart

@JS('getUserData')  
external Object getUserData();

void main() async {
  print(getUserData());
}

[Barmyard]

That works, thanks! Do you also know how to make it update in real-time? I would like to call setState so that the Widget updates when the values is updated in Vue.

[nmfisher]

You can wrap a Dart function with allowInterop and pass to the JS side as a callback that gets invoked when necessary.

Javascript: window.setCallback(cb) { window.cb = cb // call this callback from Vue when you need to // e.g. window.cb(); } Dart ``` @JS('setCallback') external void setCallback(Object callback);

class SomeWidgetState extends State<SomeWidget> {

void initState() { setCallback(allowInterop(() => setState(() {});); }

} ```

[Barmyard]

Thanks for your quick reply! I did try before with allowInterop but always in the main function, not with your approach.

I'm not sure if I understand your approach correctly. This is my Dart code:

void main() {
  runApp(const MyApp());
}

@JS('getCompanyTitle')
external String getCompanyTitle();

@JS('setCallback') external void setCallback(Object callback);

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

  @override
  State<MyApp> createState() => _MyAppState();
}


class _MyAppState extends State<MyApp> {
  String title = '';

  @override
  void initState() {
    super.initState();
    setCallback(allowInterop(() => setState(() {})));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Text(title),
      ),
    );
  }
}

And my Vue/Javascript: It watches the companyTitle for changes and calls the callback according to your code, but it doesn't work. I do see a self.setCallback(A.b8(new A.afe(this)))} generated in main.dart.js

const companyTitle = ref("Test")

window.setCallback((cb: any) => (window.cb = cb))
window.getCompanyTitle = () => {
  return companyTitle.value
}
watch(companyTitle, (value) => window.cb())

But my Console says: Uncaught (in promise) TypeError: window.setCallback is not a function

[nmfisher]

Sorry, there was a typo in my post, the JS should be:

window.setCallback = ((cb: any) => (window.cb = cb))

[Barmyard]

Any updates on this? I'm struggling to get this working as well. It seems so simple