Find Pet

---

Getting Started 🚀

In this project we will discuss:

• ✅ Problem
• ✅ Solution
• ✅ Flavours
• ✅ Dependencies
• 🔲 Translation
• 🔲 Tests

Problem 💥

Develop a pet finder app with Flutter (iOS and Android) based on the DOG-CEO API. With the help of the app the user should be able to find pets and can view detail.

This application should have two (2) screens

• Dashboard (List of pets)
• Pet detail (It should show Pet detail once user click on any pet).

You can use following api to fetch data: https://dog.ceo/dog-api/

Solution 💪

The solution is designed so a user can access load available pets from the internet. The detail is given below:

• lib will contains view(pages, widgets, components), BLoC, configuration, etc.
• packages will keep network, database, and repository layer

State management

• We have used BLoC's 7.0.0 version as State management library. But as Bloc team is working on newer version that will help to remove boilerplate of writing mapEventsToSate and bloc will look like this:

  class AlbumsBloc extends Bloc<DashboardEvent, DashboardState> {
      AlbumsBloc(): super(AlbumsInitial()) {
          // Load tavailable dogs
          on<LoadDogs>(_loadDogs);
      }
      
      // perform your action here
      void _loadDogs(LoadDogs event, Emit<DashboardState> emit) async {
          // your business logic will be here to handle state and event
      }
  }

Log controller

• We have used Sentry.io to log all errors and issues in a server.

Flavours 🚀

This project contains 3 flavors:

Before run application you need to create .env file in app directory and add these varaibles:

#Logs Controller --  create your key (https://sentry.io/welcome/) and add
SENTRY_IO=

API_URL=https://dog.ceo/dog-api/

To run the desired flavor either use the launch configuration in VSCode/Android Studio or use the following commands:

• development
• staging
• production

To run the desired flavor either use the launch configuration in VSCode/Android Studio or use the following commands:

# Development
$ flutter run --flavor development --target lib/main_development.dart

# Staging
$ flutter run --flavor staging --target lib/main_staging.dart

# Production
$ flutter run --flavor production --target lib/main_production.dart

*Find Pet works on iOS, Android, and Web.

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

# Open Coverage Report
$ open coverage/index.html

---

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:find_pet/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"
    }
}

---

Tests 🧪

This section is under development and will be continue after a break.