search

alan-turing-institute / trustchain-mobile

A reference credential wallet built on Flutter and DIDKit.
https://spruceid.dev/docs/credible
Apache License 2.0
0 stars 1 forks source link

Improve home screen icon & launch/splash screens #65

Closed thobson88 closed 11 months ago

thobson88 commented 11 months ago

Closes #50.

Notes & Instructions for future reference

Confusingly there are two screens shown when the app launches:

  1. the launch screen
  2. the splash screen

Initial launch screen and home screen icon

The initial launch screen which only shows on a cold reload (i.e. stop the app and restart with fn+F5).

This screen shows a small logo in the middle, plus a "launch background".

The launch background colour is specified in ~/spruceid/trustchain-mobile/android/app/src/main/res/drawable/launch_background.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- Background color -->
  <!-- Shown on the initial splash screen only after a cold restart -->
  <item>
      <color android:color="#FFFFFF" />
  </item>
</layer-list>

The small logo image that is displayed in the middle of the initial launch screen is generated from the file ~/spruceid/trustchain-mobile/assets/launcher_icon.png by running the command:

flutter pub run flutter_launcher_icons:main

This process is configured inside the pubspec.yaml file, in the flutter_icons section:

flutter_icons:
  android: true
  ios: false
  image_path: "assets/launcher_icon.png"

and it requires the flutter_launcher_icons package to be listed in the dev_dependencies (or dependencies), also in pubspec.yaml.

The above command generates a collection of files named ic_launcher.png, for different screen resolutions, in the mipmap- directories under ~/spruceid/trustchain-mobile/android/app/src/main/res/.

These ic_launcher.png files define the home screen icon as well as the icon in the initial launch screen.

However, if generating from a square image in launcher_icon.png the resulting circular home screen icons (on Android) have too much white space padding, and the icon itself is too small. To fix this, use this free online tool to import the icon image, adjust the padding and then download the result. The download is a zip archive containing all of the files generated by the flutter_launcher_icons tool, which can now be replaced.

If icon files have been produced using the online tool, the flutter_launcher_icons tool must not be re-run else the icon files will be replaced by their poorly-padded versions.

Second splash screen

The logo file ~/spruceid/trustchain-mobile/assets/brand/logo-splash.svg is shown on the later splash screen (that is seen on a hot reload and has the Credible coloured background)

The size of this logo file is specified in BrandMinimal class in ~/spruceid/trustchain-mobile/lib/app/shared/widget/brand.dart (search for logo-splash.svg). Set the width and height of the child Container.

The background in the later splash screen is set in the widget build method in in ~/spruceid/trustchain-mobile/lib/app/pages/splash.dart (that returns a BasePage instance whose child is the BrandMinimal type mentioned above). To set the background colour you need to specify the backgroundGradient attribute, e.g. with:

backgroundGradient: LinearGradient(
  colors: [Color(0xFFFFFFFF), Color(0xFFFFFFFF)],
)