Fix course color picker (#671)

As in #670 shown was the course color picker broken. The issue for this
was that `size` was null for the default colors.

I also added a golden test to verify that the dialog is rendered
correctly.


![image](https://github.com/SharezoneApp/sharezone-app/assets/24459435/954f3d2a-e32a-45b3-a9c8-02ce53b1efaf)

Fixes #670

app/lib/groups/src/pages/course/course_edit/design/course_edit_design.dart

@@ -33,7 +33,7 @@ Future<void> editCourseDesign(BuildContext context, String courseId) async {
  if (selectTypePopResult != null) {
  final initalDesign = selectTypePopResult.initialDesign;
 
- final selectDesignPopResult = await _selectDesign(context, initalDesign,
+ final selectDesignPopResult = await selectDesign(context, initalDesign,
  type: selectTypePopResult.editDesignType);
 
  if (selectDesignPopResult != null) {

app/lib/groups/src/pages/course/course_edit/design/src/dialog/select_design_dialog.dart

@@ -21,7 +21,8 @@ class _SelectDesignPopResult {
 }
 
 /// [bottomAction] will be displayed at the bottom of the dialog, e. g. a back button.
-Future<_SelectDesignPopResult> _selectDesign(
+@visibleForTesting
+Future<_SelectDesignPopResult> selectDesign(
  BuildContext context, Design currentDesign,
  {_EditDesignType type}) async {
  return await showDialog<_SelectDesignPopResult>(
@@ -115,27 +116,33 @@ class _Colors extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
- return Wrap(
- spacing: 10,
- runSpacing: 10,
+ return Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
  children: [
  _BackToSelectTypeButton(),
- ...Design.designList
- .sublist(0, 7)
- .map((design) => _ColorCircleSelectDesign(
- design: design, isSelected: _isDesignSelected(design)))
- .toList(),
- ...Design.designList
- .sublist(7)
- .map(
- (design) => _ColorCircleSelectDesign(
- design: design,
- isSelected: _isDesignSelected(design),
- hasPermission: isFullColorSetUnlocked,
- size: 50,
- ),
- )
- .toList()
+ const SizedBox(height: 16),
+ Wrap(
+ spacing: 10,
+ runSpacing: 10,
+ children: [
+ ...Design.designList
+ .sublist(0, 7)
+ .map((design) => _ColorCircleSelectDesign(
+ design: design, isSelected: _isDesignSelected(design)))
+ .toList(),
+ ...Design.designList
+ .sublist(7)
+ .map(
+ (design) => _ColorCircleSelectDesign(
+ design: design,
+ isSelected: _isDesignSelected(design),
+ hasPermission: isFullColorSetUnlocked,
+ size: 50,
+ ),
+ )
+ .toList()
+ ],
+ ),
  ],
  );
  }
@@ -149,7 +156,7 @@ class _ColorCircleSelectDesign extends StatelessWidget {
  @required this.design,
  this.isSelected = false,
  this.hasPermission = true,
- this.size,
+ this.size = 50,
  }) : super(key: key);
 
  final Design design;

app/test_goldens/groups/src/pages/course/course_edit/design/src/dialog/select_design_dialog_test.dart

@@ -0,0 +1,55 @@
+// Copyright (c) 2022 Sharezone UG (haftungsbeschränkt)
+// Licensed under the EUPL-1.2-or-later.
+//
+// You may obtain a copy of the Licence at:
+// https://joinup.ec.europa.eu/software/page/eupl
+//
+// SPDX-License-Identifier: EUPL-1.2
+
+import 'package:bloc_provider/bloc_provider.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:golden_toolkit/golden_toolkit.dart';
+import 'package:sharezone/account/features/features_bloc.dart';
+import 'package:sharezone/groups/src/pages/course/course_edit/design/course_edit_design.dart';
+
+class MockFeatureBloc implements FeatureBloc {
+ @override
+ void dispose() {}
+
+ @override
+ Stream<bool> get isAllColorsUnlocked => Stream.value(true);
+}
+
+void main() {
+ group('selectDesign', () {
+ testGoldens('display select design dialog as expected', (tester) async {
+ await tester.pumpWidget(
+ BlocProvider<FeatureBloc>(
+ bloc: MockFeatureBloc(),
+ child: MaterialApp(
+ home: Scaffold(
+ body: Center(
+ child: Builder(builder: (context) {
+ return ElevatedButton(
+ // @visibleForTesting is not working for our `test_goldens`
+ // folder. Therefore we have to ignore the warning.
+ //
+ // ignore: invalid_use_of_visible_for_testing_member
+ onPressed: () => selectDesign(context, null),
+ child: Text("Select"),
+ );
+ }),
+ ),
+ ),
+ ),
+ ),
+ );
+
+ await tester.tap(find.byType(ElevatedButton));
+ await tester.pumpAndSettle();
+
+ await screenMatchesGolden(tester, 'select_design_dialog');
+ });
+ });
+}