Best way to share supabase code between dart flutter and non-flutter dart applications? - flutter

Supabase provides supabase-dart for non-flutter applications and provides supabase-flutter for flutter applications. (The pubspec in supabase-flutter apears to use the supabase-dart package.)
I have dart code files that comprise a data access layer (for the postgres db) written for supabase. I'd like to share the dart code files between a non-flutter, server written in dart and a mobile app that of course is in flutter.
The imports in each code file of the flutter app all use:
import 'package:supabase_flutter/supabase_flutter.dart';
So, I didn't necessarily want to bring those code files into the non-flutter, dart server because they use supabase_flutter.
I have the exact same code files in the non-flutter, dart server but I replaced the imports with:
import 'package:supabase/supabase.dart';
And, it works fine, but I have to maintain two versions of essentially the same file.
For these shared files, is it ok to just use the non-flutter import in both the flutter and non-flutter apps?
(I have tried some combinations of this and things seem to work, but I don't know if there is something I need to be concerned about on this since the docs say to use one package for flutter and the other for non-flutter.)

For these shared files, is it ok to just use the non-flutter import in both the flutter and non-flutter apps?
Short answer yes.
supabase_flutter package is just supabase package wrapped with some Flutter specific code mainly to bring auth persistence, so you should be fine importing supabase package for some common pieces!

Related

Firebase 9 & Flutter: How to initializeApp?

I am desperately trying to figure out how to initializeApp with Flutter (not React Native).
I know about the functions to use, but I can not find the firebaseConfig I need to pass into the function.
And no matter what I search for, every resources references to React Native, like as if nobody codes with Flutter since Firebase 9 has been released anymore (or I am the only dummy which is not able to resolve this by myself).
Can someone tell me where to get the firebaseConfig object from?
If I add a new app to my project, I only get the google-services.json, which does NOT include the firebaseConfig object I need to pass.
I understand your confusion now, let me explain. When the guy in the video talks about Firebase v9 he is talking about the SDK version which in the case of Javascript (which I suppose is his main topic in his channel) is currently 9.17.1 an the version 9 has been around since 2021 so it is not new. The different SDKs have their own versions for each platform so thinking it will be the same in every SDK is a mistake by itself. You can check the SDKS here. So there is no Firebase v9, there is a Firebase SDK for javascript version 9. They managed in that way in javascript and in flutter it is not the same. Being that the last update in the flutter SDK was literally yesterday I'm pretty sure they have their reasons to not implement the same functions in flutter since 2021.
Now, one of the thinks the guy talks in the video is deconstructing, which is something common in javascript. The way you do this in flutter is by using show.
So you would be doing this for example:
import 'package:cloud_firestore/cloud_firestore.dart' show FirebaseFirestore, QuerySnapshot; //Add everything you would be using
This way only the specific parts of the library will be imported and the amount of code the Dart VM has to load will be reduced.
As of the access to documents, it is still the same but you can easily create a helper class that contents your references to your collections and then just use that class to reduce the boilerplate code created by the firebase SDK.
You have to install the Firebase CLI and run firebase init.
You need to use the package firebase_core that will give you access to the class Firebase so you can use it to initialize your app Firebase.initializeApp() you can pass the default options for the current platform using Firebase.initilizeApp(options: DefaultFirebaseOptions.currentPlatform) usually your IDE will automatically import the corresponding package but in case it does not you would have to import 'firebase/firebase_options.dart';
An useful link to the documentation: Add Firebase to your Flutter App

Conditional package import for desktop in Flutter

I know that the availability of dart.library.html can be used as the condition for web, but what about desktop?
Although I suppose you can import a particular package for desktop and not for mobile if you create and use a new package in which different packages are specified for different platforms in pubspec.yaml as explained in the document,
it seems a little redundant to make such a package for that purpose.
Is it possible just by using a statement of the import 'foo.dart' if (...) 'bar.dart' style, and if possible, what library is put in its if (...) part?
You cannot use conditional imports to get different behavior between mobile and desktop; see this comment from the Dart team.

How to add packages separately for Flutter web and mobile?

I am creating a Flutter project targeting of Android/iOS and Web is there any way to add the supported packages separately for both the Flutter Mobile and Web. For example, I am using the dart:io package in Flutter mobile applications to save the files, but it is not supported in Flutter web, so for web, I am using the dart:js package to download the files in the web application.
For C# we are simply using conditional symbols but Flutter I could not found any solution.
The problem is I could not import both the packages in my main.dart file. Can anyone help me to achieve this
Dart has conditional imports that can be conditioned on the availability of platform libraries.
That means that you can create one library in your package which uses dart:io, and another which uses dart:js, and then import whichever of these is supported.
import "file_loader.dart" // Version which just throws UnsupportedError
if (dart.library.io) "file_loader_io.dart"
if (dart.library.js) "file_loader_js.dart";
// Use imported API.
The important part is that you give these libraries the same API - the same types
with the same members, and the same top-level function - so that no matter which library is imported, the code that uses it is still valid.
When you compile the program, only one of the libraries will be used, so you won't get warnings if the other libraries are incorrect. You should test the code on all the supported platforms, just to be sure.
You should implement code separately, for example, my_ui_web.dart and my_ui_mobile.dart
Then you can import those files using if:
import 'package:my_awesome_app/my_ui_mobile.dart'
if (dart.library.html) 'package:my_awesome_app/my_ui_web.dart'
as myUI;

Create flutter library to support both web and mobile

I need to create a library which implements a data persistence which should work across mobile and web. For web, I need to import 'dart:html' and for mobile I would use shared preferences.
Problem is, the project won't compile for mobile if "dart:html" is imported. Does there exist a way around for this? Maybe I could have conditional imports?
Can load different handlers by judging 👍 (I support you writing this library)
import '_network_image_io.dart' if (dart.library.html) '_network_image_web.dart' as network_image;

One code base that supports Flutter for Web and Flutter iOS/Android?

Looks like Flutter for Web and Flutter for Mobile have to exist as separate projects due to the imports.
Example:
import 'package:flutter_web/material.dart
vs
import 'package:flutter/material.dart';
Is there anyway to build one flutter project with one code base that works for both web and mobile (ios/android)? If not, is this coming?
If so, can you provide an example app?
Would like to just make one code base for the web and mobile and not have to maintain separate projects/code repos.
The OP's question is a bit old and is no longer applicable at the time of posting(7/21/2020). Flutter now has consolidated web into the main flutter package, which prevents us from running into issues with imports like this. flutter_web is no longer a separate package.
However, you may have been able to accomplish this even at the time you posted your question with conditional imports. This answer provides an excellent method of doing this. The following are the essentials of that post:
The core idea is as follows.
Create an abstract class to define the methods you will need to use in general.
Create implementations specific to web and android dependencies which extends this abstract class.
Create a stub which exposes a method to return the instance of this abstract implementation. This is only to keep the dart analysis tool happy.
In the abstract class import this stub file along with the conditional imports specific for mobile and web. Then in its factory constructor return the instance of the specific implementation. This will be handled automatically by conditional import if written correctly.
This method allows for you to do these imports based on platform and applies to all packages that may not support every possible flutter platform(e.g. dart:html, dart:js, dart:js_util, dart:io).