Yumemi's Flutter Engineer Code Check Assignment

Outline

Create a Flutter App that work for iOS and Android following the requirements below.

Requirements

Environment

• Use the latest and stable versions for IDE・SDK・Programming Language
• In case of using outdated versions, make sure to describe the reasonings in the README
• Use Provider or Riverpod for state management
• You are free to use third party libraries as long as they are open source

OS Version

	OS Version
iOS	9.0 ~ 15.2
Android	4.1 ~ 12

Features

• Allow users to input keywords
• Search GitHub repositories based on the user's input
• When searching GitHub repositories、use the GitHub API（search/repositories）
  • Do not use packages like github | Dart Package. Implement it so you are actually calling the API.
• Display the list of search results (Name of Repository)
• Clicking on the search item will display the details of the repository (Name of Repository, owner Icon, Programming Language, Number of stars, Number of Watches, Number of Fork, and Number of Issues)

Design

Conform to Material Design

Submission

• Present the URL for the public GitHub Respository
• Let us know if you want to submit in a different format（We would like to see your Git Commits）

Packages

• Flutter_svg ^2.0.10+1
• intl ^0.19.0
• dio ^5.5.0+1
• flutter_riverpod: ^2.5.1
• riverpod_annotation: ^2.3.5
• cached_network_image: ^3.3.1
• url_launcher: ^6.3.0
• share_plus: ^9.0.0
• easy_localization: ^3.0.7
• app_settings: ^5.1.1
• shared_preferences: ^2.2.3
• flutter_markdown: ^0.7.3
• markdown: ^7.2.2
• mocktail: ^1.0.4
• jovial_svg: ^1.1.21
• flutter_native_splash: ^2.4.1
• flutter_launcher_icons: ^0.13.1

Issues

Not being able to display SVG in Flutter markdown. flutter/flutter#87857

Flutter SVG not displaying when it has a <style> element dnfield/flutter_svg#105

This is why I decided to use Jovial SVG which handles the style element as shown below. Not perfect but better.

flutter_svg:

jovial_svg:

Easy Localization

Run the following command whenever translations files are modified.

dart run easy_localization:generate -S assets/translations -f keys -o locale_keys.g.dart

App Settings

This project utilizes App_Settings Package to allow users to change the app's language via the setting screen. In ios when running locally, app will crash with the following output:

thread #1, queue = 'com.apple.main-thread', stop reason = signal SIGKILL
    frame #0: 0x00000001d38c0030 libsystem_kernel.dylib`mach_msg2_trap + 8
libsystem_kernel.dylib`mach_msg2_trap:
->  0x1d38c0030 <+8>: ret
libsystem_kernel.dylib`macx_swapon:
    0x1d38c0034 <+0>: mov    x16, #-0x30
    0x1d38c0038 <+4>: svc    #0x80
    0x1d38c003c <+8>: ret
Target 0: (Runner) stopped.
Lost connection to device

This is the expected behavior because the app is being rebooted when its setting is changed.

As explained in this comment

Test

Includes Units test and Widget test utilizing Mocktail.

Run test with flutter test

Credits

• DevIcon: GitHub Icon used for App bar

Inspiration and Documents

• https://codewithandrea.com/articles/flutter-riverpod-data-caching-providers-lifecycle/#caching-with-timeout
• Implementing pagination
• https://qiita.com/kasa_le/items/a33a607b8e6f1636be81
• https://medium.com/@m1nori/run-flutter-integration-tests-using-github-actions-workflow-80958948b8e4

Side note

Routing

I would typically use GoRouter for navigation. However, because the project has simple navigation and does not require web implmentation, I just went with the Navigator widget. If you want to utilize GoRouter and implement this project for web, you would not be able to pass the GitHubRepositoryModel object when navigating to the detail screen because we can't encode custom objects inside the URL path.

CI/CD For this project, I've only set GitHub Actions to run tests whenever there is a push. If you want to setup GitHub Actions for building this app you can follow: this

Evaluation

• Review Difficulty
  • Descriptive README
  • Proper Comments
  • Utilizing GitHub's pull requests
• Git
  • Proper gitignore Settings
  • Proper and clean Commit
  • Proper use of branches
• Safe, Clean, Maintainable, easy to read code
• Utilizing Dart's progrmaming language
• Testing
  • Follows a structure that allows to easilly incorporate tests
  • Unit / UI testing
• UI/UX
  • Error screen
  • Responsiveness to multiple screen size and scree orientation
  • Use of Theme and Dark Mode
  • Localization
  • Animation
• CI/CD
  • Build
  • Test
  • Lint
  • Format
  • Mock Deploy environment