Compass App: Search form screen (#2353)

Part of the implementation of the Compass App for the Architecture
sample.

**Merge to `compass-app`**

This PR introduces the Search Form Screen, in which users can select a
region, a date range and the number of guests.

The feature is split in 5 different widgets, each one depending on the
`SearchFormViewModel`. The architecture follows the same patterns
implemented in the previous PR
#2342

TODO later on:

- Error handling is yet not implemented, we need to introduce a "logger"
and a way to handle error responses.
- All repositories return local data, next steps include creating the
dart server app.
- The search query at the moment only takes the "continent" and not the
dates and number of guests, that would be implemented later on as well.

## Demo

[Screencast from 2024-07-12
14-30-48.webm](https://github.com/user-attachments/assets/afbcdd4e-617a-49cc-894c-8e082748e572)

## Pre-launch Checklist

- [x] I read the [Flutter Style Guide] _recently_, and have followed its
advice.
- [x] I signed the [CLA].
- [x] I read the [Contributors Guide].
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-devrel
channel on [Discord].

<!-- Links -->
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md
[CLA]: https://cla.developers.google.com/
[Discord]:
https://github.com/flutter/flutter/blob/master/docs/contributing/Chat.md
[Contributors Guide]:
https://github.com/flutter/samples/blob/main/CONTRIBUTING.md

Author: miquelbeltran

compass_app/app/lib/config/dependencies.dart

@@ -1,14 +1,20 @@
-import '../data/repositories/destination/destination_repository.dart';
-import '../data/repositories/destination/destination_repository_local.dart';
 import 'package:provider/single_child_widget.dart';
 import 'package:provider/provider.dart';
 
+import '../data/repositories/continent/continent_repository.dart';
+import '../data/repositories/continent/continent_repository_local.dart';
+import '../data/repositories/destination/destination_repository.dart';
+import '../data/repositories/destination/destination_repository_local.dart';
+
 /// Configure dependencies as a list of Providers
 List<SingleChildWidget> get providers {
   // List of Providers
   return [
     Provider.value(
       value: DestinationRepositoryLocal() as DestinationRepository,
     ),
+    Provider.value(
+      value: ContinentRepositoryLocal() as ContinentRepository,
+    ),
   ];
 }

compass_app/app/lib/data/models/continent.dart

@@ -0,0 +1,12 @@
+class Continent {
+  /// e.g. 'Europe'
+  final String name;
+
+  /// e.g. 'https://rstr.in/google/tripedia/TmR12QdlVTT'
+  final String imageUrl;
+
+  Continent({
+    required this.name,
+    required this.imageUrl,
+  });
+}

compass_app/app/lib/data/repositories/continent/continent_repository.dart

@@ -0,0 +1,8 @@
+import '../../../utils/result.dart';
+import '../../models/continent.dart';
+
+/// Data source with all possible continents.
+abstract class ContinentRepository {
+  /// Get complete list of continents.
+  Future<Result<List<Continent>>> getContinents();
+}

compass_app/app/lib/data/repositories/continent/continent_repository_local.dart

@@ -0,0 +1,44 @@
+import '../../../utils/result.dart';
+import '../../models/continent.dart';
+import 'continent_repository.dart';
+
+/// Local data source with all possible regions.
+class ContinentRepositoryLocal implements ContinentRepository {
+  @override
+  Future<Result<List<Continent>>> getContinents() {
+    return Future.value(
+      Result.ok(
+        [
+          Continent(
+            name: 'Europe',
+            imageUrl: 'https://rstr.in/google/tripedia/TmR12QdlVTT',
+          ),
+          Continent(
+            name: 'Asia',
+            imageUrl: 'https://rstr.in/google/tripedia/VJ8BXlQg8O1',
+          ),
+          Continent(
+            name: 'South America',
+            imageUrl: 'https://rstr.in/google/tripedia/flm_-o1aI8e',
+          ),
+          Continent(
+            name: 'Africa',
+            imageUrl: 'https://rstr.in/google/tripedia/-nzi8yFOBpF',
+          ),
+          Continent(
+            name: 'North America',
+            imageUrl: 'https://rstr.in/google/tripedia/jlbgFDrSUVE',
+          ),
+          Continent(
+            name: 'Oceania',
+            imageUrl: 'https://rstr.in/google/tripedia/vxyrDE-fZVL',
+          ),
+          Continent(
+            name: 'Australia',
+            imageUrl: 'https://rstr.in/google/tripedia/z6vy6HeRyvZ',
+          ),
+        ],
+      ),
+    );
+  }
+}

compass_app/app/lib/main.dart

@@ -4,6 +4,8 @@ import 'routing/router.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
+import 'ui/core/ui/scroll_behavior.dart';
+
 void main() {
   runApp(
     MultiProvider(
@@ -21,6 +23,7 @@ class MainApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp.router(
+      scrollBehavior: AppCustomScrollBehavior(),
       theme: AppTheme.lightTheme,
       darkTheme: AppTheme.darkTheme,
       themeMode: ThemeMode.system,

compass_app/app/lib/routing/router.dart

@@ -1,21 +1,35 @@
-import '../ui/results/widgets/results_screen.dart';
 import 'package:go_router/go_router.dart';
 import 'package:provider/provider.dart';
 
 import '../ui/results/view_models/results_viewmodel.dart';
+import '../ui/results/widgets/results_screen.dart';
+import '../ui/search_form/view_models/search_form_viewmodel.dart';
+import '../ui/search_form/widgets/search_form_screen.dart';
 
 /// Top go_router entry point
 final router = GoRouter(
-  initialLocation: '/results',
+  initialLocation: '/',
   routes: [
     GoRoute(
-      path: '/results',
+      path: '/',
       builder: (context, state) {
-        final viewModel = ResultsViewModel(
-          destinationRepository: context.read(),
-        );
-        return ResultsScreen(viewModel: viewModel);
+        final viewModel = SearchFormViewModel(continentRepository: context.read());
+        return SearchFormScreen(viewModel: viewModel);
       },
+      routes: [
+        GoRoute(
+          path: 'results',
+          builder: (context, state) {
+            final viewModel = ResultsViewModel(
+              destinationRepository: context.read(),
+            );
+            final parameters = state.uri.queryParameters;
+            // TODO: Pass the rest of query parameters to the ViewModel
+            viewModel.search(continent: parameters['continent']);
+            return ResultsScreen(viewModel: viewModel);
+          },
+        ),
+      ],
     ),
   ],
 );

compass_app/app/lib/ui/core/themes/colors.dart

@@ -5,10 +5,11 @@ class AppColors {
   static const white1 = Color(0xFFFFF7FA);
   static const grey1 = Color(0xFFF2F2F2);
   static const grey2 = Color(0xFF4D4D4D);
+  static const grey3 = Color(0xFFA4A4A4);
   static const whiteTransparent =
       Color(0x4DFFFFFF); // Figma rgba(255, 255, 255, 0.3)
   static const blackTransparent =
-      Color(0x4D000000); // Figma rgba(255, 255, 255, 0.3)
+      Color(0x4D000000);
 
   static const lightColorScheme = ColorScheme(
     brightness: Brightness.light,

compass_app/app/lib/ui/core/themes/theme.dart

@@ -3,9 +3,32 @@ import '../ui/tag_chip.dart';
 import 'package:flutter/material.dart';
 
 class AppTheme {
+  static const _textTheme = TextTheme(
+    titleMedium: TextStyle(
+      fontSize: 18,
+      fontWeight: FontWeight.w500,
+    ),
+    bodyMedium: TextStyle(
+      fontSize: 18,
+      fontWeight: FontWeight.w400,
+    ),
+  );
+
+  static const _inputDecorationTheme = InputDecorationTheme(
+    hintStyle: TextStyle(
+      // grey3 works for both light and dark themes
+      color: AppColors.grey3,
+      fontSize: 18.0,
+      fontWeight: FontWeight.w400,
+    ),
+  );
+
   static ThemeData lightTheme = ThemeData(
     useMaterial3: true,
+    brightness: Brightness.light,
     colorScheme: AppColors.lightColorScheme,
+    textTheme: _textTheme,
+    inputDecorationTheme: _inputDecorationTheme,
     extensions: [
       TagChipTheme(
         chipColor: AppColors.whiteTransparent,
@@ -16,7 +39,10 @@ class AppTheme {
 
   static ThemeData darkTheme = ThemeData(
     useMaterial3: true,
+    brightness: Brightness.dark,
     colorScheme: AppColors.darkColorScheme,
+    textTheme: _textTheme,
+    inputDecorationTheme: _inputDecorationTheme,
     extensions: [
       TagChipTheme(
         chipColor: AppColors.blackTransparent,

compass_app/app/lib/ui/core/ui/home_button.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+import '../themes/colors.dart';
+
+/// Home button to navigate back to the '/' path.
+class HomeButton extends StatelessWidget {
+  const HomeButton({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 40.0,
+      width: 40.0,
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          border: Border.all(color: AppColors.grey1),
+          borderRadius: BorderRadius.circular(8.0),
+        ),
+        child: InkWell(
+          borderRadius: BorderRadius.circular(8.0),
+          onTap: () {
+            context.go('/');
+          },
+          child: Center(
+            child: Icon(
+              size: 24.0,
+              Icons.home_outlined,
+              color: Theme.of(context).colorScheme.onSurface,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

compass_app/app/lib/ui/core/ui/scroll_behavior.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+
+/// Custom scroll behavior to allow dragging with mouse.
+/// Necessary to allow dragging with mouse on Continents carousel.
+class AppCustomScrollBehavior extends MaterialScrollBehavior {
+  @override
+  Set<PointerDeviceKind> get dragDevices => {
+    PointerDeviceKind.touch,
+    // Allow to drag with mouse on Regions carousel
+    PointerDeviceKind.mouse,
+  };
+}