Variant icons in choice picker

lib/src/view/analysis/analysis_screen.dart

@@ -532,15 +532,7 @@ class _BottomBar extends ConsumerWidget {
                   )
                   .toList(),
               selectedItem: analysisState.variant,
-              labelBuilder: (Variant variant) => Text.rich(
-                TextSpan(
-                  children: [
-                    WidgetSpan(child: Icon(variant.icon), alignment: PlaceholderAlignment.middle),
-                    const WidgetSpan(child: SizedBox(width: 8)),
-                    TextSpan(text: variant.label),
-                  ],
-                ),
-              ),
+              labelBuilder: (variant) => VariantLabel(variant),
               onSelectedItemChanged: (Variant variant) =>
                   WidgetsBinding.instance.addPostFrameCallback((_) {
                     ref

lib/src/view/board_editor/board_editor_screen.dart

@@ -368,18 +368,7 @@ class _BottomBar extends ConsumerWidget {
                       )
                       .toList(),
                   selectedItem: editorState.variant,
-                  labelBuilder: (Variant variant) => Text.rich(
-                    TextSpan(
-                      children: [
-                        WidgetSpan(
-                          child: Icon(variant.icon),
-                          alignment: PlaceholderAlignment.middle,
-                        ),
-                        const WidgetSpan(child: SizedBox(width: 8)),
-                        TextSpan(text: variant.label),
-                      ],
-                    ),
-                  ),
+                  labelBuilder: (variant) => VariantLabel(variant),
                   onSelectedItemChanged: (Variant variant) {
                     if (variant != editorState.variant) {
                       ref.read(editorController.notifier).setVariant(variant);

lib/src/view/offline_computer/offline_computer_game_screen.dart

@@ -36,6 +36,7 @@ import 'package:lichess_mobile/src/widgets/misc.dart';
 import 'package:lichess_mobile/src/widgets/non_linear_slider.dart';
 import 'package:lichess_mobile/src/widgets/pgn.dart';
 import 'package:lichess_mobile/src/widgets/settings.dart';
+import 'package:lichess_mobile/src/widgets/variant_app_bar_title.dart';
 import 'package:lichess_mobile/src/widgets/yes_no_dialog.dart';
 
 extension _MoveVerdictDisplay on MoveVerdict {
@@ -850,7 +851,7 @@ class _NewGameSheetState extends ConsumerState<_NewGameSheet> {
                   context,
                   choices: playSupportedVariants.where((v) => v != Variant.fromPosition).toList(),
                   selectedItem: _selectedVariant,
-                  labelBuilder: (Variant variant) => Text(variant.label),
+                  labelBuilder: (variant) => VariantLabel(variant),
                   onSelectedItemChanged: (Variant variant) {
                     setState(() {
                       _selectedVariant = variant;

lib/src/view/over_the_board/configure_over_the_board_game.dart

@@ -16,6 +16,7 @@ import 'package:lichess_mobile/src/widgets/adaptive_choice_picker.dart';
 import 'package:lichess_mobile/src/widgets/list.dart';
 import 'package:lichess_mobile/src/widgets/non_linear_slider.dart';
 import 'package:lichess_mobile/src/widgets/settings.dart';
+import 'package:lichess_mobile/src/widgets/variant_app_bar_title.dart';
 
 void showConfigureGameSheet(
   BuildContext context, {
@@ -133,7 +134,7 @@ class _ConfigureOverTheBoardGameSheetState extends ConsumerState<_ConfigureOverT
                       .where((variant) => variant != Variant.fromPosition)
                       .toList(),
                   selectedItem: chosenVariant,
-                  labelBuilder: (Variant variant) => Text(variant.label),
+                  labelBuilder: (variant) => VariantLabel(variant),
                   onSelectedItemChanged: (Variant variant) => setState(() {
                     chosenVariant = variant;
                   }),

lib/src/view/play/create_challenge_bottom_sheet.dart

@@ -24,6 +24,7 @@ import 'package:lichess_mobile/src/widgets/expanded_section.dart';
 import 'package:lichess_mobile/src/widgets/feedback.dart';
 import 'package:lichess_mobile/src/widgets/non_linear_slider.dart';
 import 'package:lichess_mobile/src/widgets/user.dart';
+import 'package:lichess_mobile/src/widgets/variant_app_bar_title.dart';
 
 class CreateChallengeBottomSheet extends ConsumerStatefulWidget {
   const CreateChallengeBottomSheet(this.user, {this.positionFen});
@@ -239,7 +240,7 @@ class _CreateChallengeBottomSheetState extends ConsumerState<CreateChallengeBott
                     context,
                     choices: playSupportedVariants.toList(),
                     selectedItem: preferences.variant,
-                    labelBuilder: (Variant variant) => Text(variant.label),
+                    labelBuilder: (variant) => VariantLabel(variant),
                     onSelectedItemChanged: (Variant variant) {
                       ref.read(challengePreferencesProvider.notifier).setVariant(variant);
                     },

lib/src/view/play/create_correspondence_game_bottom_sheet.dart

@@ -16,6 +16,7 @@ import 'package:lichess_mobile/src/widgets/adaptive_bottom_sheet.dart';
 import 'package:lichess_mobile/src/widgets/adaptive_choice_picker.dart';
 import 'package:lichess_mobile/src/widgets/expanded_section.dart';
 import 'package:lichess_mobile/src/widgets/non_linear_slider.dart';
+import 'package:lichess_mobile/src/widgets/variant_app_bar_title.dart';
 
 class CreateCorrespondenceGameBottomSheet extends ConsumerStatefulWidget {
   const CreateCorrespondenceGameBottomSheet({super.key});
@@ -88,7 +89,7 @@ class _CreateGameBodyState extends ConsumerState<CreateCorrespondenceGameBottomS
                     context,
                     choices: [Variant.standard, Variant.chess960],
                     selectedItem: preferences.customVariant,
-                    labelBuilder: (Variant variant) => Text(variant.label),
+                    labelBuilder: (variant) => VariantLabel(variant),
                     onSelectedItemChanged: (Variant variant) {
                       ref.read(gameSetupPreferencesProvider.notifier).setCustomVariant(variant);
                     },

lib/src/view/play/create_game_widget.dart

@@ -14,6 +14,7 @@ import 'package:lichess_mobile/src/view/play/common_play_widgets.dart';
 import 'package:lichess_mobile/src/view/play/time_control_modal.dart';
 import 'package:lichess_mobile/src/widgets/adaptive_bottom_sheet.dart';
 import 'package:lichess_mobile/src/widgets/adaptive_choice_picker.dart';
+import 'package:lichess_mobile/src/widgets/variant_app_bar_title.dart';
 
 class CreateGameWidget extends ConsumerWidget {
   const CreateGameWidget();
@@ -97,7 +98,7 @@ class CreateGameWidget extends ConsumerWidget {
                             .where((v) => v != Variant.fromPosition)
                             .toList(),
                         selectedItem: playPrefs.customVariant,
-                        labelBuilder: (Variant variant) => Text(variant.label),
+                        labelBuilder: (variant) => VariantLabel(variant),
                         onSelectedItemChanged: (Variant variant) {
                           ref.read(gameSetupPreferencesProvider.notifier).setCustomVariant(variant);
                         },

lib/src/widgets/variant_app_bar_title.dart

@@ -2,6 +2,31 @@ import 'package:flutter/widgets.dart';
 import 'package:lichess_mobile/src/model/common/chess.dart';
 import 'package:lichess_mobile/src/widgets/misc.dart';
 
+/// A widget that displays a variant [Icon] followed by [variant.label], sized and colored to match
+/// the surrounding text style. Intended for use as a [labelBuilder] in [showChoicePicker].
+class VariantLabel extends StatelessWidget {
+  const VariantLabel(this.variant, {super.key});
+
+  final Variant variant;
+
+  @override
+  Widget build(BuildContext context) {
+    final style = DefaultTextStyle.of(context).style;
+    return Text.rich(
+      TextSpan(
+        children: [
+          WidgetSpan(
+            alignment: PlaceholderAlignment.middle,
+            child: Icon(variant.icon, size: style.fontSize, color: style.color),
+          ),
+          const WidgetSpan(child: SizedBox(width: 8)),
+          TextSpan(text: variant.label),
+        ],
+      ),
+    );
+  }
+}
+
 /// A widget that displays a [AppBarTitleText] preceded by an icon based on the variant type.
 class VariantAppBarTitle extends StatelessWidget {
   const VariantAppBarTitle({super.key, required this.variant, required this.title});

test/view/analysis/analysis_screen_test.dart

@@ -243,7 +243,7 @@ void main() {
       await tester.tap(find.text('Play against computer'));
       await tester.pumpAndSettle(); // wait for play menu to open
       // Variant we set previously should be preselected
-      expect(find.text('Atomic'), findsOneWidget);
+      expect(find.textContaining('Atomic'), findsOneWidget);
     });
 
     testWidgets('Continue OTB', (tester) async {

test/view/board_editor/board_editor_screen_test.dart

@@ -470,7 +470,7 @@ void main() {
       await tester.tap(find.text('Over the board'));
       await tester.pumpAndSettle(); // wait for over the board menu to open
       // Variant we set previously should be preselected
-      expect(find.text('Atomic'), findsOneWidget);
+      expect(find.textContaining('Atomic'), findsOneWidget);
     });
   });
 }

test/view/over_the_board/over_the_board_screen_test.dart

@@ -477,9 +477,9 @@ void main() {
       await tester.pumpAndSettle();
 
       // Change variant to Chess960
-      await tester.tap(find.text('Standard'));
+      await tester.tap(find.textContaining('Standard'));
       await tester.pumpAndSettle();
-      await tester.tap(find.text('Atomic'));
+      await tester.tap(find.textContaining('Atomic'));
       await tester.pumpAndSettle();
 
       await tester.tap(find.text('Play'));