diff --git a/lib/screens/weekplan_selector_screen.dart b/lib/screens/weekplan_selector_screen.dart index 524d664ee..a3d1fb5c0 100644 --- a/lib/screens/weekplan_selector_screen.dart +++ b/lib/screens/weekplan_selector_screen.dart @@ -12,6 +12,7 @@ import 'package:weekplanner/screens/new_weekplan_screen.dart'; import 'package:weekplanner/screens/weekplan_screen.dart'; import 'package:weekplanner/widgets/giraf_app_bar_widget.dart'; import 'package:weekplanner/widgets/giraf_confirm_dialog.dart'; +import 'package:weekplanner/widgets/weekyear_row_widget.dart'; /// Screen to select a weekplan for a given user class WeekplanSelectorScreen extends StatelessWidget { @@ -24,6 +25,7 @@ class WeekplanSelectorScreen extends StatelessWidget { final WeekplansBloc _weekBloc; final UsernameModel _user; + final AutoSizeGroup _weekYearGroup = AutoSizeGroup(); @override Widget build(BuildContext context) { @@ -141,23 +143,10 @@ class WeekplanSelectorScreen extends StatelessWidget { overflow: TextOverflow.ellipsis, ); })), - Container( - child: weekplan.weekNumber == null - ? null - : Expanded(child: LayoutBuilder(builder: - (BuildContext context, BoxConstraints constraints) { - return AutoSizeText( - 'Uge: ${weekplan.weekNumber} ' - 'År: ${weekplan.weekYear}', - key: const Key('weekYear'), - style: const TextStyle(fontSize: 18), - maxLines: 1, - minFontSize: 14, - textAlign: TextAlign.center, - overflow: TextOverflow.ellipsis, - ); - })), - ) + WeekYearRowWidget( + weekplan: weekplan, + autoSizeGroup: _weekYearGroup, + ), ], )), ); diff --git a/lib/widgets/weekyear_row_widget.dart b/lib/widgets/weekyear_row_widget.dart new file mode 100644 index 000000000..240f88cdf --- /dev/null +++ b/lib/widgets/weekyear_row_widget.dart @@ -0,0 +1,65 @@ +import 'package:api_client/models/week_model.dart'; +import 'package:auto_size_text/auto_size_text.dart'; +import 'package:flutter/material.dart'; + +/// Widget for rendering week and year for a week plan. +class WeekYearRowWidget extends StatelessWidget { + /// Renders week and year for [weekplan]. + /// Uses [autoSizeGroup] to make sure the font size + /// is consistent across weekplan cards. + const WeekYearRowWidget({ + Key key, + @required this.weekplan, + @required this.autoSizeGroup, + }) : super(key: key); + + /// The weekplan to show week and year for. + final WeekModel weekplan; + + /// The weekplan to show week and year for. + final AutoSizeGroup autoSizeGroup; + + @override + Widget build(BuildContext context) { + return Container( + child: weekplan.weekNumber == null + ? null + : Expanded( + child: Row( + children: [ + Expanded( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 4.0), + child: AutoSizeText( + 'Uge: ${weekplan.weekNumber}', + key: const Key('weekyear_week'), + style: const TextStyle(fontSize: 18), + maxLines: 1, + minFontSize: 8, + textAlign: TextAlign.center, + overflow: TextOverflow.ellipsis, + group: autoSizeGroup, + ), + ), + ), + Expanded( + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 4.0), + child: AutoSizeText( + 'År: ${weekplan.weekYear}', + key: const Key('weekyear_year'), + style: const TextStyle(fontSize: 18), + maxLines: 1, + minFontSize: 8, + textAlign: TextAlign.center, + overflow: TextOverflow.ellipsis, + group: autoSizeGroup, + ), + ), + ), + ], + ), + ), + ); + } +} diff --git a/test/screens/weekplan_selector_screen_test.dart b/test/screens/weekplan_selector_screen_test.dart index ee44ace84..923780460 100644 --- a/test/screens/weekplan_selector_screen_test.dart +++ b/test/screens/weekplan_selector_screen_test.dart @@ -142,8 +142,10 @@ void main() { .pumpWidget(MaterialApp(home: WeekplanSelectorScreen(mockUser))); await tester.pump(Duration.zero); - expect(find.text('Uge: 1 År: 2020'), findsNWidgets(2)); - expect(find.byKey(const Key('weekYear')), findsNWidgets(2)); + expect(find.text('Uge: 1'), findsNWidgets(2)); + expect(find.text('År: 2020'), findsNWidgets(2)); + expect(find.byKey(const Key('weekyear_year')), findsNWidgets(2)); + expect(find.byKey(const Key('weekyear_week')), findsNWidgets(2)); }); testWidgets('Click on edit icon toggles edit mode',