a mirror of DefinedNet/mobile_nebula
Find a file
Ian VanSchooten 5a641be96f
Switch to Material 3 for Android (#224)
This exploration updates the Android app to use Google's Material 3 design, and changes up the colors a bit in the process.  
I used a source color of #5D23DD in https://material-foundation.github.io/material-theme-builder/, which generates a full set of material colors that I imported into `lib/services/theme.dart`.  It should be easy to tweak any of the colors that we want, vs previously it was somewhat more difficult because they were being generated "behind the scenes".

This doesn't necessarily need to be done now, but it does align better with more modern Android design patterns and Flutter has said at some point they will stop supporting Material 2.  

Note: this should not have any impact on iOS, since we use the default `CupertinoThemeData` there, without any custom theming.

Here are some before/after comparisons of interesting screens:

Adding a new site:
|Dark Before|Dark After|Light Before|Light After|
|---|---|---|---
|<img width="390" alt="Android Studio 2025-01-22 10 43 55" src="https://github.com/user-attachments/assets/c7954b7f-a8eb-48a5-bd47-237877f078fd" />|<img width="405" alt="Android Studio 2025-01-22 11 16 48" src="https://github.com/user-attachments/assets/b69c1e6f-3464-44af-9f9c-f6377b5ce1d1" />|<img width="389" alt="image" src="https://github.com/user-attachments/assets/40f1e40f-a1f5-42e4-909c-c07b3f82df2b" />|<img width="393" alt="image" src="https://github.com/user-attachments/assets/09f8f8ce-668e-4e69-a4a9-233fb970655f" />|


Confirmation dialog:
|Before|After|
|---|---|
|<img width="264" alt="image" src="https://github.com/user-attachments/assets/7cae1abc-621d-4c59-bf36-0ce3be0af88c" />|<img width="278" alt="Android Studio 2025-01-22 11 43 19" src="https://github.com/user-attachments/assets/d461a97f-d252-494f-8b30-49d33a5a9cda" />|

Settings page:
|Dark Before|Dark After|Light Before|Light After|
|---|---|---|---|
|<img width="394" alt="Android Studio 2025-01-22 11 46 01" src="https://github.com/user-attachments/assets/edfc6c40-ee72-4a7c-b9b7-7c3025f0cdfe" />|<img width="393" alt="Android Studio 2025-01-22 11 46 35" src="https://github.com/user-attachments/assets/d1445041-bbc0-4994-98d5-3eb149afceea" />|<img width="391" alt="Android Studio 2025-01-22 11 46 09" src="https://github.com/user-attachments/assets/295e5cc4-74e2-422a-b478-a3e0bd577b60" />|<img width="391" alt="Android Studio 2025-01-22 11 46 28" src="https://github.com/user-attachments/assets/098339de-f2df-4269-84cf-e3ae2c09a51d" />|

Site with errors:
|Dark Before|Dark After|Light Before|Light After|
|---|---|---|---|
|<img width="395" alt="Android Studio 2025-01-22 11 48 50" src="https://github.com/user-attachments/assets/4f8dd05d-ccc7-44eb-96e0-ffec63975085" />|<img width="390" alt="Android Studio 2025-01-22 11 48 06" src="https://github.com/user-attachments/assets/751f35e2-b801-4ddf-9655-15f0097e05ca" />|<img width="395" alt="image" src="https://github.com/user-attachments/assets/15ac20c9-4d40-4e51-aed6-fd69a001588b" />|<img width="388" alt="Android Studio 2025-01-22 11 48 20" src="https://github.com/user-attachments/assets/780bf849-9add-4f91-bac8-3cdd5fd89337" />|

Main page / site list:
|Light Before|Light After|Light Scrolled Before|Light Scrolled After|
|---|---|---|---|
|<img width="387" alt="Android Studio 2025-01-22 11 53 07" src="https://github.com/user-attachments/assets/ca426470-00c2-4dc3-bd22-4a336c4ec8cf" />|<img width="403" alt="Android Studio 2025-01-22 11 53 41" src="https://github.com/user-attachments/assets/abf755e3-df10-453b-a439-0aa3b21b7ef9" />|<img width="389" alt="Android Studio 2025-01-22 11 53 22" src="https://github.com/user-attachments/assets/a6cdfabf-5288-49fe-ac29-e73678d34ccb" />|<img width="396" alt="Android Studio 2025-01-22 11 53 51" src="https://github.com/user-attachments/assets/11eda1f4-cf2f-4848-9690-6093223a9e7e" />|

Certificate:
|Dark Before|Dark After|Light Before|Light After|
|---|---|---|---|
|<img width="388" alt="Android Studio 2025-01-22 11 57 25" src="https://github.com/user-attachments/assets/5a1db1ba-a560-4aa6-8649-9b41d9ba25b6" />|<img width="390" alt="Android Studio 2025-01-22 11 56 44" src="https://github.com/user-attachments/assets/5e1b9200-ea13-42e5-a55d-51a1fda4522f" />|<img width="397" alt="Android Studio 2025-01-22 11 57 01" src="https://github.com/user-attachments/assets/65c52218-3f90-40c7-bb21-e499c2e0b08c" />|<img width="392" alt="Android Studio 2025-01-22 11 56 21" src="https://github.com/user-attachments/assets/554847cd-e825-4691-ac21-1549ab5e7d21" />|
2025-01-23 10:49:32 -05:00
.github/workflows Minor updates (#217) 2025-01-17 12:30:20 -05:00
android Allow saving invalid sites (#215) 2025-01-13 09:28:52 -05:00
fonts Initial commit 2020-07-27 15:43:58 -05:00
images Support DN host enrollment (#86) 2022-11-17 16:43:16 -05:00
ios Fix iOS 16 support (#222) 2025-01-17 12:31:13 -05:00
lib Switch to Material 3 for Android (#224) 2025-01-23 10:49:32 -05:00
nebula Minor updates (#217) 2025-01-17 12:30:20 -05:00
.git-blame-ignore-revs git blame ignore that the format merge (#39) 2021-05-03 17:00:29 -05:00
.gitignore Rebind against nebula 1.6 for relays, modernize build (#63) 2022-08-04 19:39:46 -05:00
.metadata Initial commit 2020-07-27 15:43:58 -05:00
CHANGELOG.md Fix date 2021-06-09 20:31:00 -05:00
env.sh.example Initial commit 2020-07-27 15:43:58 -05:00
gen-artifacts.sh Upgrade to flutter 3 (#70) 2022-09-21 15:27:35 -05:00
pubspec.lock Switch to Material 3 for Android (#224) 2025-01-23 10:49:32 -05:00
pubspec.yaml Switch to Material 3 for Android (#224) 2025-01-23 10:49:32 -05:00
README.md Update to flutter 3.27 (#214) 2025-01-10 12:13:48 -05:00

Mobile Nebula

Play Store | App Store

Setting up dev environment

Install all of the following things:

Ensure your path is set up correctly to execute flutter

Run flutter doctor and fix everything it complains before proceeding

NOTE on iOS, always open Runner.xcworkspace and NOT the Runner.xccodeproj

Before first compile

  • Copy env.sh.example and set it up for your machine
  • Ensure you have run gomobile init
  • In Android Studio, make sure you have the current ndk installed by going to Tools -> SDK Manager, go to the SDK Tools tab, check the Show package details box, expand the NDK section and select 26.1.10909125 version.
  • Ensure you have downloaded an ndk via android studio, this is likely not the default one and you need to check the Show package details box to select the correct version. The correct version comes from the error when you try and compile
  • Make sure you have gem installed with sudo gem install
  • If on MacOS arm, sudo gem install ffi -- --enable-libffi-alloc

If you are having issues with iOS pods, try blowing it all away! cd ios && rm -rf Pods/ Podfile.lock && pod install --repo-update

Formatting

dart format can be used to format the code in lib and test. We use a line-length of 120 characters.

Use:

dart format lib/ test/ -l 120

In Android Studio, set the line length using Preferences -> Editor -> Code Style -> Dart -> Line length, set it to 120. Enable auto-format with Preferences -> Languages & Frameworks -> Flutter -> Format code on save.

Release

Update version in pubspec.yaml to reflect this release, then

Android

flutter build appbundle

This will create an android app bundle at build/app/outputs/bundle/release/

Upload the android bundle to the google play store https://play.google.com/apps/publish

iOS

In xcode, Release -> Archive then follow the directions to upload to the app store. If you have issues, https://flutter.dev/docs/deployment/ios#create-a-build-archive