Add forecast (#7)

lib/constants.dart

@@ -5,3 +5,5 @@ const kAppStateFileName = 'appstate.json';
 const kSettingsFileName = 'settings.json';
 const kFavLocationsFileName = 'favlocations.json';
 const kLastLocation = 'lastLocation';
+
+const kPaneWidth = 240.0;

lib/main.dart

@@ -9,6 +9,7 @@ import 'package:watch_it/watch_it.dart';
 import 'package:yaru/yaru.dart';
 
 import 'src/app/app.dart';
+import 'src/app/app_model.dart';
 import 'src/locations/locations_service.dart';
 import 'src/weather/weather_model.dart';
 
@@ -23,6 +24,7 @@ Future<void> main() async {
       LocationsService(),
       dispose: (s) => s.dispose(),
     );
+    di.registerSingleton(AppModel());
     final weatherModel = WeatherModel(
       locationsService: di<LocationsService>(),
       openWeather: di<OpenWeather>(),

lib/src/app/app.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:watch_it/watch_it.dart';
 import 'package:yaru/yaru.dart';
 
+import '../../constants.dart';
 import '../../weather.dart';
 import '../weather/view/city_search_field.dart';
 import '../weather/weather_model.dart';
@@ -46,6 +47,7 @@ class MasterDetailPage extends StatelessWidget with WatchItMixin {
       controller: YaruPageController(
         length: favLocationsLength == 0 ? 1 : favLocationsLength,
       ),
+      layoutDelegate: const YaruMasterFixedPaneDelegate(paneWidth: kPaneWidth),
       tileBuilder: (context, index, selected, availableWidth) {
         final location = favLocations.elementAt(index);
         return YaruMasterTile(
@@ -56,17 +58,20 @@ class MasterDetailPage extends StatelessWidget with WatchItMixin {
             favLocations.elementAt(index),
           ),
           trailing: favLocationsLength > 1
-              ? IconButton(
-                  padding: EdgeInsets.zero,
-                  onPressed: () {
-                    model.removeFavLocation(location).then(
-                          (value) => model.init(
-                            cityName: favLocations.lastOrNull,
-                          ),
-                        );
-                  },
-                  icon: const Icon(
-                    YaruIcons.window_close,
+              ? Center(
+                  widthFactor: 0.1,
+                  child: IconButton(
+                    padding: EdgeInsets.zero,
+                    onPressed: () {
+                      model.removeFavLocation(location).then(
+                            (value) => model.init(
+                              cityName: favLocations.lastOrNull,
+                            ),
+                          );
+                    },
+                    icon: const Icon(
+                      YaruIcons.window_close,
+                    ),
                   ),
                 )
               : null,
@@ -79,21 +84,7 @@ class MasterDetailPage extends StatelessWidget with WatchItMixin {
         backgroundColor: YaruMasterDetailTheme.of(context).sideBarColor,
         border: BorderSide.none,
         style: YaruTitleBarStyle.undecorated,
-        leading: Center(
-          child: YaruIconButton(
-            padding: EdgeInsets.zero,
-            icon: const Icon(
-              Icons.location_on,
-              size: 16,
-            ),
-            onPressed: () => model.init(cityName: null),
-          ),
-        ),
-        titleSpacing: 0,
-        title: const Padding(
-          padding: EdgeInsets.only(right: 15),
-          child: CitySearchField(),
-        ),
+        title: const CitySearchField(),
       ),
     );
   }

lib/src/app/app_model.dart

@@ -0,0 +1,11 @@
+import 'package:safe_change_notifier/safe_change_notifier.dart';
+
+class AppModel extends SafeChangeNotifier {
+  int _tabIndex = 0;
+  int get tabIndex => _tabIndex;
+  set tabIndex(int value) {
+    if (value == _tabIndex) return;
+    _tabIndex = value;
+    notifyListeners();
+  }
+}

lib/src/weather/view/city_search_field.dart

@@ -1,7 +1,8 @@
-import '../weather_model.dart';
 import 'package:flutter/material.dart';
 import 'package:watch_it/watch_it.dart';
-import 'package:yaru/icons.dart';
+import 'package:yaru/yaru.dart';
+
+import '../weather_model.dart';
 
 class CitySearchField extends StatefulWidget {
   const CitySearchField({
@@ -33,19 +34,46 @@ class _CitySearchFieldState extends State<CitySearchField> {
     var textField = TextField(
       onSubmitted: (value) => model.init(cityName: _controller.text),
       controller: _controller,
+      onTap: () {
+        _controller.selection = TextSelection(
+          baseOffset: 0,
+          extentOffset: _controller.value.text.length,
+        );
+      },
       style: Theme.of(context)
           .textTheme
           .bodyMedium
           ?.copyWith(fontWeight: FontWeight.w500),
-      decoration: const InputDecoration(
-        prefixIcon: Icon(
+      decoration: InputDecoration(
+        prefixIcon: const Icon(
           YaruIcons.search,
           size: 15,
         ),
-        prefixIconConstraints: BoxConstraints(minWidth: 35, minHeight: 30),
-        contentPadding: EdgeInsets.all(8),
+        prefixIconConstraints:
+            const BoxConstraints(minWidth: 35, minHeight: 30),
         filled: true,
         hintText: 'Cityname',
+        suffixIconConstraints: const BoxConstraints(
+          maxHeight: kYaruTitleBarItemHeight,
+          minHeight: kYaruTitleBarItemHeight,
+          minWidth: kYaruTitleBarItemHeight,
+          maxWidth: kYaruTitleBarItemHeight,
+        ),
+        suffixIcon: ClipRRect(
+          borderRadius: const BorderRadius.only(
+            topRight: Radius.circular(kYaruButtonRadius),
+            bottomRight: Radius.circular(kYaruButtonRadius),
+          ),
+          child: Material(
+            color: Colors.transparent,
+            child: InkWell(
+              child: const Icon(
+                YaruIcons.location,
+              ),
+              onTap: () => model.init(cityName: null),
+            ),
+          ),
+        ),
       ),
     );
     return textField;

lib/src/weather/view/forecast_tile.dart

@@ -2,12 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:flutter_weather_bg_null_safety/bg/weather_bg.dart';
 import 'package:flutter_weather_bg_null_safety/flutter_weather_bg.dart';
 import 'package:open_weather_client/models/weather_data.dart';
+import '../../../build_context_x.dart';
 import '../weather_utils.dart';
 import '../../../string_x.dart';
 import '../weather_data_x.dart';
 
 class ForecastTile extends StatefulWidget {
-  final List<WeatherData> data;
   final WeatherData selectedData;
   final String? cityName;
   final double fontSize;
@@ -31,7 +31,6 @@ class ForecastTile extends StatefulWidget {
     required this.padding,
     this.time,
     this.borderRadius = const BorderRadius.all(Radius.circular(10)),
-    required this.data,
   });
 
   @override
@@ -41,8 +40,8 @@ class ForecastTile extends StatefulWidget {
 class _ForecastTileState extends State<ForecastTile> {
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final light = theme.brightness == Brightness.light;
+    final theme = context.theme;
+    final light = context.light;
     final style = theme.textTheme.headlineSmall?.copyWith(
       color: Colors.white,
       fontSize: 20,
@@ -120,7 +119,7 @@ class _ForecastTileState extends State<ForecastTile> {
       child: Stack(
         children: [
           Opacity(
-            opacity: light ? 1 : 0.4,
+            opacity: light ? 1 : 0.6,
             child: ClipRRect(
               borderRadius: widget.borderRadius,
               child: WeatherBg(

lib/src/weather/view/today_tile.dart

@@ -95,18 +95,19 @@ class TodayTile extends StatelessWidget {
         ],
       ),
       if (cityName != null)
-        Text(
-          cityName!,
-          style: style,
-        )
-      else if (position != null)
         SizedBox(
-          width: 300,
+          width: width,
           child: Text(
-            position ?? '',
+            cityName!,
             style: style,
             textAlign: TextAlign.center,
           ),
+        )
+      else if (position != null)
+        Text(
+          position ?? '',
+          style: style,
+          textAlign: TextAlign.center,
         ),
     ];
 

lib/src/weather/weather_model.dart

@@ -121,7 +121,7 @@ class WeatherModel extends SafeChangeNotifier {
   }
 
   List<WeatherData>? _fiveDaysForCast;
-  List<WeatherData> todayForeCast() {
+  List<WeatherData> get todayForeCast {
     if (_fiveDaysForCast == null) return [];
 
     final foreCast = _fiveDaysForCast!;