diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 8b79b91d..8769b7e5 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -30,7 +30,7 @@ Does your PR require plugin users to manually update their apps to accommodate y [issue database]: https://github.com/firebase/FirebaseUI-Flutter/issues -[Contributor Guide]: https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/contributing.md +[Contributor Guide]: https://github.com/firebase/FirebaseUI-Flutter/blob/main/CONTRIBUTING.md [Flutter Style Guide]: https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo [pub versioning philosophy]: https://dart.dev/tools/pub/versioning [CLA]: https://cla.developers.google.com/ diff --git a/docs/contributing.md b/CONTRIBUTING.md similarity index 99% rename from docs/contributing.md rename to CONTRIBUTING.md index f9d7b99c..353da447 100644 --- a/docs/contributing.md +++ b/CONTRIBUTING.md @@ -181,7 +181,7 @@ Some things to keep in mind before publishing the release: from people that immediately adopt it, and uncovering and resolving those support issues will take more time if you're unavailable. -### Run a release... +### Run a release 1. Switch to `main` branch locally. 2. Run `git pull origin main`. diff --git a/docs/code-of-conduct.md b/code-of-conduct.md similarity index 100% rename from docs/code-of-conduct.md rename to code-of-conduct.md diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 00000000..828f881c --- /dev/null +++ b/docs/README.md @@ -0,0 +1,15 @@ +# Firebase UI Docs + +- Firebase UI Auth + - Auth providers + - [Email](./firebase-ui-auth/providers/email.md) + - [Email link](./firebase-ui-auth/providers/email-link.md) + - [Universal Email Sign In](./firebase-ui-auth/providers/universal-email-sign-in.md) + - [Phone](./firebase-ui-auth/providers/phone.md) + - [OAuth](./firebase-ui-auth/providers/oauth.md) + - [Email verification](./firebase-ui-auth/providers/email-verification.md) + - [Navigation](./firebase-ui-auth/navigation.md) + - [Theming](./firebase-ui-auth/theming.md) +- [Firebase UI Localizations](./firebase_ui_localizations.md) +- [Firebase UI Database](./firebase_ui_database.md) +- [Firebase UI Storage](./firebase-ui-storage/getting-started.md) diff --git a/packages/firebase_ui_auth/doc/README.md b/docs/firebase-ui-auth/README.md similarity index 97% rename from packages/firebase_ui_auth/doc/README.md rename to docs/firebase-ui-auth/README.md index e5e55711..b21d729b 100644 --- a/packages/firebase_ui_auth/doc/README.md +++ b/docs/firebase-ui-auth/README.md @@ -84,6 +84,6 @@ how to use the package within your Flutter app. - [UniversalEmailSignInProvider](./providers/universal-email-sign-in.md) - gets all connected auth providers for a given email. - [OAuth](./providers/oauth.md) -- [Localization](../../firebase_ui_localizations/README.md) +- [Localization](../firebase-ui-localizations.md) - [Theming](./theming.md) - [Navigation](./navigation.md) diff --git a/packages/firebase_ui_auth/doc/images/ui-apple-provider.jpg b/docs/firebase-ui-auth/images/ui-apple-provider.jpg similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-apple-provider.jpg rename to docs/firebase-ui-auth/images/ui-apple-provider.jpg diff --git a/packages/firebase_ui_auth/doc/images/ui-auth-desktop-side-content.png b/docs/firebase-ui-auth/images/ui-auth-desktop-side-content.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-auth-desktop-side-content.png rename to docs/firebase-ui-auth/images/ui-auth-desktop-side-content.png diff --git a/packages/firebase_ui_auth/doc/images/ui-auth-email-google-provider.png b/docs/firebase-ui-auth/images/ui-auth-email-google-provider.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-auth-email-google-provider.png rename to docs/firebase-ui-auth/images/ui-auth-email-google-provider.png diff --git a/packages/firebase_ui_auth/doc/images/ui-auth-email-provider.png b/docs/firebase-ui-auth/images/ui-auth-email-provider.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-auth-email-provider.png rename to docs/firebase-ui-auth/images/ui-auth-email-provider.png diff --git a/packages/firebase_ui_auth/doc/images/ui-auth-forgot-password.png b/docs/firebase-ui-auth/images/ui-auth-forgot-password.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-auth-forgot-password.png rename to docs/firebase-ui-auth/images/ui-auth-forgot-password.png diff --git a/packages/firebase_ui_auth/doc/images/ui-auth-google-email-provider.png b/docs/firebase-ui-auth/images/ui-auth-google-email-provider.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-auth-google-email-provider.png rename to docs/firebase-ui-auth/images/ui-auth-google-email-provider.png diff --git a/packages/firebase_ui_auth/doc/images/ui-auth-no-providers.png b/docs/firebase-ui-auth/images/ui-auth-no-providers.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-auth-no-providers.png rename to docs/firebase-ui-auth/images/ui-auth-no-providers.png diff --git a/packages/firebase_ui_auth/doc/images/ui-auth-phone-input-screen.png b/docs/firebase-ui-auth/images/ui-auth-phone-input-screen.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-auth-phone-input-screen.png rename to docs/firebase-ui-auth/images/ui-auth-phone-input-screen.png diff --git a/packages/firebase_ui_auth/doc/images/ui-auth-profile-screen.png b/docs/firebase-ui-auth/images/ui-auth-profile-screen.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-auth-profile-screen.png rename to docs/firebase-ui-auth/images/ui-auth-profile-screen.png diff --git a/packages/firebase_ui_auth/doc/images/ui-auth-register.png b/docs/firebase-ui-auth/images/ui-auth-register.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-auth-register.png rename to docs/firebase-ui-auth/images/ui-auth-register.png diff --git a/packages/firebase_ui_auth/doc/images/ui-auth-signin-header.png b/docs/firebase-ui-auth/images/ui-auth-signin-header.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-auth-signin-header.png rename to docs/firebase-ui-auth/images/ui-auth-signin-header.png diff --git a/packages/firebase_ui_auth/doc/images/ui-auth-signin-subtitle.png b/docs/firebase-ui-auth/images/ui-auth-signin-subtitle.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-auth-signin-subtitle.png rename to docs/firebase-ui-auth/images/ui-auth-signin-subtitle.png diff --git a/packages/firebase_ui_auth/doc/images/ui-auth-theming-button.png b/docs/firebase-ui-auth/images/ui-auth-theming-button.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-auth-theming-button.png rename to docs/firebase-ui-auth/images/ui-auth-theming-button.png diff --git a/packages/firebase_ui_auth/doc/images/ui-auth-theming-default.png b/docs/firebase-ui-auth/images/ui-auth-theming-default.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-auth-theming-default.png rename to docs/firebase-ui-auth/images/ui-auth-theming-default.png diff --git a/packages/firebase_ui_auth/doc/images/ui-auth-theming-outline-border.png b/docs/firebase-ui-auth/images/ui-auth-theming-outline-border.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-auth-theming-outline-border.png rename to docs/firebase-ui-auth/images/ui-auth-theming-outline-border.png diff --git a/packages/firebase_ui_auth/doc/images/ui-email-link-provider copy.png b/docs/firebase-ui-auth/images/ui-email-link-provider copy.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-email-link-provider copy.png rename to docs/firebase-ui-auth/images/ui-email-link-provider copy.png diff --git a/packages/firebase_ui_auth/doc/images/ui-email-link-provider.png b/docs/firebase-ui-auth/images/ui-email-link-provider.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-email-link-provider.png rename to docs/firebase-ui-auth/images/ui-email-link-provider.png diff --git a/packages/firebase_ui_auth/doc/images/ui-email-provider.jpg b/docs/firebase-ui-auth/images/ui-email-provider.jpg similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-email-provider.jpg rename to docs/firebase-ui-auth/images/ui-email-provider.jpg diff --git a/packages/firebase_ui_auth/doc/images/ui-facebook-client-id copy.png b/docs/firebase-ui-auth/images/ui-facebook-client-id copy.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-facebook-client-id copy.png rename to docs/firebase-ui-auth/images/ui-facebook-client-id copy.png diff --git a/packages/firebase_ui_auth/doc/images/ui-facebook-client-id.png b/docs/firebase-ui-auth/images/ui-facebook-client-id.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-facebook-client-id.png rename to docs/firebase-ui-auth/images/ui-facebook-client-id.png diff --git a/packages/firebase_ui_auth/doc/images/ui-facebook-provider.jpg b/docs/firebase-ui-auth/images/ui-facebook-provider.jpg similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-facebook-provider.jpg rename to docs/firebase-ui-auth/images/ui-facebook-provider.jpg diff --git a/packages/firebase_ui_auth/doc/images/ui-google-provider-client-id copy.png b/docs/firebase-ui-auth/images/ui-google-provider-client-id copy.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-google-provider-client-id copy.png rename to docs/firebase-ui-auth/images/ui-google-provider-client-id copy.png diff --git a/packages/firebase_ui_auth/doc/images/ui-google-provider-client-id.png b/docs/firebase-ui-auth/images/ui-google-provider-client-id.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-google-provider-client-id.png rename to docs/firebase-ui-auth/images/ui-google-provider-client-id.png diff --git a/packages/firebase_ui_auth/doc/images/ui-google-provider.jpg b/docs/firebase-ui-auth/images/ui-google-provider.jpg similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-google-provider.jpg rename to docs/firebase-ui-auth/images/ui-google-provider.jpg diff --git a/packages/firebase_ui_auth/doc/images/ui-phone-provider.jpg b/docs/firebase-ui-auth/images/ui-phone-provider.jpg similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-phone-provider.jpg rename to docs/firebase-ui-auth/images/ui-phone-provider.jpg diff --git a/packages/firebase_ui_auth/doc/images/ui-twitter-app-id copy.png b/docs/firebase-ui-auth/images/ui-twitter-app-id copy.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-twitter-app-id copy.png rename to docs/firebase-ui-auth/images/ui-twitter-app-id copy.png diff --git a/packages/firebase_ui_auth/doc/images/ui-twitter-app-id.png b/docs/firebase-ui-auth/images/ui-twitter-app-id.png similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-twitter-app-id.png rename to docs/firebase-ui-auth/images/ui-twitter-app-id.png diff --git a/packages/firebase_ui_auth/doc/images/ui-twitter-provider.jpg b/docs/firebase-ui-auth/images/ui-twitter-provider.jpg similarity index 100% rename from packages/firebase_ui_auth/doc/images/ui-twitter-provider.jpg rename to docs/firebase-ui-auth/images/ui-twitter-provider.jpg diff --git a/packages/firebase_ui_auth/doc/migration.md b/docs/firebase-ui-auth/migration.md similarity index 100% rename from packages/firebase_ui_auth/doc/migration.md rename to docs/firebase-ui-auth/migration.md diff --git a/packages/firebase_ui_auth/doc/navigation.md b/docs/firebase-ui-auth/navigation.md similarity index 86% rename from packages/firebase_ui_auth/doc/navigation.md rename to docs/firebase-ui-auth/navigation.md index 20dd7189..ac69169f 100644 --- a/packages/firebase_ui_auth/doc/navigation.md +++ b/docs/firebase-ui-auth/navigation.md @@ -95,13 +95,3 @@ class MyApp extends StatelessWidget { ``` To learn more about the available actions, check out the [FirebaseUIActions API reference](https://pub.dev/documentation/firebase_ui_auth/latest/firebase_ui_auth/FirebaseUIActions-class.html). - -## Other topics - -- [EmailAuthProvider](./providers/email.md) - allows registering and signing using email and password. -- [EmailLinkAuthProvider](./providers/email-link.md) - allows registering and signing using a link sent to email. -- [PhoneAuthProvider](./providers/phone.md) - allows registering and signing using a phone number -- [UniversalEmailSignInProvider](./providers/universal-email-sign-in.md) - gets all connected auth providers for a given email. -- [OAuth](./providers/oauth.md) -- [Localization](../../firebase_ui_localizations/README.md) -- [Theming](./theming.md) diff --git a/packages/firebase_ui_auth/doc/providers/email-link.md b/docs/firebase-ui-auth/providers/email-link.md similarity index 92% rename from packages/firebase_ui_auth/doc/providers/email-link.md rename to docs/firebase-ui-auth/providers/email-link.md index dee8b6bc..bbd63339 100644 --- a/packages/firebase_ui_auth/doc/providers/email-link.md +++ b/docs/firebase-ui-auth/providers/email-link.md @@ -245,14 +245,3 @@ class _CustomEmailLinkSignInState extends State } } ``` - -## Other topics - -- [EmailAuthProvider](./email.md) - allows registering and signing using email and password. -- [Email verification](./email-verification.md) -- [PhoneAuthProvider](./phone.md) - allows registering and signing using a phone number -- [UniversalEmailSignInProvider](./universal-email-sign-in.md) - gets all connected auth providers for a given email. -- [OAuth](./oauth.md) -- [Localization](../../../firebase_ui_localizations/README.md) -- [Theming](../theming.md) -- [Navigation](../navigation.md) diff --git a/packages/firebase_ui_auth/doc/providers/email-verification.md b/docs/firebase-ui-auth/providers/email-verification.md similarity index 84% rename from packages/firebase_ui_auth/doc/providers/email-verification.md rename to docs/firebase-ui-auth/providers/email-verification.md index 3b603ed9..610e37a3 100644 --- a/packages/firebase_ui_auth/doc/providers/email-verification.md +++ b/docs/firebase-ui-auth/providers/email-verification.md @@ -100,14 +100,3 @@ class _MyEmailVerificationScreenState extends State { } } ``` - -## Other topics - -- [EmailAuthProvider](./email.md) - allows registering and signing using email and password. -- [EmailLinkAuthProvider](./email-link.md) - allows registering and signing using a link sent to email. -- [PhoneAuthProvider](./phone.md) - allows registering and signing using a phone number -- [UniversalEmailSignInProvider](./universal-email-sign-in.md) - gets all connected auth providers for a given email. -- [OAuth](./oauth.md) -- [Localization](../../../firebase_ui_localizations/README.md) -- [Theming](../theming.md) -- [Navigation](../navigation.md) diff --git a/packages/firebase_ui_auth/doc/providers/email.md b/docs/firebase-ui-auth/providers/email.md similarity index 92% rename from packages/firebase_ui_auth/doc/providers/email.md rename to docs/firebase-ui-auth/providers/email.md index a5749f36..41235200 100644 --- a/packages/firebase_ui_auth/doc/providers/email.md +++ b/docs/firebase-ui-auth/providers/email.md @@ -225,14 +225,3 @@ class _CustomEmailSignInState extends State } } ``` - -## Other topics - -- [Email verification](./email-verification.md) -- [EmailLinkAuthProvider](./email-link.md) - allows registering and signing using a link sent to email. -- [PhoneAuthProvider](./phone.md) - allows registering and signing using a phone number -- [UniversalEmailSignInProvider](./universal-email-sign-in.md) - gets all connected auth providers for a given email. -- [OAuth](./oauth.md) -- [Localization](../../../firebase_ui_localizations/README.md) -- [Theming](../theming.md) -- [Navigation](../navigation.md) diff --git a/packages/firebase_ui_auth/doc/providers/oauth.md b/docs/firebase-ui-auth/providers/oauth.md similarity index 91% rename from packages/firebase_ui_auth/doc/providers/oauth.md rename to docs/firebase-ui-auth/providers/oauth.md index a24c2a5a..a6f00a27 100644 --- a/packages/firebase_ui_auth/doc/providers/oauth.md +++ b/docs/firebase-ui-auth/providers/oauth.md @@ -179,14 +179,3 @@ class MyCustomScreen extends StatelessWidget { } } ``` - -## Other topics - -- [EmaiAuthProvider](./email.md) - allows registering and signing using email and password. -- [Email verification](./email-verification.md) -- [EmailLinkAuthProvider](./email-link.md) - allows registering and signing using a link sent to email. -- [PhoneAuthProvider](./phone.md) - allows registering and signing using a phone number -- [UniversalEmailSignInProvider](./universal-email-sign-in.md) - gets all connected auth providers for a given email. -- [Localization](../../../firebase_ui_localizations/README.md) -- [Theming](../theming.md) -- [Navigation](../navigation.md) diff --git a/packages/firebase_ui_auth/doc/providers/phone.md b/docs/firebase-ui-auth/providers/phone.md similarity index 94% rename from packages/firebase_ui_auth/doc/providers/phone.md rename to docs/firebase-ui-auth/providers/phone.md index 0949e85a..8721abdf 100644 --- a/packages/firebase_ui_auth/doc/providers/phone.md +++ b/docs/firebase-ui-auth/providers/phone.md @@ -312,14 +312,3 @@ class _CustomPhoneVerificationState extends State } } ``` - -## Other topics - -- [Email verification](./email-verification.md) -- [EmailLinkAuthProvider](./email-link.md) - allows registering and signing using a link sent to email. -- [PhoneAuthProvider](./phone.md) - allows registering and signing using a phone number -- [UniversalEmailSignInProvider](./universal-email-sign-in.md) - gets all connected auth providers for a given email. -- [OAuth](./oauth.md) -- [Localization](../../../firebase_ui_localizations/README.md) -- [Theming](../theming.md) -- [Navigation](../navigation.md) diff --git a/packages/firebase_ui_auth/doc/providers/universal-email-sign-in.md b/docs/firebase-ui-auth/providers/universal-email-sign-in.md similarity index 90% rename from packages/firebase_ui_auth/doc/providers/universal-email-sign-in.md rename to docs/firebase-ui-auth/providers/universal-email-sign-in.md index def074c4..ceb4b014 100644 --- a/packages/firebase_ui_auth/doc/providers/universal-email-sign-in.md +++ b/docs/firebase-ui-auth/providers/universal-email-sign-in.md @@ -185,14 +185,3 @@ class _CustomUniversalEmailSignInState extends State } } ``` - -## Other topics - -- [EmaiAuthProvider](./email.md) - allows registering and signing using email and password. -- [Email verification](./email-verification.md) -- [EmailLinkAuthProvider](./email-link.md) - allows registering and signing using a link sent to email. -- [PhoneAuthProvider](./phone.md) - allows registering and signing using a phone number -- [OAuth](./oauth.md) -- [Localization](../../../firebase_ui_localizations/README.md) -- [Theming](../theming.md) -- [Navigation](../navigation.md) diff --git a/packages/firebase_ui_auth/doc/theming.md b/docs/firebase-ui-auth/theming.md similarity index 98% rename from packages/firebase_ui_auth/doc/theming.md rename to docs/firebase-ui-auth/theming.md index b6213534..936b3639 100644 --- a/packages/firebase_ui_auth/doc/theming.md +++ b/docs/firebase-ui-auth/theming.md @@ -104,5 +104,5 @@ The button will now respect the updated theme data and display a styled button i - [UniversalEmailSignInProvider](./providers/universal-email-sign-in.md) - gets all connected auth providers for a given email. - [OAuth](./providers/oauth.md) -- [Localization](../../firebase_ui_localizations/README.md) +- [Localization](../firebase-ui-localizations.md) - [Navigation](./navigation.md) diff --git a/docs/firebase-ui-database.md b/docs/firebase-ui-database.md new file mode 100644 index 00000000..548920de --- /dev/null +++ b/docs/firebase-ui-database.md @@ -0,0 +1,170 @@ +# Firebase UI for Realtime Database + +Firebase UI enables you to easily integrate your application UI with your Realtime database. + +## Installation + +```sh +flutter pub add firebase_database +flutter pub add firebase_ui_database +``` + +## Usage + +Import the Firebase UI for Realtime Database package. + +```dart +import 'package:firebase_ui_database/firebase_ui_database.dart'; +``` + +### Infinite scrolling + +Infinite scrolling is the concept of continuously loading more data from a database +as the user scrolls through your application. This is useful when you have a large +datasets, as it enables the application to render faster as well as reducing network +overhead for data the user might never see. + +Firebase UI for Realtime Database provides a convenient way to implement infinite scrolling +using the Realtime Database database with the `FirebaseDatabaseListView` widget. + +At a minimum, the widget accepts a Realtime Database query and an item builder. As the user scrolls +down (or across) your list, more data will be automatically fetched from the database (whilst +respecting query conditions such as ordering). + +To get started, create a query and provide an item builder. For this example, we'll display +a list of users from the `users` collection: + +```dart +final usersQuery = FirebaseDatabase.instance.ref('users').orderByChild('name'); + +FirebaseDatabaseListView( + query: usersQuery, + itemBuilder: (context, snapshot) { + Map user = snapshot.value as Map; + + return Text('User name is ${user['name']}'); + }, +); +``` + +The `FirebaseDatabaseListView` widget is built on-top of Flutter's own [`ListView`](https://api.flutter.dev/flutter/widgets/ListView-class.html) +widget, and accepts the same parameters which we can optionally provide. For example, to change the scroll-direction to horizontal: + +```dart +FirebaseDatabaseListView( + scrollDirection: Axis.horizontal, + // ... +); +``` + +### Controlling page size + +By default, the widget will fetch 10 items from the collection at a time. This can be changed by providing a `pageSize` parameter: + +```dart +FirebaseDatabaseListView( + pageSize: 20, + // ... +); +``` + +In general, it is good practice to keep this value as small as possible to reduce network overhead. If the height (or width) +of an individual item is large, it is recommended to lower the page size. + +### Loading and error handling + +By default, the widget will display a loading indicator while data is being fetched from the database, and ignore any errors which might be thrown +(such as permission denied). You can override this behavior by providing a `loadingBuilder` and `errorBuilder` parameters to the widget: + +```dart +FirebaseDatabaseListView( + loadingBuilder: (context) => MyCustomLoadingIndicator(), + errorBuilder: (context, error, stackTrace) => MyCustomError(error, stackTrace), + // ... +); +``` + +### Advanced configuration + +In many cases, the `FirebaseDatabaseListView` widget is enough to render simple lists of collection data. +However, you may have specific requirements which require more control over the widget's behavior +(such as using a [`GridView`](https://api.flutter.dev/flutter/widgets/GridView-class.html)). + +The `FirebaseDatabaseQueryBuilder` provides the building blocks for advanced configuration at the expense of +requiring more boilerplate code. The widget does not provide any underlying list implementation, instead +you are expected to provide this yourself. + +Much like the `FirebaseDatabaseListView` widget, provide a query and builder: + +```dart +final usersQuery = FirebaseDatabase.instance.ref('users').orderByChild('name'); + +FirebaseDatabaseQueryBuilder( + query: usersQuery, + builder: (context, snapshot, _) { + // ... TODO! + }, +); +``` + +The main difference to note here is that the `builder` property returns a `FirebaseQueryBuilderSnapshot`, rather +than an individual document. The builder returns the current state of the entire query, such as whether +data is loading, an error has occurred and the documents. + +This requires us to implement our own list based implementation. Firstly, let's handle the loading and error +states: + +```dart +FirebaseDatabaseQueryBuilder( + query: usersQuery, + builder: (context, snapshot, _) { + if (snapshot.isFetching) { + return const CircularProgressIndicator(); + } + + if (snapshot.hasError) { + return Text('Something went wrong! ${snapshot.error}'); + } + + // ... + }, +); +``` + +Next, we now need to return a list-view based implementation for our application to display the data. For example, +to display a grid of users, we can use the [`GridView`](https://api.flutter.dev/flutter/widgets/GridView-class.html) widget: + +```dart +FirebaseDatabaseQueryBuilder( + query: usersQuery, + builder: (context, snapshot, _) { + // ... + + return GridView.builder( + itemCount: snapshot.docs.length, + itemBuilder: (context, index) { + // if we reached the end of the currently obtained items, we try to + // obtain more items + if (snapshot.hasMore && index + 1 == snapshot.docs.length) { + // Tell FirebaseDatabaseQueryBuilder to try to obtain more items. + // It is safe to call this function from within the build method. + snapshot.fetchMore(); + } + + final user = snapshot.docs[index].value as Map; + + return Container( + padding: const EdgeInsets.all(8), + color: Colors.teal[100], + child: const Text("User name is ${user['name']}"), + ); + }, + ); + }, +); +``` + +### Caveats + +1. Within the `itemBuilder` of our `GridView`, we have to manually ensure that we call the `fetchMore()` method on the snapshot when more data is required. +1. The `FirebaseDatabaseQueryBuilder` does not provide a list-view based handler, instead you must provide your own implementation. diff --git a/docs/firebase-ui-firestore.md b/docs/firebase-ui-firestore.md new file mode 100644 index 00000000..ae40a21d --- /dev/null +++ b/docs/firebase-ui-firestore.md @@ -0,0 +1,217 @@ +# Firebase UI for Firestore + +Firebase UI for Firestore enables you to easily integrate your application UI with your Cloud +Firestore database. + +## Installation + +```sh +flutter pub add cloud_firestore +flutter pub add firebase_ui_firestore +``` + +## Usage + +Import the Firebase UI for Firestore package: + +```dart +import 'package:firebase_ui_firestore/firebase_ui_firestore.dart'; +``` + +### Infinite scrolling + +Infinite scrolling is the concept of continuously loading more data from a database +as the user scrolls through your application. This is useful when you have a large +datasets, as it enables the application to render faster as well as reduces network +overhead for data the user might never see. + +Firebase UI for Firestore provides a convenient way to implement infinite scrolling +using the Firestore database with the `FirestoreListView` widget. + +At a minimum the widget accepts a Firestore query and an item builder. As the user scrolls +down (or across) your list, more data will be automatically fetched from the database (whilst +respecting query conditions such as ordering). + +To get started, create a query and provide an item builder. For this example, we'll display +a list of users from the `users` collection: + +```dart +final usersQuery = FirebaseFirestore.instance.collection('users').orderBy('name'); + +FirestoreListView>( + query: usersQuery, + itemBuilder: (context, snapshot) { + Map user = snapshot.data(); + + return Text('User name is ${user['name']}'); + }, +); +``` + +The `FirestoreListView` widget is built on-top of Flutter's own [`ListView`](https://api.flutter.dev/flutter/widgets/ListView-class.html) +widget, and accepts the same parameters which we can optionally provide. For example, to change the scroll-direction to horizontal: + +```dart +FirestoreListView>( + scrollDirection: Axis.horizontal, + // ... +); +``` + +### Controlling page size + +By default, the widget will fetch 10 items from the collection at a time. This can be changed by providing a `pageSize` parameter: + +```dart +FirestoreListView>( + pageSize: 20, + // ... +); +``` + +In general, it is good practice to keep this value as small as possible to reduce network overhead. If the height (or width) +of an individual item is large, it is recommended to lower the page size. + +### Using typed responses + +The `cloud_firestore` plugin allows us to type the responses we receive from the database using the `withConverter` API. For more information, +see [the documentation](https://firebase.google.com/docs/firestore/query-data/get-data#custom_objects). + +The `FirestoreListView` works with this out of the box. Simply provide a converted query to the widget, for example: + +```dart +class User { + User({required this.name, required this.age}); + + User.fromJson(Map json) + : this( + name: json['name']! as String, + age: json['age']! as int, + ); + + final String name; + final int age; + + Map toJson() { + return { + 'name': name, + 'age': age, + }; + } +} + +final usersQuery = FirebaseFirestore.instance.collection('users') + .orderBy('name') + .withConverter( + fromFirestore: (snapshot, _) => User.fromJson(snapshot.data()!), + toFirestore: (user, _) => user.toJson(), + ); + +FirestoreListView( + query: usersQuery, + itemBuilder: (context, snapshot) { + // Data is now typed! + User user = snapshot.data(); + + return Text(user.name); + }, +); +``` + +### Loading and error handling + +By default, the widget will display a loading indicator while data is being fetched from the database, and ignore any errors which might be thrown +(such as permission denied). You can override this behavior by providing a `loadingBuilder` and `errorBuilder` parameters to the widget: + +```dart +FirestoreListView>( + loadingBuilder: (context) => MyCustomLoadingIndicator(), + errorBuilder: (context, error, stackTrace) => MyCustomError(error, stackTrace), + // ... +); +``` + +### Advanced configuration + +In many cases, the `FirestoreListView` widget is enough to render simple lists of collection data. +However, you may have specific requirements which require more control over the widget's behavior +(such as using a [`GridView`](https://api.flutter.dev/flutter/widgets/GridView-class.html)). + +The `FirestoreQueryBuilder` provides the building blocks for advanced configuration at the expense of +requiring more boilerplate code. The widget does not provide any underlying list implementation, instead +you are expected to provide this yourself. + +Much like the `FirestoreListView` widget, provide a query and builder: + +```dart +final usersQuery = FirebaseFirestore.instance.collection('users').orderBy('name'); + +FirestoreQueryBuilder>( + query: usersQuery, + builder: (context, snapshot, _) { + // ... TODO! + }, +); +``` + +The main difference to note here is that the `builder` property returns a `QueryBuilderSnapshot`, rather +than an individual document. The builder returns the current state of the entire query, such as whether +data is loading, an error has occurred and the documents. + +This requires us to implement our own list based implementation. Firstly, let's handle the loading and error +states: + +```dart +FirestoreQueryBuilder>( + query: usersQuery, + builder: (context, snapshot, _) { + if (snapshot.isFetching) { + return const CircularProgressIndicator(); + } + + if (snapshot.hasError) { + return Text('Something went wrong! ${snapshot.error}'); + } + + // ... + }, +); +``` + +Next, we now need to return a list-view based implementation for our application to display the data. For example, +to display a grid of users, we can use the [`GridView`](https://api.flutter.dev/flutter/widgets/GridView-class.html) widget: + +```dart +FirestoreQueryBuilder>( + query: usersQuery, + builder: (context, snapshot, _) { + // ... + + return GridView.builder( + itemCount: snapshot.docs.length, + itemBuilder: (context, index) { + // if we reached the end of the currently obtained items, we try to + // obtain more items + if (snapshot.hasMore && index + 1 == snapshot.docs.length) { + // Tell FirestoreQueryBuilder to try to obtain more items. + // It is safe to call this function from within the build method. + snapshot.fetchMore(); + } + + final user = snapshot.docs[index].data(); + + return Container( + padding: const EdgeInsets.all(8), + color: Colors.teal[100], + child: const Text("User name is ${user['name']}"), + ); + }, + ); + }, +); +``` + +### Caveats + +1. Within the `itemBuilder` of our `GridView`, we have to manually ensure that we call the `fetchMore()` method on the snapshot when more data is required. +1. The `FirestoreQueryBuilder` does not provide a list-view based handler, instead you must provide your own implementation. diff --git a/docs/firebase-ui-localizations.md b/docs/firebase-ui-localizations.md new file mode 100644 index 00000000..a0e29d53 --- /dev/null +++ b/docs/firebase-ui-localizations.md @@ -0,0 +1,61 @@ +# Firebase UI Localizations + +Firebase UI for Flutter supports localization, so every single label can be customized. + +## Installation + +```yaml +dependencies: + flutter_localizations: + sdk: flutter + firebase_ui_localizations: ^1.2.0 +``` + +## Usage + +If your app supports only a single language, and you want to override labels – you will need to provide a custom class that implements [`DefaultLocalizations`](https://pub.dev/documentation/firebase_ui_localizations/latest/DefaultLocalizations-class.html), +for example: + +```dart +import 'package:flutter_localizations/flutter_localizations.dart'; +import 'package:firebase_ui_localizations/firebase_ui_localizations.dart'; + +class LabelOverrides extends DefaultLocalizations { + const LabelOverrides(); + + @override + String get emailInputLabel => 'Enter your email'; + + @override + String get passwordInputLabel => 'Enter your password'; +} +``` + +Once created, pass the instance of `LabelOverrides` to the `localizationsDelegates` list in your `MaterialApp`/`CupertinoApp`: + +```dart +class MyApp extends StatelessWidget { + @override + Widget build(BuildContext context) { + return MaterialApp( + localizationsDelegates: [ + // Creates an instance of FirebaseUILocalizationDelegate with overridden labels + FirebaseUILocalizations.withDefaultOverrides(const LabelOverrides()), + + // Delegates below take care of built-in flutter widgets + GlobalMaterialLocalizations.delegate, + GlobalWidgetsLocalizations.delegate, + + // This delegate is required to provide the labels that are not overridden by LabelOverrides + FirebaseUILocalizations.delegate, + ], + // ... + ); + } +} +``` + +If you need to support multiple languages – follow the [official Flutter localization guide](https://docs.flutter.dev/development/accessibility-and-localization/internationalization#an-alternative-class-for-the-apps-localized-resources) +and make sure that your custom delegate extends `LocalizationsDelegate`. + +> Note: check out [API reference](https://pub.dev/documentation/firebase_ui_localizations/latest/FlutterFireUILocalizationLabels-class.html) to learn what labels are used by specific widgets diff --git a/packages/firebase_ui_storage/doc/getting-started.md b/docs/firebase-ui-storage/getting-started.md similarity index 90% rename from packages/firebase_ui_storage/doc/getting-started.md rename to docs/firebase-ui-storage/getting-started.md index 43ba4ba2..17d06268 100644 --- a/packages/firebase_ui_storage/doc/getting-started.md +++ b/docs/firebase-ui-storage/getting-started.md @@ -30,7 +30,7 @@ This section will walk you through the configuration process for Firebase UI Sto ### macOS -If you're building for macOS, you will need to add an entitlement. +If you're building for macOS, you will need to add an entitlement. For read-only access if you only upload files: @@ -122,12 +122,12 @@ class MyWidget extends StatelessWidget { ### Firebase UI Storage widgets -- [`UploadButton`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/upload-button.md) -- [`TaskProgressIndicator`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/task-progress-indicator.md) -- [`StorageImage`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/storage-image.md) -- [`StorageListView`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/list-view.md) -- [`StorageGridView`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/grid-view.md) -- [`PaginatedLoadingController`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/paginated-loading-controller.md) +- [`UploadButton`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/docs/firebase-ui-storage/upload-button.md) +- [`TaskProgressIndicator`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/docs/firebase-ui-storage/task-progress-indicator.md) +- [`StorageImage`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/docs/firebase-ui-storage/storage-image.md) +- [`StorageListView`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/docs/firebase-ui-storage/list-view.md) +- [`StorageGridView`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/docs/firebase-ui-storage/grid-view.md) +- [`PaginatedLoadingController`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/docs/firebase-ui-storage/paginated-loading-controller.md) --- diff --git a/packages/firebase_ui_storage/doc/grid-view.md b/docs/firebase-ui-storage/grid-view.md similarity index 96% rename from packages/firebase_ui_storage/doc/grid-view.md rename to docs/firebase-ui-storage/grid-view.md index 1ee64e5d..3393119f 100644 --- a/packages/firebase_ui_storage/doc/grid-view.md +++ b/docs/firebase-ui-storage/grid-view.md @@ -80,7 +80,7 @@ StorageGridView( ### Custom scroll views with pagination logic If you need something more customizable, but still want pagination logic handled for you, you can use -[`PaginatedLoadingController`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/paginated-loading-controller.md) +[`PaginatedLoadingController`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/docs/firebase-ui-storage/paginated-loading-controller.md) --- diff --git a/packages/firebase_ui_storage/doc/list-view.md b/docs/firebase-ui-storage/list-view.md similarity index 95% rename from packages/firebase_ui_storage/doc/list-view.md rename to docs/firebase-ui-storage/list-view.md index 1e46c770..38228579 100644 --- a/packages/firebase_ui_storage/doc/list-view.md +++ b/docs/firebase-ui-storage/list-view.md @@ -61,7 +61,7 @@ StorageListView( ### Custom scroll views with pagination logic If you need something more customizable, but still want pagination logic handled for you, you can use -[`PaginatedLoadingController`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/paginated-loading-controller.md) +[`PaginatedLoadingController`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/docs/firebase-ui-storage/paginated-loading-controller.md) --- diff --git a/packages/firebase_ui_storage/doc/paginated-loading-controller.md b/docs/firebase-ui-storage/paginated-loading-controller.md similarity index 93% rename from packages/firebase_ui_storage/doc/paginated-loading-controller.md rename to docs/firebase-ui-storage/paginated-loading-controller.md index 139d8aea..cbf012ae 100644 --- a/packages/firebase_ui_storage/doc/paginated-loading-controller.md +++ b/docs/firebase-ui-storage/paginated-loading-controller.md @@ -6,8 +6,8 @@ Firebase UI Storage provides [`StorageListView`] and [`StorageGridView`] widgets In cases where you want to build a completely custom scroll view, but still have pagination logic handled – you can use `PaginatedLoadingController`. -[`StorageListView`]: https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/list-view.md -[`StorageGridView`]: https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/grid-view.md +[`StorageListView`]: https://github.com/firebase/FirebaseUI-Flutter/tree/main/docs/firebase-ui-storage/list-view.md +[`StorageGridView`]: https://github.com/firebase/FirebaseUI-Flutter/tree/main/docs/firebase-ui-storage/grid-view.md ```dart class MyWidget extends StatefulWidget { diff --git a/packages/firebase_ui_storage/doc/storage-image.md b/docs/firebase-ui-storage/storage-image.md similarity index 100% rename from packages/firebase_ui_storage/doc/storage-image.md rename to docs/firebase-ui-storage/storage-image.md diff --git a/packages/firebase_ui_storage/doc/task-progress-indicator.md b/docs/firebase-ui-storage/task-progress-indicator.md similarity index 94% rename from packages/firebase_ui_storage/doc/task-progress-indicator.md rename to docs/firebase-ui-storage/task-progress-indicator.md index 992e06f7..3a2e98e0 100644 --- a/packages/firebase_ui_storage/doc/task-progress-indicator.md +++ b/docs/firebase-ui-storage/task-progress-indicator.md @@ -13,7 +13,7 @@ UploadTask task = ref.putFile(myFile); TaskProgressIndicator(task: task); ``` -> You can see how to use `TaskProgressIndicator` together with `UploadButton` [here](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/upload-button.md#showing-upload-progress). +> You can see how to use `TaskProgressIndicator` together with `UploadButton` [here](https://github.com/firebase/FirebaseUI-Flutter/tree/main/docs/firebase-ui-storage/upload-button.md#showing-upload-progress). `TaskProgressIndicator` also works for download tasks: diff --git a/packages/firebase_ui_storage/doc/upload-button.md b/docs/firebase-ui-storage/upload-button.md similarity index 94% rename from packages/firebase_ui_storage/doc/upload-button.md rename to docs/firebase-ui-storage/upload-button.md index dc863e55..3fa0a20c 100644 --- a/packages/firebase_ui_storage/doc/upload-button.md +++ b/docs/firebase-ui-storage/upload-button.md @@ -31,7 +31,7 @@ class MyUploadButton extends StatelessWidget { ## Showing upload progress -`UploadButton` shows `CircularProgressIndicator` under `MaterialApp`, and `CupertinoActivityIndicator` under `CupertinoApp` while the upload is in progress. For large uploads, you might want to show upload progress, so you could replace the button with a [`TaskProgressIndicator`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/task-progress-indicator.md) in a stateful widget using `onUploadStarted`: +`UploadButton` shows `CircularProgressIndicator` under `MaterialApp`, and `CupertinoActivityIndicator` under `CupertinoApp` while the upload is in progress. For large uploads, you might want to show upload progress, so you could replace the button with a [`TaskProgressIndicator`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/docs/firebase-ui-storage/task-progress-indicator.md) in a stateful widget using `onUploadStarted`: ```dart class MyUploadWidget extends StatelessWidget { diff --git a/docs/release.md b/docs/release.md deleted file mode 100644 index f59c6331..00000000 --- a/docs/release.md +++ /dev/null @@ -1,14 +0,0 @@ -# How to cut a new release of Firebase UI - -1. Switch to `main` branch locally. -2. Run `git pull origin main`. -3. Run `git pull --tags` to make sure all tags are fetched. -4. Create new branch with the signature "release/[year]-[month]-[day]". -5. Run `melos version --no-git-tag-version` to automatically version packages and update Changelogs. -6. Run `melos publish` to dry run and confirm all packages are publishable. -7. After successful dry run, commit all changes with the signature "chore(release): prepare for release". -8. Run `git push origin [RELEASE BRANCH NAME]` & open pull request for review on GitHub. -9. After successful review and merge of the pull request, switch to `main` branch locally, & run `git pull origin main`. -10. Run `melos publish --no-dry-run --git-tag-version` to now publish to Pub.dev. -11. Run `git push --tags` to push tags to repository. -12. Ping @kevinthecheung to get the changelog in Firebase releases. diff --git a/packages/firebase_ui_auth/README.md b/packages/firebase_ui_auth/README.md index f1607d7f..b3eef168 100644 --- a/packages/firebase_ui_auth/README.md +++ b/packages/firebase_ui_auth/README.md @@ -84,19 +84,19 @@ fonts: ## Docs -Find relevant documentation [here](https://github.com/firebase/FirebaseUI-Flutter/tree/master/packages/firebase_ui_auth/doc) +Find relevant documentation [here](https://github.com/firebase/FirebaseUI-Flutter/tree/main/docs/firebase_ui_auth) -- [Getting started](https://github.com/firebase/FirebaseUI-Flutter/tree/master/packages/firebase_ui_auth/doc) +- [Getting started](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase_ui_auth/README.md) - Auth providers. - - [Email auth provider](https://github.com/firebase/FirebaseUI-Flutter/blob/master/packages/firebase_ui_auth/doc/providers/email.md) – sign in using email and password. - - [Email verification](https://github.com/firebase/FirebaseUI-Flutter/blob/master/packages/firebase_ui_auth/doc/providers/email-verification.md) - verify email. - - [Email link sign in](https://github.com/firebase/FirebaseUI-Flutter/blob/master/packages/firebase_ui_auth/doc/providers/email-link.md) - sign in using a link sent to email. - - [Phone auth provider](https://github.com/firebase/FirebaseUI-Flutter/blob/master/packages/firebase_ui_auth/doc/providers/phone.md) - sign in using phone number. - - [Universal email sign in](https://github.com/firebase/FirebaseUI-Flutter/blob/master/packages/firebase_ui_auth/doc/providers/universal-email-sign-in.md) - resolve connected providers based on email and sign in using one of those. - - [OAuth](https://github.com/firebase/FirebaseUI-Flutter/blob/master/packages/firebase_ui_auth/doc/providers/oauth.md) - sign in using Apple, Google, Facebook or Twitter. + - [Email auth provider](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase_ui_auth/providers/email.md) – sign in using email and password. + - [Email verification](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase_ui_auth/providers/email-verification.md) - verify email. + - [Email link sign in](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase_ui_auth/providers/email-link.md) - sign in using a link sent to email. + - [Phone auth provider](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase_ui_auth/providers/phone.md) - sign in using phone number. + - [Universal email sign in](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase_ui_auth/providers/universal-email-sign-in.md) - resolve connected providers based on email and sign in using one of those. + - [OAuth](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase_ui_auth/providers/oauth.md) - sign in using Apple, Google, Facebook or Twitter. -## Roadmap / Features +## Issues and feedback - For issues, please create a new [issue on the repository](https://github.com/firebase/FirebaseUI-Flutter/issues). -- For feature requests, & questions, please participate on the [discussion](https://github.com/firebase/FirebaseUI-Flutter/discussions/6978) thread. +- For feature requests, & questions, please use [discussion](https://github.com/firebase/FirebaseUI-Flutter/discussions). - To contribute a change to this plugin, please review our [contribution guide](https://github.com/firebase/FirebaseUI-Flutter/blob/master/CONTRIBUTING.md) and open a [pull request](https://github.com/firebase/FirebaseUI-Flutter/pulls). diff --git a/packages/firebase_ui_database/README.md b/packages/firebase_ui_database/README.md index 41bf8d07..21c60a2e 100644 --- a/packages/firebase_ui_database/README.md +++ b/packages/firebase_ui_database/README.md @@ -1,170 +1,13 @@ # Firebase UI for Realtime Database -Firebase UI enables you to easily integrate your application UI with your Realtime database. +## Getting Started -## Installation +To get started with Firebase UI for Realtime Database, please [see the documentation](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase-ui-database.md). -```sh -flutter pub add firebase_database -flutter pub add firebase_ui_database -``` +## Issues and feedback -## Usage +Please file Firebase UI specific issues, bugs, or feature requests in our [issue tracker](https://github.com/firebase/FirebaseUI-Flutter/issues). -Import the Firebase UI for Realtime Database package. +## Contributing -```dart -import 'package:firebase_ui_database/firebase_ui_database.dart'; -``` - -### Infinite scrolling - -Infinite scrolling is the concept of continuously loading more data from a database -as the user scrolls through your application. This is useful when you have a large -datasets, as it enables the application to render faster as well as reducing network -overhead for data the user might never see. - -Firebase UI for Realtime Database provides a convenient way to implement infinite scrolling -using the Realtime Database database with the `FirebaseDatabaseListView` widget. - -At a minimum, the widget accepts a Realtime Database query and an item builder. As the user scrolls -down (or across) your list, more data will be automatically fetched from the database (whilst -respecting query conditions such as ordering). - -To get started, create a query and provide an item builder. For this example, we'll display -a list of users from the `users` collection: - -```dart -final usersQuery = FirebaseDatabase.instance.ref('users').orderByChild('name'); - -FirebaseDatabaseListView( - query: usersQuery, - itemBuilder: (context, snapshot) { - Map user = snapshot.value as Map; - - return Text('User name is ${user['name']}'); - }, -); -``` - -The `FirebaseDatabaseListView` widget is built on-top of Flutter's own [`ListView`](https://api.flutter.dev/flutter/widgets/ListView-class.html) -widget, and accepts the same parameters which we can optionally provide. For example, to change the scroll-direction to horizontal: - -```dart -FirebaseDatabaseListView( - scrollDirection: Axis.horizontal, - // ... -); -``` - -### Controlling page size - -By default, the widget will fetch 10 items from the collection at a time. This can be changed by providing a `pageSize` parameter: - -```dart -FirebaseDatabaseListView( - pageSize: 20, - // ... -); -``` - -In general, it is good practice to keep this value as small as possible to reduce network overhead. If the height (or width) -of an individual item is large, it is recommended to lower the page size. - -### Loading and error handling - -By default, the widget will display a loading indicator while data is being fetched from the database, and ignore any errors which might be thrown -(such as permission denied). You can override this behavior by providing a `loadingBuilder` and `errorBuilder` parameters to the widget: - -```dart -FirebaseDatabaseListView( - loadingBuilder: (context) => MyCustomLoadingIndicator(), - errorBuilder: (context, error, stackTrace) => MyCustomError(error, stackTrace), - // ... -); -``` - -### Advanced configuration - -In many cases, the `FirebaseDatabaseListView` widget is enough to render simple lists of collection data. -However, you may have specific requirements which require more control over the widget's behavior -(such as using a [`GridView`](https://api.flutter.dev/flutter/widgets/GridView-class.html)). - -The `FirebaseDatabaseQueryBuilder` provides the building blocks for advanced configuration at the expense of -requiring more boilerplate code. The widget does not provide any underlying list implementation, instead -you are expected to provide this yourself. - -Much like the `FirebaseDatabaseListView` widget, provide a query and builder: - -```dart -final usersQuery = FirebaseDatabase.instance.ref('users').orderByChild('name'); - -FirebaseDatabaseQueryBuilder( - query: usersQuery, - builder: (context, snapshot, _) { - // ... TODO! - }, -); -``` - -The main difference to note here is that the `builder` property returns a `FirebaseQueryBuilderSnapshot`, rather -than an individual document. The builder returns the current state of the entire query, such as whether -data is loading, an error has occurred and the documents. - -This requires us to implement our own list based implementation. Firstly, let's handle the loading and error -states: - -```dart -FirebaseDatabaseQueryBuilder( - query: usersQuery, - builder: (context, snapshot, _) { - if (snapshot.isFetching) { - return const CircularProgressIndicator(); - } - - if (snapshot.hasError) { - return Text('Something went wrong! ${snapshot.error}'); - } - - // ... - }, -); -``` - -Next, we now need to return a list-view based implementation for our application to display the data. For example, -to display a grid of users, we can use the [`GridView`](https://api.flutter.dev/flutter/widgets/GridView-class.html) widget: - -```dart -FirebaseDatabaseQueryBuilder( - query: usersQuery, - builder: (context, snapshot, _) { - // ... - - return GridView.builder( - itemCount: snapshot.docs.length, - itemBuilder: (context, index) { - // if we reached the end of the currently obtained items, we try to - // obtain more items - if (snapshot.hasMore && index + 1 == snapshot.docs.length) { - // Tell FirebaseDatabaseQueryBuilder to try to obtain more items. - // It is safe to call this function from within the build method. - snapshot.fetchMore(); - } - - final user = snapshot.docs[index].value as Map; - - return Container( - padding: const EdgeInsets.all(8), - color: Colors.teal[100], - child: const Text("User name is ${user['name']}"), - ); - }, - ); - }, -); -``` - -With more power comes more responsibility: - -1. Within the `itemBuilder` of our `GridView`, we have to manually ensure that we call the `fetchMore()` method on the snapshot when more data is required. -1. The `FirebaseDatabaseQueryBuilder` does not provide a list-view based handler, instead you must provide your own implementation. +To contribute a change to this plugin, please review our [contributing guide](https://github.com/firebase/FirebaseUI-Flutter/blob/main/CONTRIBUTING.md). diff --git a/packages/firebase_ui_firestore/README.md b/packages/firebase_ui_firestore/README.md index 3b716d46..03242fe4 100644 --- a/packages/firebase_ui_firestore/README.md +++ b/packages/firebase_ui_firestore/README.md @@ -1,217 +1,13 @@ # Firebase UI for Firestore -Firebase UI for Firestore enables you to easily integrate your application UI with your Cloud -Firestore database. +## Getting Started -## Installation +To get started with Firebase UI for Firestore, please [see the documentation](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase-ui-firestore.md). -```sh -flutter pub add cloud_firestore -flutter pub add firebase_ui_firestore -``` +## Issues and feedback -## Usage +Please file Firebase UI specific issues, bugs, or feature requests in our [issue tracker](https://github.com/firebase/FirebaseUI-Flutter/issues). -Import the Firebase UI for Firestore package: +## Contributing -```dart -import 'package:firebase_ui_firestore/firebase_ui_firestore.dart'; -``` - -### Infinite scrolling - -Infinite scrolling is the concept of continuously loading more data from a database -as the user scrolls through your application. This is useful when you have a large -datasets, as it enables the application to render faster as well as reduces network -overhead for data the user might never see. - -Firebase UI for Firestore provides a convenient way to implement infinite scrolling -using the Firestore database with the `FirestoreListView` widget. - -At a minimum the widget accepts a Firestore query and an item builder. As the user scrolls -down (or across) your list, more data will be automatically fetched from the database (whilst -respecting query conditions such as ordering). - -To get started, create a query and provide an item builder. For this example, we'll display -a list of users from the `users` collection: - -```dart -final usersQuery = FirebaseFirestore.instance.collection('users').orderBy('name'); - -FirestoreListView>( - query: usersQuery, - itemBuilder: (context, snapshot) { - Map user = snapshot.data(); - - return Text('User name is ${user['name']}'); - }, -); -``` - -The `FirestoreListView` widget is built on-top of Flutter's own [`ListView`](https://api.flutter.dev/flutter/widgets/ListView-class.html) -widget, and accepts the same parameters which we can optionally provide. For example, to change the scroll-direction to horizontal: - -```dart -FirestoreListView>( - scrollDirection: Axis.horizontal, - // ... -); -``` - -### Controlling page size - -By default, the widget will fetch 10 items from the collection at a time. This can be changed by providing a `pageSize` parameter: - -```dart -FirestoreListView>( - pageSize: 20, - // ... -); -``` - -In general, it is good practice to keep this value as small as possible to reduce network overhead. If the height (or width) -of an individual item is large, it is recommended to lower the page size. - -### Using typed responses - -The `cloud_firestore` plugin allows us to type the responses we receive from the database using the `withConverter` API. For more information, -see [the documentation](https://firebase.google.com/docs/firestore/query-data/get-data#custom_objects). - -The `FirestoreListView` works with this out of the box. Simply provide a converted query to the widget, for example: - -```dart -class User { - User({required this.name, required this.age}); - - User.fromJson(Map json) - : this( - name: json['name']! as String, - age: json['age']! as int, - ); - - final String name; - final int age; - - Map toJson() { - return { - 'name': name, - 'age': age, - }; - } -} - -final usersQuery = FirebaseFirestore.instance.collection('users') - .orderBy('name') - .withConverter( - fromFirestore: (snapshot, _) => User.fromJson(snapshot.data()!), - toFirestore: (user, _) => user.toJson(), - ); - -FirestoreListView( - query: usersQuery, - itemBuilder: (context, snapshot) { - // Data is now typed! - User user = snapshot.data(); - - return Text(user.name); - }, -); -``` - -### Loading and error handling - -By default, the widget will display a loading indicator while data is being fetched from the database, and ignore any errors which might be thrown -(such as permission denied). You can override this behavior by providing a `loadingBuilder` and `errorBuilder` parameters to the widget: - -```dart -FirestoreListView>( - loadingBuilder: (context) => MyCustomLoadingIndicator(), - errorBuilder: (context, error, stackTrace) => MyCustomError(error, stackTrace), - // ... -); -``` - -### Advanced configuration - -In many cases, the `FirestoreListView` widget is enough to render simple lists of collection data. -However, you may have specific requirements which require more control over the widget's behavior -(such as using a [`GridView`](https://api.flutter.dev/flutter/widgets/GridView-class.html)). - -The `FirestoreQueryBuilder` provides the building blocks for advanced configuration at the expense of -requiring more boilerplate code. The widget does not provide any underlying list implementation, instead -you are expected to provide this yourself. - -Much like the `FirestoreListView` widget, provide a query and builder: - -```dart -final usersQuery = FirebaseFirestore.instance.collection('users').orderBy('name'); - -FirestoreQueryBuilder>( - query: usersQuery, - builder: (context, snapshot, _) { - // ... TODO! - }, -); -``` - -The main difference to note here is that the `builder` property returns a `QueryBuilderSnapshot`, rather -than an individual document. The builder returns the current state of the entire query, such as whether -data is loading, an error has occurred and the documents. - -This requires us to implement our own list based implementation. Firstly, let's handle the loading and error -states: - -```dart -FirestoreQueryBuilder>( - query: usersQuery, - builder: (context, snapshot, _) { - if (snapshot.isFetching) { - return const CircularProgressIndicator(); - } - - if (snapshot.hasError) { - return Text('Something went wrong! ${snapshot.error}'); - } - - // ... - }, -); -``` - -Next, we now need to return a list-view based implementation for our application to display the data. For example, -to display a grid of users, we can use the [`GridView`](https://api.flutter.dev/flutter/widgets/GridView-class.html) widget: - -```dart -FirestoreQueryBuilder>( - query: usersQuery, - builder: (context, snapshot, _) { - // ... - - return GridView.builder( - itemCount: snapshot.docs.length, - itemBuilder: (context, index) { - // if we reached the end of the currently obtained items, we try to - // obtain more items - if (snapshot.hasMore && index + 1 == snapshot.docs.length) { - // Tell FirestoreQueryBuilder to try to obtain more items. - // It is safe to call this function from within the build method. - snapshot.fetchMore(); - } - - final user = snapshot.docs[index].data(); - - return Container( - padding: const EdgeInsets.all(8), - color: Colors.teal[100], - child: const Text("User name is ${user['name']}"), - ); - }, - ); - }, -); -``` - -With more power comes more responsibility: - -1. Within the `itemBuilder` of our `GridView`, we have to manually ensure that we call the `fetchMore()` method on the snapshot when more data is required. -1. The `FirestoreQueryBuilder` does not provide a list-view based handler, instead you must provide your own implementation. +To contribute a change to this plugin, please review our [contributing guide](https://github.com/firebase/FirebaseUI-Flutter/blob/main/CONTRIBUTING.md). diff --git a/packages/firebase_ui_localizations/README.md b/packages/firebase_ui_localizations/README.md index fdfe9392..f3000535 100644 --- a/packages/firebase_ui_localizations/README.md +++ b/packages/firebase_ui_localizations/README.md @@ -1,67 +1,17 @@ -# Localization +# Firebase UI Localizations -Firebase UI for Flutter supports localization, so every single label can be customized. +## Getting Started -## Installation +To get started with Firebase UI Localizations, please [see the documentation](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase-ui-localizations.md). -```yaml -dependencies: - flutter_localizations: - sdk: flutter - firebase_ui_localizations: ^1.2.0 -``` - -## Usage - -If your app supports only a single language, and you want to override labels – you will need to provide a custom class that implements [`DefaultLocalizations`](https://pub.dev/documentation/firebase_ui_localizations/latest/DefaultLocalizations-class.html), -for example: - -```dart -import 'package:flutter_localizations/flutter_localizations.dart'; -import 'package:firebase_ui_localizations/firebase_ui_localizations.dart'; - -class LabelOverrides extends DefaultLocalizations { - const LabelOverrides(); - - @override - String get emailInputLabel => 'Enter your email'; - - @override - String get passwordInputLabel => 'Enter your password'; -} -``` +## Issues and feedback -Once created, pass the instance of `LabelOverrides` to the `localizationsDelegates` list in your `MaterialApp`/`CupertinoApp`: - -```dart -class MyApp extends StatelessWidget { - @override - Widget build(BuildContext context) { - return MaterialApp( - localizationsDelegates: [ - // Creates an instance of FirebaseUILocalizationDelegate with overridden labels - FirebaseUILocalizations.withDefaultOverrides(const LabelOverrides()), - - // Delegates below take care of built-in flutter widgets - GlobalMaterialLocalizations.delegate, - GlobalWidgetsLocalizations.delegate, - - // This delegate is required to provide the labels that are not overridden by LabelOverrides - FirebaseUILocalizations.delegate, - ], - // ... - ); - } -} -``` - -If you need to support multiple languages – follow the [official Flutter localization guide](https://docs.flutter.dev/development/accessibility-and-localization/internationalization#an-alternative-class-for-the-apps-localized-resources) -and make sure that your custom delegate extends `LocalizationsDelegate`. - -> Note: check out [API reference](https://pub.dev/documentation/firebase_ui_localizations/latest/FlutterFireUILocalizationLabels-class.html) to learn what labels are used by specific widgets +Please file Firebase UI specific issues, bugs, or feature requests in our [issue tracker](https://github.com/firebase/FirebaseUI-Flutter/issues). ## Contributing +To contribute a change to this plugin, please review our [contributing guide](https://github.com/firebase/FirebaseUI-Flutter/blob/main/CONTRIBUTING.md). + ### Adding a new language If you want to add a new language, make sure to add a relevant `.arb` file into `lib/i10n`. diff --git a/packages/firebase_ui_oauth/README.md b/packages/firebase_ui_oauth/README.md index 702aec2c..878d12c0 100644 --- a/packages/firebase_ui_oauth/README.md +++ b/packages/firebase_ui_oauth/README.md @@ -11,8 +11,4 @@ Base package for Firebase UI OAuth providers: For issues, please create a new [issue on the repository](https://github.com/firebase/FirebaseUI-Flutter/issues). -For feature requests, & questions, please participate on the [discussion](https://github.com/firebase/FirebaseUI-Flutter/discussions/6978) thread. - To contribute a change to this plugin, please review our [contribution guide](https://github.com/firebase/FirebaseUI-Flutter/blob/master/CONTRIBUTING.md) and open a [pull request](https://github.com/firebase/FirebaseUI-Flutter/pulls). - -Please contribute to the [discussion](https://github.com/firebase/FirebaseUI-Flutter/discussions/6978) with feedback. diff --git a/packages/firebase_ui_oauth_apple/README.md b/packages/firebase_ui_oauth_apple/README.md index 862a8260..1eb8705c 100644 --- a/packages/firebase_ui_oauth_apple/README.md +++ b/packages/firebase_ui_oauth_apple/README.md @@ -1,99 +1,13 @@ # Firebase UI OAuth Apple -[![pub package](https://img.shields.io/pub/v/firebase_ui_oauth_apple.svg)](https://pub.dev/packages/firebase_ui_oauth_apple) +## Getting Started -Apple Sign In for [Firebase UI Auth](https://pub.dev/packages/firebase_ui_auth) +To get started with Firebase UI OAuth Apple, please [see the documentation](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase-ui-auth/providers/oauth.md#sign-in-with-apple). -## Installation +## Issues and feedback -Add dependency +Please file Firebase UI specific issues, bugs, or feature requests in our [issue tracker](https://github.com/firebase/FirebaseUI-Flutter/issues). -```sh -flutter pub add firebase_ui_auth -flutter pub add firebase_ui_oauth_apple +## Contributing -flutter pub global activate flutterfire_cli -flutterfire configure -``` - -Enable Apple provider on [firebase console](https://console.firebase.google.com/). - -## Usage - -```dart -import 'package:firebase_core/firebase_core.dart'; -import 'package:firebase_ui_auth/firebase_ui_auth.dart'; -import 'package:firebase_ui_oauth_apple/firebase_ui_oauth_apple.dart'; - -void main() { - WidgetsFlutterBinding.ensureInitialized(); - await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); - - FirebaseUIAuth.configureProviders([ - AppleProvider(), - ]); - - runApp(MyApp()); -} - -class MyApp extends StatelessWidget { - const MyApp({super.key}) ; - - @override - Widget build(BuildContext context) { - return MaterialApp( - home: SignInScreen( - actions: [ - AuthStateChangeAction((context, state) { - // redirect to other screen - }) - ], - ), - ); - } -} -``` - -Alternatively you could use the `OAuthProviderButton` - -```dart -class MyScreen extends StatelessWidget { - @override - Widget build(BuildContext context) { - return AuthStateListener( - listener: (oldState, newState, controller) { - if (newState is SignedIn) { - // navigate to other screen. - } - }, - child: OAuthProviderButton( - provider: AppleProvider(), - ), - ); - } -} -``` - -Also there is a standalone version of the `AppleSignInButton` - -```dart -class MyScreen extends StatelessWidget { - @override - Widget build(BuildContext context) { - return AppleSignInButton( - loadingIndicator: CircularProgressIndicator(), - onSignedIn: (UserCredential credential) { - // perform navigation. - } - ); - } -} -``` - -For issues, please create a new [issue on the repository](https://github.com/firebase/FirebaseUI-Flutter/issues). - -For feature requests, & questions, please participate on the [discussion](https://github.com/firebase/FirebaseUI-Flutter/discussions/6978) thread. - -To contribute a change to this plugin, please review our [contribution guide](https://github.com/firebase/FirebaseUI-Flutter/blob/master/CONTRIBUTING.md) and open a [pull request](https://github.com/firebase/FirebaseUI-Flutter/pulls). - -Please contribute to the [discussion](https://github.com/firebase/FirebaseUI-Flutter/discussions/6978) with feedback. +To contribute a change to this plugin, please review our [contributing guide](https://github.com/firebase/FirebaseUI-Flutter/blob/main/CONTRIBUTING.md). diff --git a/packages/firebase_ui_oauth_facebook/README.md b/packages/firebase_ui_oauth_facebook/README.md index 5e8f8488..35cb8211 100644 --- a/packages/firebase_ui_oauth_facebook/README.md +++ b/packages/firebase_ui_oauth_facebook/README.md @@ -1,100 +1,13 @@ # Firebase UI OAuth Facebook -[![pub package](https://img.shields.io/pub/v/firebase_ui_oauth_facebook.svg)](https://pub.dev/packages/firebase_ui_oauth_facebook) +## Getting Started -Facebook Sign In for [Firebase UI Auth](https://pub.dev/packages/firebase_ui_auth) +To get started with Firebase UI OAuth Facebook, please [see the documentation](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase-ui-auth/providers/oauth.md#flutter-facebook-auth). -## Installation +## Issues and feedback -Add dependencies +Please file Firebase UI specific issues, bugs, or feature requests in our [issue tracker](https://github.com/firebase/FirebaseUI-Flutter/issues). -```sh -flutter pub add firebase_ui_auth -flutter pub add firebase_ui_oauth_facebook +## Contributing -flutter pub global activate flutterfire_cli -flutterfire configure -``` - -Enable Facebook provider on [firebase console](https://console.firebase.google.com/). - -## Usage - -```dart -import 'package:firebase_core/firebase_core.dart'; -import 'package:firebase_ui_auth/firebase_ui_auth.dart'; -import 'package:firebase_ui_oauth_facebook/firebase_ui_oauth_facebook.dart'; - -void main() { - WidgetsFlutterBinding.ensureInitialized(); - await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); - - FirebaseUIAuth.configureProviders([ - FacebookProvider(clientId: 'clientId'), - ]); - - runApp(MyApp()); -} - -class MyApp extends StatelessWidget { - const MyApp({super.key}) ; - - @override - Widget build(BuildContext context) { - return MaterialApp( - home: SignInScreen( - actions: [ - AuthStateChangeAction((context, state) { - // redirect to other screen - }) - ], - ), - ); - } -} -``` - -Alternatively you could use the `OAuthProviderButton` - -```dart -class MyScreen extends StatelessWidget { - @override - Widget build(BuildContext context) { - return AuthStateListener( - listener: (oldState, newState, controller) { - if (newState is SignedIn) { - // navigate to other screen. - } - }, - child: OAuthProviderButton( - provider: FacebookProvider(clientId: 'clientId'), - ), - ); - } -} -``` - -Also there is a standalone version of the `FacebookSignInButton` - -```dart -class MyScreen extends StatelessWidget { - @override - Widget build(BuildContext context) { - return FacebookSignInButton( - clientId: 'clientId', - loadingIndicator: CircularProgressIndicator(), - onSignedIn: (UserCredential credential) { - // perform navigation. - } - ); - } -} -``` - -For issues, please create a new [issue on the repository](https://github.com/firebase/FirebaseUI-Flutter/issues). - -For feature requests, & questions, please participate on the [discussion](https://github.com/firebase/FirebaseUI-Flutter/discussions/6978) thread. - -To contribute a change to this plugin, please review our [contribution guide](https://github.com/firebase/FirebaseUI-Flutter/blob/master/CONTRIBUTING.md) and open a [pull request](https://github.com/firebase/FirebaseUI-Flutter/pulls). - -Please contribute to the [discussion](https://github.com/firebase/FirebaseUI-Flutter/discussions/6978) with feedback. +To contribute a change to this plugin, please review our [contributing guide](https://github.com/firebase/FirebaseUI-Flutter/blob/main/CONTRIBUTING.md). diff --git a/packages/firebase_ui_oauth_google/README.md b/packages/firebase_ui_oauth_google/README.md index abadfe9b..17dacc6f 100644 --- a/packages/firebase_ui_oauth_google/README.md +++ b/packages/firebase_ui_oauth_google/README.md @@ -1,100 +1,13 @@ # Firebase UI OAuth Google -[![pub package](https://img.shields.io/pub/v/firebase_ui_oauth_google.svg)](https://pub.dev/packages/firebase_ui_oauth_google) +## Getting Started -Google Sign In for [Firebase UI Auth](https://pub.dev/packages/firebase_ui_auth) +To get started with Firebase UI OAuth Google, please [see the documentation](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase-ui-auth/providers/oauth.md#google-sign-in). -## Installation +## Issues and feedback -Add dependencies +Please file Firebase UI specific issues, bugs, or feature requests in our [issue tracker](https://github.com/firebase/FirebaseUI-Flutter/issues). -```sh -flutter pub add firebase_ui_auth -flutter pub add firebase_ui_oauth_google +## Contributing -flutter pub global activate flutterfire_cli -flutterfire configure -``` - -Enable Google provider on [firebase console](https://console.firebase.google.com/). - -## Usage - -```dart -import 'package:firebase_core/firebase_core.dart'; -import 'package:firebase_ui_auth/firebase_ui_auth.dart'; -import 'package:firebase_ui_oauth_google/firebase_ui_oauth_google.dart'; - -void main() { - WidgetsFlutterBinding.ensureInitialized(); - await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); - - FirebaseUIAuth.configureProviders([ - GoogleProvider(clientId: 'clientId'), - ]); - - runApp(MyApp()); -} - -class MyApp extends StatelessWidget { - const MyApp({super.key}) ; - - @override - Widget build(BuildContext context) { - return MaterialApp( - home: SignInScreen( - actions: [ - AuthStateChangeAction((context, state) { - // redirect to other screen - }) - ], - ), - ); - } -} -``` - -Alternatively you could use the `OAuthProviderButton` - -```dart -class MyScreen extends StatelessWidget { - @override - Widget build(BuildContext context) { - return AuthStateListener( - listener: (oldState, newState, controller) { - if (newState is SignedIn) { - // navigate to other screen. - } - }, - child: OAuthProviderButton( - provider: GoogleProvider(clientId: 'clientId'), - ), - ); - } -} -``` - -Also there is a standalone version of the `GoogleSignInButton` - -```dart -class MyScreen extends StatelessWidget { - @override - Widget build(BuildContext context) { - return GoogleSignInButton( - clientId: 'clientId', - loadingIndicator: CircularProgressIndicator(), - onSignedIn: (UserCredential credential) { - // perform navigation. - } - ); - } -} -``` - -For issues, please create a new [issue on the repository](https://github.com/firebase/FirebaseUI-Flutter/issues). - -For feature requests, & questions, please participate on the [discussion](https://github.com/firebase/FirebaseUI-Flutter/discussions/6978) thread. - -To contribute a change to this plugin, please review our [contribution guide](https://github.com/firebase/FirebaseUI-Flutter/blob/master/CONTRIBUTING.md) and open a [pull request](https://github.com/firebase/FirebaseUI-Flutter/pulls). - -Please contribute to the [discussion](https://github.com/firebase/FirebaseUI-Flutter/discussions/6978) with feedback. +To contribute a change to this plugin, please review our [contributing guide](https://github.com/firebase/FirebaseUI-Flutter/blob/main/CONTRIBUTING.md). diff --git a/packages/firebase_ui_oauth_twitter/README.md b/packages/firebase_ui_oauth_twitter/README.md index 2cf8e6bf..e0802356 100644 --- a/packages/firebase_ui_oauth_twitter/README.md +++ b/packages/firebase_ui_oauth_twitter/README.md @@ -1,105 +1,13 @@ # Firebase UI OAuth Twitter -[![pub package](https://img.shields.io/pub/v/firebase_ui_oauth_twitter.svg)](https://pub.dev/packages/firebase_ui_oauth_twitter) +## Getting Started -Twitter Sign In for [Firebase UI Auth](https://pub.dev/packages/firebase_ui_auth) +To get started with Firebase UI OAuth Twitter, please [see the documentation](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase-ui-auth/providers/oauth.md#twitter-login). -## Installation +## Issues and feedback -Add dependencies +Please file Firebase UI specific issues, bugs, or feature requests in our [issue tracker](https://github.com/firebase/FirebaseUI-Flutter/issues). -```sh -flutter pub add firebase_ui_auth -flutter pub add firebase_ui_oauth_twitter +## Contributing -flutter pub global activate flutterfire_cli -flutterfire configure -``` - -Enable Twitter provider on [firebase console](https://console.firebase.twitter.com/). - -## Usage - -```dart -import 'package:firebase_core/firebase_core.dart'; -import 'package:firebase_ui_auth/firebase_ui_auth.dart'; -import 'package:firebase_ui_oauth_twitter/firebase_ui_oauth_twitter.dart'; - -void main() { - WidgetsFlutterBinding.ensureInitialized(); - await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform); - - FirebaseUIAuth.configureProviders([ - TwitterProvider(apiKey: 'apiKey', apiSecretKey: 'apiSecretKey'), - ]); - - runApp(MyApp()); -} - -class MyApp extends StatelessWidget { - const MyApp({super.key}) ; - - @override - Widget build(BuildContext context) { - return MaterialApp( - home: SignInScreen( - actions: [ - AuthStateChangeAction((context, state) { - // redirect to other screen - }) - ], - ), - ); - } -} -``` - -Alternatively you could use the `OAuthProviderButton` - -```dart -class MyScreen extends StatelessWidget { - @override - Widget build(BuildContext context) { - return AuthStateListener( - listener: (oldState, newState, controller) { - if (newState is SignedIn) { - // navigate to other screen. - } - }, - child: OAuthProviderButton( - provider: TwitterProvider(apiKey: 'apiKey'), - ), - ); - } -} -``` - -Also there is a standalone version of the `TwitterSignInButton` - -```dart -class MyScreen extends StatelessWidget { - @override - Widget build(BuildContext context) { - return TwitterSignInButton( - apiKey: 'apiKey', - apiSecretKey: 'apiSecretKey', - loadingIndicator: CircularProgressIndicator(), - onSignedIn: (UserCredential credential) { - // perform navigation. - } - ); - } -} -``` - -## API Secret Key notes - -Don't hardcode your API secret key into the source code, instead use `--dart-define TWITTER_API_SECRET_KEY=secret` and `apiSecretKey: const String.fromEnvironment('TWITTER_API_SECRET_KEY)`. - -For issues, please create a new [issue on the repository](https://github.com/firebase/FirebaseUI-Flutter/issues). - -For feature requests, & questions, please participate on the [discussion](https://github.com/firebase/FirebaseUI-Flutter/discussions/6978) thread. - -To contribute a change to this plugin, please review our [contribution guide](https://github.com/firebase/FirebaseUI-Flutter/blob/master/CONTRIBUTING.md) and open a [pull request](https://github.com/firebase/FirebaseUI-Flutter/pulls). - -Please contribute to the [discussion](https://github.com/firebase/FirebaseUI-Flutter/discussions/6978) with feedback. +To contribute a change to this plugin, please review our [contributing guide](https://github.com/firebase/FirebaseUI-Flutter/blob/main/CONTRIBUTING.md). diff --git a/packages/firebase_ui_storage/README.md b/packages/firebase_ui_storage/README.md index 0b826f68..b4f890ae 100644 --- a/packages/firebase_ui_storage/README.md +++ b/packages/firebase_ui_storage/README.md @@ -6,16 +6,16 @@ Firebase UI Storage is a set of Flutter widgets and utilities designed to help y ## Documentation -- [Getting started](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/getting-started.md) +- [Getting started](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase-ui-storage/getting-started.md) - Widgets - - [`UploadButton`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/upload-button.md) - - [`TaskProgressIndicator`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/task-progress-indicator.md) - - [`StorageImage`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/storage-image.md) - - [`StorageListView`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/list-view.md) - - [`StorageGridView`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/grid-view.md) + - [`UploadButton`](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase-ui-storage/upload-button.md) + - [`TaskProgressIndicator`](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase-ui-storage/task-progress-indicator.md) + - [`StorageImage`](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase-ui-storage/storage-image.md) + - [`StorageListView`](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase-ui-storage/list-view.md) + - [`StorageGridView`](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase-ui-storage/grid-view.md) -- [`PaginatedLoadingController`](https://github.com/firebase/FirebaseUI-Flutter/tree/main/packages/firebase_ui_storage/doc/paginated-loading-controller.md) +- [`PaginatedLoadingController`](https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/firebase-ui-storage/paginated-loading-controller.md) ## Issues @@ -26,5 +26,5 @@ Please file Firebase UI Storage specific issues, bugs, or feature requests in ou If you wish to contribute a change to any of the existing plugins in this repo, please review our [contribution guide] and open a [pull request]. [issue tracker]: https://github.com/firebase/FirebaseUI-Flutter/issues/new/choose -[contribution guide]: https://github.com/firebase/FirebaseUI-Flutter/blob/main/docs/contributing.md +[contribution guide]: https://github.com/firebase/FirebaseUI-Flutter/blob/main/CONTRIBUTING.md [pull request]: https://github.com/firebase/FirebaseUI-Flutter/pulls