Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 4606 - translucent top status bar on on-boarding page 1 #4615

Merged
merged 1 commit into from
Sep 2, 2023

Conversation

monsieurtanuki
Copy link
Contributor

What

  • In order to have a translucent top bar, the trick is to start with a colored Container AND THEN use a SafeArea.
  • This way, the system will use the Container color with its own shade for the top status bar, and the body of the page will still use a SafeArea.
  • @bishalbera Very strange that on your android you already had a translucent top bar. I had not. The solution is in the end not what I assumed, but it mimics what is coded in other similar pages.

Screenshot

Screenshot_2023-09-01-14-19-33

Fixes bug(s)

Impacted file

  • reinvention_page.dart: put the color (container) and THEN the SafeArea

Impacted file:
* `reinvention_page.dart`: put the color (container) and THEN the SafeArea
@monsieurtanuki monsieurtanuki requested a review from a team as a code owner September 1, 2023 12:30
@github-actions github-actions bot added the 🤗 Onboarding We need to onboard users on how the app works, but also on content like Nutri-Score, Eco-Score… label Sep 1, 2023
@codecov-commenter
Copy link

Codecov Report

Merging #4615 (bbcd820) into develop (c6d8aec) will not change coverage.
Report is 3 commits behind head on develop.
The diff coverage is 0.00%.

@@           Coverage Diff            @@
##           develop    #4615   +/-   ##
========================================
  Coverage    10.14%   10.14%           
========================================
  Files          299      299           
  Lines        15686    15686           
========================================
  Hits          1591     1591           
  Misses       14095    14095           
Files Changed Coverage Δ
...oth_app/lib/pages/onboarding/reinvention_page.dart 0.00% <0.00%> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

@bishalbera
Copy link

ya that was strange.
Thank you, @monsieurtanuki, for sharing this valuable tip. and I believe that using SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.transparent)); in the main function before calling runApp could be another helpful approach. In any case, I want to express my gratitude once more. My journey into open source development has begun, and I'm already gaining valuable insights and knowledge.

@monsieurtanuki
Copy link
Contributor Author

@bishalbera Enjoy the journey!

Copy link
Member

@M123-dev M123-dev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks about right

@monsieurtanuki monsieurtanuki merged commit c71e0b9 into openfoodfacts:develop Sep 2, 2023
6 checks passed
@monsieurtanuki
Copy link
Contributor Author

Thank you @M123-dev for your review!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🤗 Onboarding We need to onboard users on how the app works, but also on content like Nutri-Score, Eco-Score…
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make the top bar transparent in the first screen of the onboarding
4 participants