395ae8c0bb
* add mock data, app state, model classes * Set up app without ChangeNotifier * refactor * add experiments to experimental/ * Add project-agnostic Firebase authentication code * add sign in button * add stub firebase API * add firestore * refactor code for google_sign_in * update pubspec.lock * switch to mocks for non-firebase version * Add firebase instructions to the README * fix README * sign in silently if the user is already signed in * add json_serializable * update README * ignore 'id' field on types * Implement FirebaseItemApi * Add build_runner instructions to README * remove experiments directory * add EditItemForm * move types.dart into api.dart * move mock and firebase configuration into the constructor * add main_mock entrypoint * add copyright checks to grinder script * fix fix-copyright task * run grind fix-copyright * add run and generate tasks * add run tasks to grind script * add fillWithMockData() fix delete() in mock API * add edit / new form dialogs * Add charts that display entries from Firebase * Add Entries list without editing * refactor home page * format * Add entries page functionality * Show current day in charts * cleanup: pubspec.lock, remove type annotation * Remove _selectedItem from Home page Add ItemsDropdown Use ItemsDropdown in NewEntryDialog / NewEntryForm * rename item-category * don't wait to show snackbar on delete * fix circular progress indicator * Move dialogs into dialogs.dart * run grind fix-copyright * remove unused import * Refactor entry total calculation, add chart_utils library * fix bug in chart_utils.dart * convert CategoryChart to a stateless widget * use a const for number of days in chart * code review updates - rename stream -> subscribe - timeStamp -> timestamp - remove latest() from API - use FutureBuilder and StreamBuilder instead of stateful widget - rename variables in mock_service_test.dart * use a single collection reference in firebase API * remove reference to stream in mock API * Use a new type, _EntriesEvent to improve filtering in mock API * add analysis_options.yaml and fix (most) issues * fix avoid_types_on_closure_parameters lint warnings * use spread operator in dashboard.dart * handle case where selected item in the category dropdown goes away * use StreamBuilder + FutureBuilder on Entries page * rename method * use fake firebase configuration * update pubspec.lock * update README * Change categories_dropdown to FutureBuilder + StreamBuilder * Update minSdkVersion in build.gradle SDK version 16 was failing: "The number of method references in a .dex file cannot exceed 64K." * update README * Use a collection reference in FirebaseEntryApi Already added to FirebaseCategoryApi * Invoke onSelected in CategoriesDropdown when necessary Also, avoid calling onSelected during a build. * fix misnamed var * remove unused import * Use relative imports * Use extension methods for DateTime utilities * remove forms.dart * Make Firebase instructions specific for this sample * add copyright headers * fix grammar * dartfmt * avoid setState() during build phase in CategoryDropdown * add empty test to material_theme_builder
3.2 KiB
web_dashboard
In progress
A dashboard app that displays daily entries.
- How to use an AdaptiveScaffold adaptive layout for large, medium, and small screens.
- How to use Firebase Cloud Firestore database with Google Sign-In.
- How to use charts to display data.
- (in progress) How to set up routing for a web app
This app is web-first, and isn't guaranteed to run on iOS, Android or desktop platforms.
Running
Normal mode (DDC):
flutter run -d chrome
Skia / CanvasKit mode:
flutter run -d chrome --release --dart-define=FLUTTER_WEB_USE_SKIA=true
Running JSON code generator
flutter pub run grinder generate
Add Firebase
Step 1: Create a new Firebase project
Go to console.firebase.google.com and create a new Firebase project.
Step 2: Enable Google Sign In for your project
In the Firebase console, go to "Authentication" and enable Google sign in. Click on "Web SDK Configuration" and copy down your Web client ID.
Step 3: Add Client ID to index.html
Uncomment this line in index.html and replace <YOUR WEB CLIENT ID> with the
client ID from Step 2:
<!-- Uncomment and add Firebase client ID here: -->
<!-- <meta name="google-signin-client_id" content="<YOUR WEB CLIENT ID>"> -->
Step 4: Create a web app
In the Firebase console, under "Project overview", click "Add app", select Web,
and replace the contents of web/firebase_init.js.
// web/firebase_init.js
var firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
Step 4: Create Cloud Firestore
Create a new Cloud Firestore database and add the following rules to disallow users from reading/writing other users' data:
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// Make sure the uid of the requesting user matches name of the user
// document. The wildcard expression {userId} makes the userId variable
// available in rules.
match /users/{userId}/{document=**} {
allow read, update, delete: if request.auth.uid == userId;
allow create: if request.auth.uid != null;
}
}
}
Step 5: Run the app
Run the app on port 5000:
flutter run -d chrome --web-port=5000
If you see CORS errors in your browser's console, go to the Services
section in the Google Cloud console, go to Credentials, and
verify that localhost:5000 is whitelisted.
(optional) Step 7: Set up iOS and Android
If you would like to run the app on iOS or Android, make sure you've installed the appropriate configuration files described at firebase.google.com/docs/flutter/setup from step 1, and follow the instructions detailed in the google_sign_in README