Create User Account Page

[annazwicker]

This page should include the features from the Figma designs. (https://www.figma.com/file/GuXkK5D8kMGyrWSGBwqHgi/Screen-Designs?type=design&node-id=0-1&mode=design&t=a279YNXhofCA2Jn6-0).

[annazwicker]

Starting work. Continuing to look at how to create submittable forms that are able to be validated. Looking at this link (https://docs.flutter.dev/cookbook/forms/validation) and this link (https://docs.flutter.dev/cookbook/forms/text-input).

[annazwicker]

Trying to build a functional form. Not much progress so far. I'm confused as to how each component works so progress is slow.

[annazwicker]

Still can't get the form to work. Trying to break down the components, but I'm not sure why this isn't working.

[annazwicker]

I don't think the error is with the form code, but rather just making it display. I'm trying to figure out how the account page connects with the other pages, specifically how the navigation works between one page and another. Stopping work for here tonight (1.5 hours)

[annazwicker]

Starting work (8:10), going to continue to try and make progress on creating the about page form. Also need to catch up on what I missed from Friday's meeting.

[annazwicker]

Fencepost, not much progress, just continuing to debug and try and make this form work.

[annazwicker]

Fencepost, got the form to somewhat work, made a commit so everyone else can see the changes. Working on refactoring the form and altering it to fit our needs.

[annazwicker]

Refactored some of the names on the form to make more sense to our project, and also added more fields according to the Figma designs.

[annazwicker]

New problem that needs to be fixed. There are too many elements displayed on the screen and Flutter has cut off the bottom of the screen. It provided me with some direction as to how to begin to fix this but this will be an issue to fix later. It seems using some combination of an expanded widget and RenderFlex will fix it but I need to look into these to figure out what they are. Stopping work here (2 hours).

[annazwicker]

Starting work (2:26), going to dive into the new issue I discovered last night. I need to figure out how to use an expanded widget and RenderFlex to fix the scrolling issue on the screen.

[annazwicker]

Found this article about what the RenderFlex error is https://docs.flutter.dev/testing/common-errors. Still not entirely sure how this works.

[annazwicker]

Found two articles about the expanded widget. I think I understand how to apply them, but it will likely take some tinkering. Stopping work here (1 hour) https://api.flutter.dev/flutter/widgets/Expanded-class.html https://www.geeksforgeeks.org/flutter-expanded-widget/

[annazwicker]

Starting work (7:30), going to try and apply the expanded widget to the form to fix the overflow problem

[annazwicker]

No progress, I broke something and I'm not sure how to fix it yet. Not entirely sure what's broken either.

[annazwicker]

I couldn't figure out what's wrong, I've reverted my changes to get a fresh start. Stopping work here for now (1 hour).

[annazwicker]

Starting work (4:20), going to try again to implement the expanded widget or a scrolling widget to make the page work.

[annazwicker]

Checkpoint, tried to implement an expanded widget but no luck. I actually ran into a different error when I tried to do that so I'm going to try and use a scrolling widget instead.

[annazwicker]

I'm working on implementing a single child scroll view widget. This is what Marlon used and to keep things consistent across the code I'm hoping this one will work. No major progress, I did some reading up on it and started fiddling with the implementation.

[annazwicker]

Still trying to get it to work, nothing much to update on.

[annazwicker]

Stopping work for now, will try and pick this up tomorrow (2 hours). Going to try and get the scroll view working tomorrow, otherwise I'll keep troubleshooting it. I do think this is a better solution than the expanded widget.

[annazwicker]

Starting work (8:20), going to continue work on the scroll view widget and getting that implemented. I'm going to look for a Youtube tutorial on it or other online resources to see if there's a better way to implement it than the way the Flutter documentation is suggesting.

[annazwicker]

Looked at this video, going to try the way they implemented it (https://www.youtube.com/watch?v=0hIRy3DSDiE). It seems simple but I think my IDE is set up a little differently so this may take a little bit of fiddling.

[annazwicker]

Got the SingleChildScrollView implemented and the code now is scrollable. Made a commit that reflects this capability. Next step is to make the status field a dropdown box with options to click.

[annazwicker]

Looked at the links below for creating a dropdown box for the status field. I think the way to go about it is similar to how the buildTextField was created, make it its own widget and then call the widget.

https://api.flutter.dev/flutter/material/DropdownButton-class.html https://stackoverflow.com/questions/76849048/what-is-the-exact-difference-between-dropdownmenu-dropdownbutton-in-flutter#:~:text=DropdownMenu%20is%20a%20stateless%20widget,the%20drop%2Ddown%20button%20itself. https://www.youtube.com/watch?v=z0ihUbwlSHs

[annazwicker]

Stopping work for now (2 hours). This coming week I'm going to try and figure out how to implement the dropdown box for the status button. The resources in the comment above are helpful but I'm not fully sure how to adapt those snippets of code to our project just yet.

[annazwicker]

Starting work (5:25pm), going to work on getting the dropdown box working. Based off of my previous comments on this issue, I need to make a widget similar to the buildTextField, and then I can just call it in the main widget. I also want to review some of the resources I put links to in the comment above this one since it's been about a week since I've looked at anything related to the dropdown feature.

[annazwicker]

Referred to the following resources to get started, going to try to implement some combination of these. https://www.youtube.com/watch?v=giV9AbM2gd8 https://api.flutter.dev/flutter/material/DropdownButton-class.html https://stackoverflow.com/questions/76849048/what-is-the-exact-difference-between-dropdownmenu-dropdownbutton-in-flutter#:~:text=DropdownMenu%20is%20a%20stateless%20widget,the%20drop%2Ddown%20button%20itself.

[annazwicker]

Made some progress with the dropdown form. It's currently crashing and I'm not sure why, but I'm going to work to debug it. I think some of the features just might be in the wrong order.

[annazwicker]

Found this link that has a variety of features of a Flutter form : https://loveandroid.medium.com/complete-register-page-with-all-types-of-input-fields-in-flutter-bdf2af397728. Also found a GeeksforGeeks link: https://www.geeksforgeeks.org/flutter-dropdownbutton-widget/. Both of these are helpful.

[annazwicker]

I think the error was that the hot reload wasn't working on Flutter so it wasn't displaying my changes. Whatever I did at least isn't throwing an error anymore, but it's also still not displaying the form for some reason.

[annazwicker]

Fixed the dropdown box so it displays, all of the correct options should be there according to the Figma and meeting notes from Kelly. There are a couple of small things to fix on the form, and there are other features that we discussed for this page, but I'm not sure how big of a priority they are given the time we have left to complete the project. Stopping work for now (2.5 hours).

[annazwicker]

Starting work (2:05), going to fiddle around with the form and make some minor adjustments.

[annazwicker]

Used this link to make the text wrap on the text fields: https://stackoverflow.com/questions/57622663/how-to-render-a-specific-number-of-lines-for-wrap-in-flutter. Stopping work for now (30 minutes).

[annazwicker]

Starting work (8:10), going to see what else needs changes on the user account page. I'm not sure what work still needs to be done.

[annazwicker]

I think the main feature that's missing is for users to be able to upload profile pictures. I'm going to start looking into this to see if there's a reasonably simple way to achieve this.

[annazwicker]

I've been looking at this link for uploading images: https://docs.flutter.dev/ui/assets/assets-and-images#loading-images. I'm going to try and find a real life example or Youtube tutorial that goes into more detail.

[annazwicker]

I've been doing some research online. I'm finding a problem with a lot of the resources regarding uploading profile pictures. Many of the sources mention using Firebase to save the photo to a database, but we aren't using Firebase so I don't know how this will translate to out project. I'm going to try to at least set up the front end of it, but this may be difficult without considering the backend portion.

[annazwicker]

I haven't found any new resources about adding profile pictures that have been particularly helpful. I know Marlon is also working on something similar with allowing users to upload pictures of the cats so I'll meet with him to see how he's going about it. Stopping work for now (2 hours).

[MMSU-1987]

As per Anna's request, will add profile pic option. This does require part of the backend to be functioning so will work on frontend.

[MMSU-1987]

made progress on it, dont have anything to show yet

[MMSU-1987]

made progress, but having issues with circle avatar not displaying. Will come back to it later.

[MMSU-1987]

Start work by continuing on Account page. Need to add function to make page screen adjustable. Will move to google account sign up later.

[MMSU-1987]

Finished the pfp functionality and add page adjustability. Maine issue is that current Account page boxes dont match with something from the 2/18 meeting notes(with Kelly). Will need to discuss that with Anna. For now will move over to working on google sign in.

[nay-su]

• user account page now takes data from database and autofills fields
• user account now accepts current logged in user information rather than hard-coded user