Embedded Files
Initial Setup
Initial Setup
Services
Services
Folder structure
Folder structure
codemagic.io > Flutter Tutorial: Organizing Your Flutter App
Parthiban Sudhaman > Flutter: Scalable app structure (medium)
Amateur Coder > Flutter File Structure (medim)
Harkirat Saluja > Scalable app structure in flutter (hackernoon)
Service Locator
Service Locator
Define service_locator.dart
Instantiate before running your app
Call the service the first time you need it in the UI
Responsive
Responsive
Dependencies
Dependencies
File: pubspec.yaml
Packages from pub.dev
dependencies:
fluro: "^1.6.3"
From git
dependencies:
fluro:
git: git://github.com/theyakka/fluro.git
Analytics
Analytics
Authentication
Authentication
Code with Andrea > Flutter: Designing an Authentication API with Service Classes (github: firebase_auth_demo_flutter)
Code with Andrea (YouTube) >Flutter & Firebase Starter Architecture: Adding an Onboarding Screen [Part 1]
Tadas Petra > Flutter Tutorial - Building a Production App From Scratch > 14.07 authentication service
RajaParikshit / Flutter-MVVM > Login view
Robert Brunhage > Flutter Firebase Authentication - The Clean Way
Shared Preferences
Shared Preferences
This should be replaced by Proto Data Store (see article: https://www.rockandnull.com/proto-datastore/)
Getting started with Shared Preferences in Flutter
Flutter - Saving and Loading Shared Preferences
Sample code:
int _filter = 1;
@override
void initState() {
getPreferenceFilter().then(reload);
super.initState();
}
void reload(int filter) {
setState(() {
if (filter != null) {
this._filter = filter;
}
_sessionViewModel.loadData(_filter);
});
}
Future<int> getPreferenceFilter() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
int filter = prefs.getInt('filter');
return filter;
}
Future<void> _setFilterPreferences(int filter) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setInt('filter', filter);
}
DropdownButton(
//...
onChanged: (value) {
setState(() {
_filter = value;
_setFilterPreferences(_filter);
_sessionViewModel.loadData(_filter);
});
}
);
Routing and Navigation
Routing and Navigation
Fluro > package that allows to create custom routes (products/:productId)
Navigator a as service: Advance Url Navigation for Flutter Web by filledStacks.
It creates what it is needed to have an abstract layer of navigator and routes
Route Guard
MVVM > Steps to add a new object
MVVM > Steps to add a new object
Model (lib > core > models)
link.dart
class Link { final String id; final String title; final String url;
const Link({this.id, this.title, this.url});
factory Link.fromSnap(DocumentSnapshot snapshot) { Map data = snapshot.data();
return Link( id: snapshot.id, title: data['title'] as String, url: data['url'] as String, ); }}
class LinkList { List<Link> links;
LinkList({this.links});
factory LinkList.fromSnap(QuerySnapshot snapshot) { return LinkList( links: snapshot.docs.map((DocumentSnapshot document) { return Link.fromSnap(document); }).toList()); }}
Service (lib > core > services > link)
link_service.dart
import 'package:generalassembly/core/models/link.dart';
abstract class LinkService { Future<Link> getLink(String id); Future<LinkedList> getLinkList();}
link_service_firestore.dart
class LinkServiceFirestore extends LinkService { @override Future<Link> getLink(String id) async { DocumentSnapshot snapshot = await FirebaseFirestore.instance.collection('link').doc(id).get();
return Link.fromSnap(snapshot); }
@override Future<LinkList> getLinkList() async { QuerySnapshot snapshot = await FirebaseFirestore.instance.collection('link').get();
return LinkList.fromSnap(snapshot); }}
ViewModel (lib > ui > link)
link_viewmodel.dart
class LinkViewModel extends ChangeNotifier { final LinkService _linkService = serviceLocator<LinkService>();
Link _link;
void loadData(String id) async { _link = await _linkService.getLink(id); notifyListeners(); }
bool get isNull { return (_link == null); }
String get title { return _link.title; }
String get url { return _link.url; }}
link_list_viewmodel.dart
class LinkListViewModel extends ChangeNotifier { final LinkService _linkService = serviceLocator<LinkService>();
LinkList linkList;
void loadData() async { linkList = await _linkService.getLinkList(); linkList.links.sort((a, b) => a.title.compareTo(b.title)); notifyListeners(); }}
Service Locator
service_locator.dart
View
Item View
Item ViewDesktop
List View
List ViewDesktop
Router
app_router.dart
class AppRouter {static fluro.Router router = fluro.Router();
static fluro.Handler _linkHandler = fluro.Handler( handlerFunc: (BuildContext context, Map<String, dynamic> params) => LinkView(videoConferenceId: params['id'][0]));
static fluro.Handler _linkListHandler = fluro.Handler( handlerFunc: (BuildContext context, Map<String, dynamic> params) => LinkListView());
static void setupRouter() { router.define( Routes.link, handler: _linkHandler, transitionType: fluro.TransitionType.fadeIn, );
router.define( Routes.linkList, handler: _linkListListHandler, transitionType: fluro.TransitionType.fadeIn, );}}
Drawer
Add item to app_drawer.dart or app_admin_drawer.dart
Dependency injection with Provider
Dependency injection with Provider
Architecture references
Architecture references
Code with Andrea > Starter architecture > starter_architecture_flutter_firebase
Stacked
https://github.com/solutelabs/todo-app
Theme
Theme
RajaParikshit / Flutter-MVVM > app_styles.dart
Role based authorization
Role based authorization
Role based authorization using Flutter, Firebase Authentication and Firestore
What would be the best way to handle user permissions (or Access Levels) between Flutter/Dart and Firestore?
There are some good articles/replies (ie. from Frank van Puffelen - link) but it is hard to find a end-to-en solution for this common problem that answers:
- How does the user class look like in Flutter/dart to handle the permissions
- How does the Flutter/Dart Services and View Models (for example in a MVVM) would handle the permissions to ensure each user see what they need to see
- What is the best way to write the collections in Firestore to store the role
- Example of the json Firestore configuration to limit the Firestore access by user and role
Documentation
Models and nested classes in Flutter and Firestore
Models and nested classes in Flutter and Firestore
Models and nested classes in Flutter and Firestore
How to write the model in dart to handle for example an event that contains a list of sessions (see example below)
Some questions that could be answered:
- What is the best way to write the models event.dart and session.dart to express the dependency (via List<Strings> or via List<Sessions>
- How collections in Firestore should be organised to handle the dependency between events and sessions
- How Firestore services in Flutter/Dart should be organised to read the data from their respective collections (if this is the best way to organise the collections in Firestore)
event.dart {
final String id
final String tite;
final List<Sessions> sessions;
...
}
session.dart {
final String id;
final String title;
...
}
Page updated
Google Sites
Report abuse