Map Slide Puzzle

Table of content

• Description
• Getting Started
  • Platform Specific Setup
• Tests
• Accessibility
• Licenses
• Working with Translations
  • Adding Strings
  • Adding Supported Locales
  • Adding Translations

Description

This project is one of the winning submissions in the Official Google's Flutter Challenge, called "Flutter Puzzle Hack" (with hundreds valid entries from around the world and more than 5,5k participants). You can read more about this contest here: flutter.dev/events/puzzle-hack.

This is a heavily modified version of the sample project provided as a starting point of this challenge (Built by Very Good Ventures in partnership with Google.). Modified by Roman Cinis.

Your goal is to assemble the map of the island with a treasure, which will be displayed after the 15 tiles are correctly placed. Each tile contains its unique, handcrafted location and animation. The whole design is created in vector graphics, so there are no raster images in the game at all. You can zoom in on the tiles (mouse wheel on desktop and macOS and pinch gesture on mobile). The game works on all platforms that Flutter offers.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.

Getting Started

To run the project either use the launch configuration in VSCode/Android Studio or use the following command:

flutter pub get
flutter gen-l10n
flutter run

Platform Specific Setup

You should run the the app without any additional steps on all platforms without any problems, however, for audio player in Linux builds you will need to install libwebkit2gtk-4.0-dev package first (via sudo apt-get install):

sudo apt-get update -y
sudo apt-get --assume-yes install libwebkit2gtk-4.0-dev

Tests

The code is almost 100% covered by the unit/widget tests. To run all unit and widget tests use the following command:

flutter test --coverage --test-randomize-ordering-seed random

To view the generated coverage report you can use lcov.

# Generate Coverage Report
$ genhtml coverage/lcov.info -o coverage/

# Open Coverage Report
$ open coverage/index.html

Accessibility

The app was originally designed to be accessible by WCAG 2.1 AA standards at minimum, and AAA in particular. All texts have a contrast ratio at least of 4.5, images 3.0, touch target sizes of at least 48dp. The game was also built to be controllable via keyboard/input device/remote control/gamepad.

Licenses

This project is released under the terms of the MIT license. All assets (as sounds, fonts) licensed and are free for personal use. You can find LICENSE files in their folders. You can also press on floating compass logo to show "About" dialog and check all licenses for packages used in this game.

Working with Translations

This project relies on flutter_localizations and follows the official internationalization guide for Flutter.

Adding Strings

1. To add a new localizable string, open the app_en.arb file at lib/l10n/arb/app_en.arb.

{
    "@@locale": "en",
    "counterAppBarTitle": "Counter",
    "@counterAppBarTitle": {
        "description": "Text shown in the AppBar of the Counter Page"
    }
}

2. Then add a new key/value and description

{
    "@@locale": "en",
    "counterAppBarTitle": "Counter",
    "@counterAppBarTitle": {
        "description": "Text shown in the AppBar of the Counter Page"
    },
    "helloWorld": "Hello World",
    "@helloWorld": {
        "description": "Hello World Text"
    }
}

3. Use the new string

import 'package:map_slide_puzzle/l10n/l10n.dart';

@override
Widget build(BuildContext context) {
  final l10n = context.l10n;
  return Text(l10n.helloWorld);
}

Adding Supported Locales

Update the CFBundleLocalizations array in the Info.plist at ios/Runner/Info.plist to include the new locale.

    ...

    <key>CFBundleLocalizations</key>
	<array>
		<string>en</string>
		<string>es</string>
	</array>

    ...

Adding Translations

1. For each supported locale, add a new ARB file in lib/l10n/arb.

├── l10n
│   ├── arb
│   │   ├── app_en.arb
│   │   └── app_es.arb

2. Add the translated strings to each .arb file:

app_en.arb

{
    "@@locale": "en",
    "counterAppBarTitle": "Counter",
    "@counterAppBarTitle": {
        "description": "Text shown in the AppBar of the Counter Page"
    }
}

app_es.arb

{
    "@@locale": "es",
    "counterAppBarTitle": "Contador",
    "@counterAppBarTitle": {
        "description": "Texto mostrado en la AppBar de la página del contador"
    }
}