I am extremely new to Flutter, so please forgive my ignorance and please explain things to me like I am a toddler.
I would like to implement a to-do list into my app similar to this project: https://github.com/ishrath-raji/todoey-flutter
It's just a basic list where users can add items, cross them out, and delete them. Very simple.
However, I have absolutely no idea how to take the items that users enter into the to-do list and store them in memory so that the user can review them later.
I've tried googling around, but all the answers I've seen are above my understanding and/or written in a way that is difficult to follow.
Any help would be very much appreciated!
I assume you have a view / page, where the user can give all the necessary information for the new ToDo item. This means you have a class representing a ToDoItem.
class ToDoItem {}
You will want to store them in some List.
As you probably want this list of ToDo items to be accessbible everywhere within the map, you should start researching the topic "state management".
As a starting point, just to name the easiest of all solutions, you could use Riverpod and declare one global variable:
final todoListRereference = StateProvider<List<ToDoItem>>((ref) => <ToDoItem>[]);
Now you have a list of ToDoItem which is accessible from everywhere in your app, provided you follow the steps to make Riverpod providers accessible everywhere. For example, in every build method you can use
final todoList = ref.watch(todoListRereference);
and you have access to all the stored ToDoItems.
In the case of your ToDoItem you can create with all the user information, you will have a construction like:
onPressed: () {
final todoItem = ToDoItem(...);
final todoListProvider = ref.read(todoListReference.notifier);
todoListProvider.state = [... todoListProvider.state, todoItem);
}
I just assumed it would happen after the user clicked something and the onPressed method of the according button is triggered.... However, first you create the ToDoItem. Then you access the List we made accessible with the reference. Then we change the "state" of that provider to a new state which is defined as all the old ToDoItems plus the newly created one.
If you have any pages in your app where you can see all the ToDoItems, you will now see one more.
I hope this is okay as a starting point.
Related
I'm working on a parent component, with conditionally rendered children components. I am simplifying the parent component a bit to help clarify my issue.
Display 1: Display list of "Courses"
The page starts off displaying a list of the user's "Courses"; a "Course" is just a collection inside Firestore. To access these collections, I call the "FirestoreConnect()" at the export default line of the end of this parent component.
However, once the user clicks on one of the Courses that are displayed, the screen enters Display 2.
Display 2: Display list of "Lectures"
Once the user chooses a course, I want it to display a list of that courses "lectures". "Lectures" are simply Firestore sub-collection within that specific courses collection. However, since I already called the "FirestoreConnect()" once already during the initial rendering of this parent, I don't know how to recall it specifically to read the selected sub-collections material. (Since I didn't know before hand which course the user would choose.)
Is there a way to continue recalling a FirestoreConnect() multiple times, for different collections, inside the same parent component?
Since we don't see your code, I will be guessing how you are passing the parameters for your firestoreConnect(). I'm saying that to clarify that you need to pass the subcollection/subdocument hierarchy information as to firestoreConnect(). So, your code would be something like below:
const enhance = compose(
firestoreConnect(props => {
return [{ collection: "Courses", doc: props.uid, subcollections: [{ collection: "Lectures" }], storeAs: `${props.uid}-lectures` }];
}),
connect(({ firestore }, props) => {
return {
lectures: firestore.ordered[`${props.uid}-lectures`] || []
};
})
);
...
const Lectures = ({ firestore, lectures }) => {
return <YOUR_LECTURES_LIST_UI>
}
While this code is untested, it was based from this tutorial here and I believe it might help you. You just need to know that the subcollection is still referenced in your firestoreConnect(), so the application already has this part of the collection configured.
In case this still doesn't help you, I would recommend you to check this other similar cases below, because they might help you as well.
Choose firestore subcollection when connecting component to redux with react-redux-firebase
How to load firestore subcollection to redux store?
Let me know if the information helped you!
I'm having difficulties in two areas:
1) When a user successfully logs into their account using phone auth in Firestore, I take them to an "Edit profile" page so they can add their profile information. I get an error saying that I can't add data to a null user class or add data to a class within a class.
I currently have my user class setup something like the following:
class User {
String points;
Name name;
User({this.points, this.name});
}
class Name {
String firstName;
String lastName;
Name({this.firstName, this.lastName})
}
As you can see, I have a class within a class and when I try to add a value, it says I can't. I've tried doing it like
_bloc.user.name.firstName = value
And I've tried like
Name newName = Name();
newName.first = value.
The second one seems to work but it doesn't seem right. I'm hoping you could help me understand how to properly approach adding data for new users when I have a class within a class.
The second issue is understanding how to properly use the Places API. I'm currently learning from the below repo, but it's outdated and there's a couple lines I can't seem to figure out how to change. I also can't seem to find an updated tutorial since the October app crashing update.
https://github.com/alfianlosari/flutter_placez
Thanks in advance for your help!
I am using Xamarin Forms and their templates come with MvvMHelpers object to be used in the ViewModel as ObservableRangeCollections. I know ObservableCollections. If you try to do :
ObservableRangeCollection<Object> collection = new ObservableRangeCollection<Object>();
List<Object> objects = new List<Objects>();
collection.ReplaceRange(objects);
//error invalid type
Does anyone know how to use an ObservableRangeCollection? There is nothing on it in Google, Bing or StackOverflow.
Try the search you'll see Xamarin is promoting something so new that nobody knows what it is.
ObservableRangeCollection is a helper class by the Xamarin Evangelist James Montemagno.
The source is available in his github:
https://github.com/jamesmontemagno/mvvm-helpers
ObservableRangeCollection intends to help when adding/replacing Collections to a ObservableCollection.
In a "regular" ObservableCollection, for each new item added to the Collection, a OnCollectionChanged event would raise.
This is where ObservableRangeCollection gets in. It allows to replace/add elements to the Collection without firing an event for each element.
ObservableRangeCollection is subclassed from ObservableCollection.
So in your example, substitute your <T>, i.e:
ObservableRangeCollection<string> collection = new ObservableRangeCollection<string>();
List<string> objects = new List<string>();
collection.ReplaceRange(objects);
Consult the code here: https://github.com/jamesmontemagno/mvvm-helpers/blob/master/MvvmHelpers/ObservableRangeCollection.cs
This is not something that new. There's plenty of code using ObservableCollection.
What you are trying to achieve can be done like this:
List<Object> myList = new List<Objects>();
ObservableCollection<Object> myCollection = new ObservableCollection<Object>(myList);
Read more about ObservableCollection.
Check out my answer here, which is an enhanced version of ObservableRangeCollection optimized for less event raising and reuse of items in UI.
I've been working on this for sometime now, and I keep running into a wall. I think I'm close, but I figured someone out here in the land of SO might have some deeper insight if not a better way of doing what I'm trying to do.
Basically lets look at this scenario. I have a logo w/ some text that can be set from a few different places. If we look at the setup here is what it looks like.
Hiearchy:
Homepage [has designPath]
- Child Microsite Page [has designPath]
- Logo Component
Logic Flow (in logo component):
if properties.get("logoText") {
use this
} else if currentStyle.get("logoTextFromStyle") {
use this
} else if parentStyle.get("logoTextFromGlobal") {
use this
} else {
be blank
}
My query is with how to get the "parentStyle" of this page. Looking at the docs here: http://dev.day.com/docs/en/cq/5-5/javadoc/com/day/cq/wcm/api/designer/Style.html
I've been able to come up with the fact that I can get a Style object from the "designer" object made available via defineObjects. This is defined with the other utility objects like "pageManager, resourceUtil, resource, currentPage, etc".
With that being said this doesn't seem to work.
//assuming we have getting homePage earlier and it is a valid cq Page resource
Resource homePageResource.slingRequest.getResourceResolver().getResource(homePage.getPath());
Style homePageStyle = designer.getStyle(homePageResource);
at this point homePageStyle is null. To do some more testing I i tried passing currentPage.getPath() instead of homePage.getPath(). I assumed this would give me the currentPage resource and would in end yield the currentStyle object. This also resulted in a null Style object. From this I think I can safely conclude I'm passing the incorrect resource type.
I attempted to load the the cq:designPath into the resource hoping to get a Designer resourceType but to no avail.
I am curious if anyone has run into this problem before. I apologize if I've gone into too much detail, but I wanted to lay out the "why" to my question as well, just in case there was a better way overall of accomplishing this.
I've figured out how to return the style. Here is the rundown of what I did.
//get your page object
Page targetPage = pageManager.getPage("/path/to/target");
//get the Design object of the target page
Design homePageDesign = designer.getDesign(homePage);
//extract the style from the design using the design path
Style homePageStyle = homePageDesign.getStyle(homePageDesign.getPath());
it's very interesting the definition of "getStyle" is a little different from the designer.getStyle vs a Design.getStyle. designer.getStyle asks for a resource whereas Design.getStyle will take the path to a Design "cell" and return the appropriate Style.
I did some testing and it looks like it does work with inherited Styles/Designs. So if my cq:designPath is set at level 1 and I look up a page on at level 2 they will return the Design/Style at the cq:designPath set at level 1.
I hope this helps someone else down the way.
I tried this approach but was not getting the Styles in the Style object.
When we do this:
Design homePageDesign = designer.getDesign(homePage);
In this Design object we get the path till the project node i.e etc/design/myproject
After this if we try to extract the Style from the design path we do not get it.
However I implemented it in a different way.
In the design object, we also get the complete JSON of designs for(etc/design/myproject).
Get the sling:resourceType of the target page and get the value after last index of "/".
Check if this JSON contains the last value. If it contains, you can get your styles, i.e. image, etc.
I'm working on a sample app for Facebook, using Flash Builder and Flex.
Now, I've got everything up and running - but there's one problem, specifically with the work history part.
When I try to display the user's work history..here's the code for logging in:
protected function login():void
{
FacebookDesktop.login(loginHandler, ["user_birthday", "user_work_history"]);
}
Here, loginHandler's a callback function, that then goes ahead and displays data about the user:
protected function loginHandler(success:Object,fail:Object):void
{
if (success){
currentState = "LoggedIn";
fname.text = success.user.name;
userImg.source=FacebookDesktop.getImageUrl(success.uid,"small");
birthdayLbl.text=success.user.birthday;
workLbl.text=success.user.work;
}
}
Now, the problem occurs with success.user.work - it ends up printing the following:
[object,Object],[object,Object],[object,Object],[object,Object]
Obviously, I'm doing something wrong..but I can't figure out what exactly it is. Would be grateful for some pointers!
Thanks!
Rudi.
The object contained in success.user.work is most likely an array of objects, each item representing a work period, so you'll have to treat it as such. Either use a list and a custom renderer for each item, or create a string by iterating over the array, and appending the fields that you're interested in.
To see what the individual objects contain, either use a breakpoint during debug and inspect them, or check to see if they're documented in the facebook development documentation.