Home
Softono
b

bizz84

Professional software vendor delivering innovative solutions on the Softono platform. Specialized in both open-source and proprietary software development.

Visit Website
Total Products
3

Software by bizz84

starter_architecture_flutter_firebase
Open Source

starter_architecture_flutter_firebase

# Time Tracking app with Flutter & Firebase A time tracking application built with Flutter & Firebase: ![](/.github/images/time-tracker-screenshots.png) This is intended as a **reference app** based on my [Riverpod Architecture](https://codewithandrea.com/articles/flutter-app-architecture-riverpod-introduction/). > **Note**: this project used to be called "Started Architecture for Flutter & Firebase" (based on this [old article](https://codewithandrea.com/videos/starter-architecture-flutter-firebase/)). As of January 2023, it follows my updated [Riverpod Architecture](https://codewithandrea.com/articles/flutter-app-architecture-riverpod-introduction/), using the latest packages. ## Flutter web preview A Flutter web preview of the app is available here: - [Time Tracker | Flutter web demo](https://starter-architecture-flutter.web.app) ## Features - **Simple onboarding page** - **Full authentication flow** (using email & password) - **Jobs**: users can view, create, edit, and delete their own private jobs (each job has a name and hourly rate) - **Entries**: for each job, user can view, create, edit, and delete the corresponding entries (an entry is a task with a start and end time, with an optional comment) - **A report page** that shows a daily breakdown of all jobs, hours worked and pay, along with the totals. All the data is persisted with Firestore and is kept in sync across multiple devices. ## Roadmap - [ ] Add missing tests - [x] Stateful Nested Navigation (available since GoRouter 7.1) - [ ] Use controllers / notifiers consistently across the app (some code still needs to be updated) - [ ] Add localization - [ ] Use the new Firebase UI packages where useful - [ ] Responsive UI > This is a tentative roadmap. There is no ETA for any of the points above. This is a low priority project and I don't have much time to maintain it. ## Relevant Articles The app is based on my Flutter Riverpod architecture, which is explained in detail here: - [Flutter App Architecture with Riverpod: An Introduction](https://codewithandrea.com/articles/flutter-app-architecture-riverpod-introduction/) - [Flutter Project Structure: Feature-first or Layer-first?](https://codewithandrea.com/articles/flutter-project-structure/) - [Flutter App Architecture: The Repository Pattern](https://codewithandrea.com/articles/flutter-repository-pattern/) - [How to Build a Robust Flutter App Initialization Flow with Riverpod](https://codewithandrea.com/articles/robust-app-initialization-riverpod/) More more info on Riverpod, read this: - [Flutter Riverpod 2.0: The Ultimate Guide](https://codewithandrea.com/articles/flutter-state-management-riverpod/) ## Packages in use These are the main packages used in the app: - [Flutter Riverpod](https://pub.dev/packages/flutter_riverpod) for data caching, dependency injection, and more - [Riverpod Generator](https://pub.dev/packages/riverpod_generator) and [Riverpod Lint](https://pub.dev/packages/riverpod_lint) for the latest Riverpod APIs - [GoRouter](https://pub.dev/packages/go_router) for navigation - [Firebase Auth](https://pub.dev/packages/firebase_auth) and [Firebase UI Auth](https://pub.dev/packages/firebase_ui_auth) for authentication - [Cloud Firestore](https://pub.dev/packages/cloud_firestore) as a realtime database - [Firebase UI for Firestore](https://pub.dev/packages/firebase_ui_firestore) for the `FirestoreListView` widget with pagination support - [RxDart](https://pub.dev/packages/rxdart) for combining multiple Firestore collections as needed - [Intl](https://pub.dev/packages/intl) for currency, date, time formatting - [Mocktail](https://pub.dev/packages/mocktail) for testing - [Equatable](https://pub.dev/packages/equatable) to reduce boilerplate code in model classes See the [pubspec.yaml](pubspec.yaml) file for the complete list. ## Running the project with Firebase To use this project with Firebase, follow these steps: - Create a new project with the Firebase console - Enable Firebase Authentication, along with the Email/Password Authentication Sign-in provider in the Firebase Console (Authentication > Sign-in method > Email/Password > Edit > Enable > Save) - Enable Cloud Firestore Then, follow one of the two approaches below. 👇 ### 1. Using the CLI Make sure you have the Firebase CLI and [FlutterFire CLI](https://pub.dev/packages/flutterfire_cli) installed. Then run this on the terminal from the root of this project: - Run `firebase login` so you have access to the Firebase project you have created - Run `flutterfire configure` and follow all the steps For more info, follow this guide: - [How to add Firebase to a Flutter app with FlutterFire CLI](https://codewithandrea.com/articles/flutter-firebase-flutterfire-cli/) ### 2. Manual way (not recommended) If you don't want to use FlutterFire CLI, follow these steps instead: - Register separate iOS, Android, and web apps in the Firebase project settings. - On Android, use `com.example.starter_architecture_flutter_firebase` as the package name. - then, [download and copy](https://firebase.google.com/docs/flutter/setup#configure_an_android_app) `google-services.json` into `android/app`. - On iOS, use `com.example.starterArchitectureFlutterFirebase` as the bundle ID. - then, [download and copy](https://firebase.google.com/docs/flutter/setup#configure_an_ios_app) `GoogleService-Info.plist` into `iOS/Runner`, and add it to the Runner target in Xcode. That's it. Have fun! ## [License: MIT](LICENSE.md)

Mobile Development Time Tracking
1.8K Github Stars
layout-demo-flutter
Open Source

layout-demo-flutter

## Super Useful Flutter Layouts - Right in Your Pocket. 😉 **Update**: Flutter web app preview here: [https://flutter-layouts-demo.web.app/](https://flutter-layouts-demo.web.app/) YouTube video walkthroughs with explanations here: [![Flutter Layouts: Row, Column, Stack, Expanded, Padding](screenshots/video-poster.png)](https://www.youtube.com/watch?v=RJEnTRBxaSg) [![Flutter Layouts: PageView, ListView, GridView, Slivers, Hero Imaegs](screenshots/video-poster2.jpg)](https://www.youtube.com/watch?v=-zJ6CnOVndE) This app shows you how to use the most common layouts in Flutter. You can run this project on your simulator or device. Oh, and the app itself is built with - guess what - a combination of Flutter layouts. So Meta! 😎 ### For more articles and video tutorials, check out [Code with Andrea](https://codewithandrea.com/). # Table of Contents - [Table of Contents](#table-of-contents) - [Row / Column](#row--column) - [Baseline](#baseline) - [Stack](#stack) - [Expanded](#expanded) - [Padding](#padding) - [PageView](#pageview) - [ListView](#listview) - [Slivers](#slivers) - [Hero Image](#hero-image) - [Nested Lists](#nested-lists) - [For more articles and video tutorials, check out Code With Andrea.](#for-more-articles-and-video-tutorials-check-out-code-with-andrea) - [License: MIT](#license-mit) - [Attribution](#attribution) ## Row / Column - [Row](https://docs.flutter.io/flutter/widgets/Row-class.html) - [Column](https://docs.flutter.io/flutter/widgets/Column-class.html) - [MainAxisAlignment](https://docs.flutter.io/flutter/rendering/MainAxisAlignment-class.html) - [MainAxisSize](https://docs.flutter.io/flutter/rendering/MainAxisSize-class.html) - [CrossAxisAlignment](https://docs.flutter.io/flutter/rendering/CrossAxisAlignment-class.html) <img src="https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/row-column.png" width="320"> ## Baseline - [Baseline](https://docs.flutter.io/flutter/widgets/Baseline-class.html) - [CrossAxisAlignment](https://docs.flutter.io/flutter/rendering/CrossAxisAlignment-class.html) <img src="https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/baseline.png" width="320"> ## Stack - [Stack](https://docs.flutter.io/flutter/widgets/Stack-class.html) - [AlignmentDirectional](https://docs.flutter.io/flutter/painting/AlignmentDirectional-class.html) - [Positioned](https://docs.flutter.io/flutter/widgets/Positioned-class.html) <img src="https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/stack.png" width="320"> ## Expanded Wikipedia: [Golden Spiral](https://en.wikipedia.org/wiki/Golden_spiral) (also: Fibonacci, Golden Ratio). - [Expanded](https://docs.flutter.io/flutter/widgets/Expanded-class.html) - [LayoutBuilder](https://docs.flutter.io/flutter/widgets/LayoutBuilder-class.html) <img src="https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/expanded.png" width="320"> ## Padding - [Expanded](https://docs.flutter.io/flutter/widgets/Expanded-class.html) - [SizedBox](https://docs.flutter.io/flutter/widgets/SizedBox-class.html) <img src="https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/padding.png" width="320"> ## PageView - [PageView](https://docs.flutter.io/flutter/widgets/PageView-class.html) <img src="https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/page-view.png" width="320"> ## ListView - [ListView](https://docs.flutter.io/flutter/widgets/ListView-class.html) - [ListTile](https://docs.flutter.io/flutter/material/ListTile-class.html) <img src="https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/list.png" width="320"> ## Slivers - [CustomScrollView](https://docs.flutter.io/flutter/widgets/CustomScrollView-class.html) - [SliverAppBar](https://docs.flutter.io/flutter/material/SliverAppBar-class.html) - [SliverGrid](https://docs.flutter.io/flutter/widgets/SliverGrid-class.html) - [SliverFixedExtentList](https://docs.flutter.io/flutter/widgets/SliverFixedExtentList-class.html) <img src="https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/slivers.png" width="320"> ## Hero Image - [Stack](https://docs.flutter.io/flutter/widgets/Stack-class.html) - [Positioned](https://docs.flutter.io/flutter/widgets/Positioned-class.html) - [SafeArea](https://docs.flutter.io/flutter/widgets/SafeArea-class.html) - [SliverPersistentHeader](https://docs.flutter.io/flutter/widgets/SliverPersistentHeader-class.html) - [SliverGrid](https://docs.flutter.io/flutter/widgets/SliverGrid-class.html) <img src="https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/hero.jpg" width="320"> ## Nested Lists - [ListView](https://docs.flutter.io/flutter/widgets/ListView-class.html) <img src="https://github.com/bizz84/layout-demo-flutter/raw/master/screenshots/nested.png" width="320"> ### For more articles and video tutorials, check out [Code With Andrea](https://codewithandrea.com/). ### [License: MIT](LICENSE.md) ### Attribution Youtube Play Icon by [Youtube Clipart](http://clipartmag.com/youtube-clipart).

CSS Frameworks & UI Kits Mobile Development
1.4K Github Stars
complete-flutter-course
Open Source

complete-flutter-course

# Flutter Foundations Course - eCommerce App This is the official repo for this course: - [Flutter Foundations](https://codewithandrea.com/courses/flutter-foundations/) This will include a full-stack eCommerce app using Flutter & Firebase: ![eCommerce App Preview](/.github/images/ecommerce-app-preview.png) A Flutter web preview of the app can be found here: - [Flutter Web Demo](https://ecommerce-app-scratch.web.app/) ## Project Setup To clone the repo for the first time and open it in VSCode, run this: ``` git clone https://github.com/bizz84/complete-flutter-course.git cd complete-flutter-course code . ``` This will checkout the `main` branch which contains the **latest code**. But at various points in the course, I'll ask you to checkout a **specific branch name**, so you can follow along with the right code, at the right time. And to prevent any conflicts, you may need to reset your local changes: ``` git reset --hard HEAD git checkout <branch-name> ``` ## Troubleshooting If the course project doesn't compile or run for you, there are a number of things to look out for. I'm keeping a list of all the FAQs here: - [List of Common Problems and Solutions](https://pro.codewithandrea.com/flutter-foundations/a1-common-problems/a-intro) ## Flutter Foundations - Course Syllabus ### 1. Intro & Project Overview 1. What you will learn in this course 2. Section overview 3. VSCode Shortcuts, Extensions & Settings for Flutter development 4. Join the Slack Channel 5. Course Project on GitHub 6. Download the Starter Project & `pubspec.yaml` overview 7. eCommerce app overview 8. Code walkthrough: project structure 9. Exploring the codebase with the Widget Inspector (DevTools) 10. UI Design Principles: Composition & Reusable Widget Classes 11. Useful Widgets for Responsive Design 12. App Localization ### 2. Navigation with GoRouter 1. Section Intro 2. Limitations of Navigator 1.0 3. GoRouter installation & initial setup with `MaterialApp.router` 4. Routes, sub-routes and navigation 5. `GoRouterHelper` Extension and `pageBuilder` 6. Adding some additional routes 7. Routing by **path** vs routing by **name** 8. Routing with parameters 9. GoRouter error handling 10. Navigating with **go** vs **push** 11. Adding the remaining routes 12. How to pop a route with GoRouter 13. Nested Navigation 14. Bug fix & wrap up ### 3. Flutter App Architecture 1. Section Intro 2. Popular App Architectures: MVC, MVP, MVVM, Clean Architecture, Bloc 3. Riverpod App Architecture with the Controller-Service-Repository Pattern 4. Project Structure: Feature-first vs Layer-first 5. The Repository Pattern and the Data Layer 6. Implementing the "fake" products repository as a singleton 7. Working with Future and Stream-based APIs 8. Wrap Up ### 4. State Management with Riverpod - Part 1 (Product Listings) 1. Section Intro 2. Introduction to Riverpod 3. Riverpod installation and setup 4. Creating our first provider 5. Reading providers with `ConsumerWidget` and `Consumer` 6. Working with `FutureProvider`, `StreamProvider`, and `AsyncValue` 7. Testing `AsyncValue` by adding a delay 8. The `family` modifier 9. The `autoDispose` modifier + advanced data caching options 10. Creating a reusable `AsyncValueWidget` helper 11. Wrap Up + Exercise ### 5. State Management with Riverpod - Part 2 (Authentication Flow) 1. Section intro 2. Implementing a fake authentication repository 3. Creating repositories using abstract classes (optional) 4. Intro: a reactive in-memory store with RxDart 5. Implementing the `InMemoryStore` with RxDart 6. Using the `InMemoryStore` in the `FakeAuthRepository` 7. Accessing the `FakeAuthRepository` with `ref.read()` in the `AccountScreen` 8. Creating our first controller using `StateNotifier` 9. Using the `StateNotifier` inside the `AccountScreen` widget 10. Listening to provider state changes with `ref.listen()` 11. Bug-fix for `Navigator.pop` 12. The `AsyncValue.guard` method 13. Adding an `AsyncValue` extension method 14. Using the `authStateChangesProvider` in `HomeAppBar` 15. Intro to the email & password sign-in screen 16. How to generate immutable state classes in Dart 17. Using `AsyncValue` inside `EmailPasswordSignInState` 18. Implementing the `EmailPasswordSignInController` 19. Using the `EmailPasswordSignInController` in the widget class 20. Bug fix + filtering state updates with `select()` 21. GoRouter redirects 22. GoRouter: the `refreshListenable` argument 23. Wrap Up ### 6. Automated Testing - Part 1 1. Section Intro 2. Introduction to Automated Testing and the Testing Pyramid 3. Getting started with automated testing 4. Writing the first unit test + adding `toString()` and equality implementations 5. Test matchers and working with methods that throw exceptions 6. Fixing the `getProduct()` method and updating the unit tests 7. Working with groups and testing Futures and Streams 8. Adding an optional delay to the `FakeProductsRepository` 9. How to generate a Flutter test coverage report in VSCode 10. Testing the `FakeAuthRepository` (part 1) 11. Testing the `FakeAuthRepository` (part 2) + advanced stream matchers 12. Mocks vs Fakes + installing the mocktail package 13. Testing the `AccountScreenController` (part 1) + `AsyncValue` subclasses 14. Testing the `AccountScreenController` (part 2) + working with mocks 15. Testing the `AccountScreenController` (part 3) + type matchers 16. Testing with Stream Matchers and Predicates 17. Testing lifecycle methods (`setUp`, `tearDown`, `setUpAll`, `tearDownAll`) 18. Testing the `EmailPasswordSignInController` with acceptance criteria 19. Testing the `EmailPasswordSignInController` (part 2) 20. Tip: setting custom test timeouts per-file 21. Adding a test workflow to automate testing with GitHub Actions 22. Wrap up ### 7. Automated Testing - Part 2 1. Section Intro 2. Introduction to widget tests + starter project 3. Writing our first widget test using `pumpWidget()` 4. Working with `WidgetTester` and finder 5. Robot testing 6. How to find widgets by key 7. Writing widget tests with mocks and provider overrides 8. Writing widget tests with `Future.delayed()` and `runAsync()` 9. Adding the email & password widget tests 10. Adding the email & password widget tests (part 2) 11. Test setup for the authentication flow + using `pumpAndSettle()` 12. Fixing the RenderFlex overflow error 13. Completing the authentication flow test 14. Integration tests 15. Golden image tests 16. Running golden image tests with size variants 17. How to deal with holden image tests failing on CI 18. Wrap Up ### 8. Feature: Shopping Cart 1. Section Intro 2. Overview of the shopping cart feature + technical requirements 3. App Architecture for the shopping cart feature 4. Starter project + overview of the data and domain layers 5. Local data persistence with Sembast: Initial setup 6. How to persist the shopping cart data with the `SembastCartRepository` 7. Implementing the `CartService` class 8. Updating the `CartService` class to read dependencies using `Ref` 9. Writing unit tests using `ProviderContainer` 10. Writing the unit tests for the `CartService` class 11. Implementing the `AddToCartController` 12. Updating the `AddToCartWidget` 13. Bug Fix: Adding `autoDispose` to the `AddToCartController` 14. Showing the cart items in the `ShoppingCartScreen` + AutoDispose vs AlwaysAlive error when combining providers 15. Implementing the `ShoppingCartItemController` 16. Updating the `EditOrRemoveItemWidget` and `ShoppingCartScreen` widgets 17. Calculating and showing the cart items count 18. Calculating and showing the cart total price 19. Limiting the available quantity when adding items to the shopping cart 20. Implementing the `CartSyncService` with a listener 21. Registering the `CartSyncService` with `ProviderContainer` when the app starts 22. Implementing the logic inside the `CartSyncService` 23. Implementing the logic inside the `CartSyncService` (part 2 - optional) 24. Unit tests for the `CartSyncService` 25. Unit-testing providers with dependencies using `ProviderContainer` 26. Updated widget and integration tests 27. Wrap up + exercise (implement a wish list feature) ### 9. Feature: Checkout Flows 1. Section intro 2. Starter project for the checkout flows 3. Updating the `CheckoutScreen` with the `PageController` initialization logic 4. Do we need a `StateNotifier` for the `CheckoutScreen`? 5. Updating the `PaymentPage` 6. Implementing the `PaymentButtonController` 7. Wrap Up ### 10. Error Handling 1. Intro 2. Errors vs exceptions 3. Starter project overview + defining custom exceptions with enums 4. Using sealed classes to define exception types 5. Using the `AppException` sealed class in the `FakeAuthRepository` 6. Adding an `AsyncErrorLogger` using `ProviderObserver` 7. Creating a reusable `ErrorLogger` to catch all exceptions 8. Completing the error handling system 9. Working with the `Result` type (`Success` and `Error`) 10. Drawbacks of the `Result` type (and when not to use it) 11. Wrap Up ### 11. Feature: Product Reviews 1. Section Intro 2. Starter project overview 3. Overview of the `LeaveReviewScreen` 4. Implemeting a `LeaveReviewController` and submitting form data 5. Testing the `LeaveReviewForm` and preventing an `AssertionError` 6. Dismissing the `LeaveReviewScreen` programmatically on success using a callback 7. How to prefill a form with data from a repository/backend 8. Optimization: only submit the form if the data has changed 9. Showing existing reviews in the `ProductReviewsList` 10. Updating the `LeaveReviewAction` by reading read data from the `userPurchaseProvider` 11. Calculating the average product ratings 12. Updated tests & wrap up ### 12. Feature: Products Search 1. Section Intro 2. Client-side vs server-side search 3. Adding a search method to the `FakeProductsRepository` 4. Implementing client-side search with `StateProvider` and `FutureProvider` 5. Riverpod caching with `autoDispose`, `keepAlive()` and `Timer` 6. Debouncing and cancelling network requests ### 13. New Riverpod 2.x APIs & Riverpod Generator 1. Introduction to Riverpod 2.x 2. Starter project and updated code walkthrough 3. Installing the Riverpod Generator package 4. Generating providers with the `@riverpod` syntax 5. Migrating some more providers to Riverpod Generator + the `keepAlive` syntax 6. Migrating the `AccountScreenController` from `StateNotifier` to `AsyncNotifier` 7. Converting the `AccountScreenController` to use Riverpod Generator 8. How to check if an `AsyncNotifier` is mounted 9. How to write unit tests for `AsyncNotifier` subclasses 10. Wrap Up 11. Conclusion & Next Steps ### [LICENSE: MIT](LICENSE.md)

E-commerce Platforms Course Builders
900 Github Stars