#150: static pages

[brendacano]

ready for review now

[brendacano]

Android studio's phone stimulator refused to work so Ive been using Microsoft edge to edit. Hopefully it doesn't make too much of a difference.

Also, I'm not really sure what to do with the flutter test failing. It says this:

The following assertion was thrown while running async test code:
Golden "goldens/settings_about_screen_view.png": Pixel test failed, 18.60% diff detected.
Failure feedback can be found at
/Users/runner/work/quack/quack/quack_app/test/screens/settings/subscreens/failures

I tested out flutter test on my local and everything failed. Do I just need to add something to the specific file in the testfolder in order to work on the github tests?

[RafaelPiloto10]

Hi Brenda, this is great to at least get the content on there. Could you add some styling to make the content a little more presentable? Like containers for the text, making the profile images circles, etc. Some spice to make things a little more appealing?

[brendacano]

Hi Brenda, this is great to at least get the content on there. Could you add some styling to make the content a little more presentable? Like containers for the text, making the profile images circles, etc. Some spice to make things a little more appealing?

Yeah I'll work on it!

[brendacano]

Repeated text, but updated images

Android studio's phone stimulator refused to work so Ive been using Microsoft edge to edit. Hopefully it doesn't make too much of a difference.

Also, I'm not really sure what to do with the flutter test failing. It says this:

The following assertion was thrown while running async test code:
Golden "goldens/settings_about_screen_view.png": Pixel test failed, 18.60% diff detected.
Failure feedback can be found at
/Users/runner/work/quack/quack/quack_app/test/screens/settings/subscreens/failures

I tested out flutter test on my local and everything failed. Do I just need to add something to the specific file in the test folder in order to work on the github tests?

Updated Images!!!

Note: I tested out adding backgrounds and more shapes and such but I honestly didn't like how it looked, it felt crowded, so I kept it simplistic. If anyone has suggestions please let me know. (ignore the "Back", that's from something else)

[RafaelPiloto10]

@brendacano thanks! There are a lot of styling violations if you look at the Problems tab in VSCode (see screenshot) it shows you and you can hover each one to see a suggested fix. Normally not a big deal, but since this is how we can find TODO statements easily, it is a bit much to just leave in. Only worry about the "problems" in the files you changed.

.

As per broken tests, I can jump in and update the changed screens so that the tests pass again once you are ready to merge.

[brendacano]

@brendacano thanks! There are a lot of styling violations if you look at the Problems tab in VSCode (see screenshot) it shows you and you can hover each one to see a suggested fix. Normally not a big deal, but since this is how we can find TODO statements easily, it is a bit much to just leave in. Only worry about the "problems" in the files you changed.

.

As per broken tests, I can jump in and update the changed screens so that the tests pass again once you are ready to merge.

Okay I fixed all the "problems"

[RafaelPiloto10]

@brendacano, on attempt to fix the tests I got this error: Your UI is overflowing off the page. One fix is to simply reduce the content on the page. Fix 2 is making it scrollable

00:08 +0: /Users/apollo/emory/fall-2021/CS370/quack/quack_app/test/screens/settings/subscreens/food_preferences_screen_test.dart: Food Preferences Screen Test settings_food_preferences_screen_view
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 18 pixels on the bottom.

The relevant error-causing widget was:
  Column
  Column:file:///Users/apollo/emory/fall-2021/CS370/quack/quack_app/lib/screens/settings/subscreens/food_preferences_screen.dart:25:20

The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#4eb46 NEEDS-LAYOUT OVERFLOWING:
  creator: Column ← ConstrainedBox ← Container ← Center ← _BodyBuilder ← MediaQuery ←
    LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ←
    AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#7b489 ink renderer] ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=800.0, h=544.0)
  size: Size(800.0, 544.0)
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
00:08 +0 -1: /Users/apollo/emory/fall-2021/CS370/quack/quack_app/test/screens/settings/subscreens/food_preferences_screen_test.dart: Food Preferences Screen Test settings_food_preferences_screen_view [E]
  Test failed. See exception logs above.
  The test description was: settings_food_preferences_screen_view

00:08 +0 -1: loading /Users/apollo/emory/fall-2021/CS370/quack/quack_app/test/screens/settings/subscreens/food_preferences_screen_test.dart                             
Warning: At least one test in this suite creates an HttpClient. When
running a test suite that uses TestWidgetsFlutterBinding, all HTTP
requests will return status code 400, and no network request will
actually be made. Any test expecting a real network connection and
status code will fail.
To test code that needs an HttpClient, provide your own HttpClient
implementation to the code under test, so that your test can
consistently provide a testable response to the code under test.
00:08 +3 -1: /Users/apollo/emory/fall-2021/CS370/quack/quack_app/test/screens/settings/subscreens/about_screen_test.dart: About Screen Test settings_about_screen_view  
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 150 pixels on the bottom.

The relevant error-causing widget was:
  Column
  Column:file:///Users/apollo/emory/fall-2021/CS370/quack/quack_app/lib/screens/settings/subscreens/about_screen.dart:20:18

The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#7264e NEEDS-LAYOUT NEEDS-PAINT OVERFLOWING:
  creator: Column ← ConstrainedBox ← Container ← Center ← _BodyBuilder ← MediaQuery ←
    LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ←
    AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#b09f0 ink renderer] ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=800.0, h=544.0)
  size: Size(800.0, 544.0)
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
00:08 +3 -2: /Users/apollo/emory/fall-2021/CS370/quack/quack_app/test/screens/settings/subscreens/about_screen_test.dart: About Screen Test settings_about_screen_view [E]
  Test failed. See exception logs above.
  The test description was: settings_about_screen_view

[brendacano]

@brendacano, on attempt to fix the tests I got this error: Your UI is overflowing off the page. One fix is to simply reduce the content on the page. Fix 2 is making it scrollable

00:08 +0: /Users/apollo/emory/fall-2021/CS370/quack/quack_app/test/screens/settings/subscreens/food_preferences_screen_test.dart: Food Preferences Screen Test settings_food_preferences_screen_view
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 18 pixels on the bottom.

The relevant error-causing widget was:
  Column
  Column:file:///Users/apollo/emory/fall-2021/CS370/quack/quack_app/lib/screens/settings/subscreens/food_preferences_screen.dart:25:20

The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#4eb46 NEEDS-LAYOUT OVERFLOWING:
  creator: Column ← ConstrainedBox ← Container ← Center ← _BodyBuilder ← MediaQuery ←
    LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ←
    AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#7b489 ink renderer] ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=800.0, h=544.0)
  size: Size(800.0, 544.0)
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
00:08 +0 -1: /Users/apollo/emory/fall-2021/CS370/quack/quack_app/test/screens/settings/subscreens/food_preferences_screen_test.dart: Food Preferences Screen Test settings_food_preferences_screen_view [E]
  Test failed. See exception logs above.
  The test description was: settings_food_preferences_screen_view

00:08 +0 -1: loading /Users/apollo/emory/fall-2021/CS370/quack/quack_app/test/screens/settings/subscreens/food_preferences_screen_test.dart                             
Warning: At least one test in this suite creates an HttpClient. When
running a test suite that uses TestWidgetsFlutterBinding, all HTTP
requests will return status code 400, and no network request will
actually be made. Any test expecting a real network connection and
status code will fail.
To test code that needs an HttpClient, provide your own HttpClient
implementation to the code under test, so that your test can
consistently provide a testable response to the code under test.
00:08 +3 -1: /Users/apollo/emory/fall-2021/CS370/quack/quack_app/test/screens/settings/subscreens/about_screen_test.dart: About Screen Test settings_about_screen_view  
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 150 pixels on the bottom.

The relevant error-causing widget was:
  Column
  Column:file:///Users/apollo/emory/fall-2021/CS370/quack/quack_app/lib/screens/settings/subscreens/about_screen.dart:20:18

The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space, consider clipping it with a
ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
like a ListView.
The specific RenderFlex in question is: RenderFlex#7264e NEEDS-LAYOUT NEEDS-PAINT OVERFLOWING:
  creator: Column ← ConstrainedBox ← Container ← Center ← _BodyBuilder ← MediaQuery ←
    LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ←
    AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#b09f0 ink renderer] ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=800.0, h=544.0)
  size: Size(800.0, 544.0)
  direction: vertical
  mainAxisAlignment: start
  mainAxisSize: max
  crossAxisAlignment: center
  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
00:08 +3 -2: /Users/apollo/emory/fall-2021/CS370/quack/quack_app/test/screens/settings/subscreens/about_screen_test.dart: About Screen Test settings_about_screen_view [E]
  Test failed. See exception logs above.
  The test description was: settings_about_screen_view

Gotcha. I attempted to make it scrollable at first but it gave me so many errors lol. I can reduce the content

[brendacano]

@RafaelPiloto10 okay I made most of the pages scrollable except for account preferences and the calendar page I believe, hopefully this fixes everything

[RafaelPiloto10]

@brendacano just pushed an update that fixes the tests

[RafaelPiloto10]

@brendacano ready to merge!