Merge pull request #67 from flixcoo/bug/66-segmented-control-wont-show-long-names-correctly

Segmented control wont show long names correctly

devtools_options.yaml

@@ -0,0 +1,3 @@
+description: This file stores settings for Dart & Flutter DevTools.
+documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states
+extensions:

lib/data/game_session.dart

@@ -72,11 +72,13 @@ class GameSession extends ChangeNotifier {
         roundList =
             (json['roundList'] as List).map((e) => Round.fromJson(e)).toList();
 
-  /// Returns the length of all player names combined.
-  int getLengthOfPlayerNames() {
+  /// Returns the length of the longest player name.
+  int getMaxLengthOfPlayerNames() {
     int length = 0;
     for (String player in players) {
-      length += player.length;
+      if (player.length >= length) {
+        length = player.length;
+      }
     }
     return length;
   }

lib/views/create_game_view.dart

@@ -183,6 +183,7 @@ class _CreateGameState extends State<CreateGame> {
                           Expanded(
                             child: CupertinoTextField(
                               controller: _playerNameTextControllers[index],
+                              maxLength: 12,
                               placeholder:
                                   '${AppLocalizations.of(context).player} ${index + 1}',
                               padding: const EdgeInsets.all(12),

lib/views/round_view.dart

@@ -67,6 +67,7 @@ class _RoundViewState extends State<RoundView> {
   @override
   Widget build(BuildContext context) {
     final bottomInset = MediaQuery.of(context).viewInsets.bottom;
+    final maxLength = widget.gameSession.getMaxLengthOfPlayerNames();
 
     return CupertinoPageScaffold(
       resizeToAvoidBottomInset: false,
@@ -122,28 +123,21 @@ class _RoundViewState extends State<RoundView> {
                               index,
                               Padding(
                                 padding: EdgeInsets.symmetric(
-                                  horizontal: widget.gameSession
-                                              .getLengthOfPlayerNames() >
-                                          20
-                                      ? (widget.gameSession
-                                                  .getLengthOfPlayerNames() >
-                                              32
-                                          ? 5
-                                          : 10)
-                                      : 15,
+                                  horizontal: 4 +
+                                      _getSegmentedControlPadding(maxLength),
                                   vertical: 6,
                                 ),
-                                child: Text(
-                                  name,
-                                  textAlign: TextAlign.center,
-                                  maxLines: 1,
-                                  style: TextStyle(
-                                    fontWeight: FontWeight.bold,
-                                    fontSize: widget.gameSession
-                                                .getLengthOfPlayerNames() >
-                                            28
-                                        ? 14
-                                        : 18,
+                                child: FittedBox(
+                                  fit: BoxFit.scaleDown,
+                                  child: Text(
+                                    name,
+                                    textAlign: TextAlign.center,
+                                    maxLines: 1,
+                                    style: TextStyle(
+                                      fontWeight: FontWeight.bold,
+                                      fontSize: _getSegmentedControlFontSize(
+                                          maxLength),
+                                    ),
                                   ),
                                 ),
                               ),
@@ -191,7 +185,13 @@ class _RoundViewState extends State<RoundView> {
                             borderRadius: BorderRadius.circular(12),
                             child: CupertinoListTile(
                               backgroundColor: CupertinoColors.secondaryLabel,
-                              title: Row(children: [Text(name)]),
+                              title: Row(children: [
+                                Expanded(
+                                    child: Text(
+                                  name,
+                                  overflow: TextOverflow.ellipsis,
+                                ))
+                              ]),
                               subtitle: Text(
                                   '${widget.gameSession.playerScores[index]}'
                                   ' ${AppLocalizations.of(context).points}'),
@@ -395,6 +395,32 @@ class _RoundViewState extends State<RoundView> {
     }
   }
 
+  double _getSegmentedControlFontSize(int maxLength) {
+    if (maxLength > 8) {
+      // 9 - 12 characters
+      return 9.0;
+    } else if (maxLength > 4) {
+      // 5 - 8 characters
+      return 15.0;
+    } else {
+      // 0 - 4 characters
+      return 18.0;
+    }
+  }
+
+  double _getSegmentedControlPadding(int maxLength) {
+    if (maxLength > 8) {
+      // 9 - 12 characters
+      return 0.0;
+    } else if (maxLength > 4) {
+      // 5 - 8 characters
+      return 5.0;
+    } else {
+      // 0 - 4 characters
+      return 8.0;
+    }
+  }
+
   @override
   void dispose() {
     for (final controller in _scoreControllerList) {

pubspec.yaml

@@ -2,7 +2,7 @@ name: cabo_counter
 description: "Mobile app for the card game Cabo"
 publish_to: 'none'
 
-version: 0.3.2+245
+version: 0.3.3+256
 
 environment:
   sdk: ^3.5.4

test/data/game_session_test.dart

@@ -61,9 +61,8 @@ void main() {
   });
 
   group('Helper Functions', () {
-    test('getLengthOfPlayerNames', () {
-      expect(session.getLengthOfPlayerNames(),
-          equals(15)); // Alice(5) + Bob(3) + Charlie(7)
+    test('getMaxLengthOfPlayerNames', () {
+      expect(session.getMaxLengthOfPlayerNames(), equals(7)); // Charlie (7)
     });
 
     test('increaseRound', () {