✨ feat(musical_cryptogram): add new section (#12)

* feat(musical_cryptogram): add new section

* chore(pubspec): depend on `music_notes` 0.11.1

lib/widgets/alphabet_letter.dart → lib/widgets/alphabet/letter_card.dart

@@ -1,12 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:note_names/utils/int_extension.dart';
 
-class AlphabetLetter extends StatelessWidget {
+class LetterCard extends StatelessWidget {
   final String letter;
   final int? value;
   final bool isDimmed;
 
-  const AlphabetLetter({
+  const LetterCard({
     super.key,
     required this.letter,
     this.value,

lib/widgets/name_labels.dart → lib/widgets/alphabet/letter_cards.dart

@@ -1,11 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:note_names/model/name.dart';
-import 'package:note_names/widgets/alphabet_letter.dart';
+import 'package:note_names/widgets/alphabet/letter_card.dart';
 
-class NameLabels extends StatelessWidget {
+class LetterCards extends StatelessWidget {
   final Name name;
 
-  const NameLabels({super.key, required this.name});
+  const LetterCards({super.key, required this.name});
 
   @override
   Widget build(BuildContext context) {
@@ -19,7 +19,7 @@ class NameLabels extends StatelessWidget {
             if (character == ' ')
               const SizedBox(width: 24)
             else
-              AlphabetLetter(
+              LetterCard(
                 letter: character,
                 value: name.alphabet.numericValueOfLetter(character),
                 isDimmed: !name.alphabet.containsLetter(character),

lib/widgets/musical_cryptogram/cryptogram_scheme_dropdown.dart

@@ -0,0 +1,81 @@
+import 'package:flutter/material.dart';
+import 'package:note_names/model/cryptogram_scheme.dart';
+import 'package:note_names/model/name.dart';
+
+class CryptogramSchemeDropdown extends StatelessWidget {
+  final Name name;
+  final void Function(CryptogramScheme?)? onSchemeChanged;
+
+  const CryptogramSchemeDropdown({
+    super.key,
+    required this.name,
+    this.onSchemeChanged,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsetsDirectional.only(top: 16),
+      child: Align(
+        alignment: AlignmentDirectional.topStart,
+        child: DropdownButtonFormField(
+          items: [
+            for (final scheme in CryptogramScheme.schemes)
+              DropdownMenuItem(
+                key: ValueKey(scheme.name),
+                value: scheme,
+                child: _CryptogramSchemeDropdownMenuItem(
+                  name: name,
+                  scheme: scheme,
+                ),
+              ),
+          ],
+          value: const CryptogramScheme.german(),
+          onChanged: onSchemeChanged,
+          decoration: const InputDecoration.collapsed(hintText: 'Scheme'),
+        ),
+      ),
+    );
+  }
+}
+
+class _CryptogramSchemeDropdownMenuItem extends StatelessWidget {
+  final Name name;
+  final CryptogramScheme scheme;
+
+  const _CryptogramSchemeDropdownMenuItem({
+    super.key,
+    required this.name,
+    required this.scheme,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return DropdownMenuItem(
+      value: scheme,
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            scheme.name,
+            style: TextStyle(
+              color: theme.colorScheme.primary,
+              fontSize: 14,
+            ),
+          ),
+          const SizedBox(width: 14),
+          Text(
+            scheme.cryptogramOf(name.name).join('–'),
+            style: TextStyle(
+              color: theme.colorScheme.primary.withOpacity(0.6),
+              fontSize: 14,
+              fontWeight: FontWeight.w400,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/musical_cryptogram/cryptogram_section.dart

@@ -0,0 +1,82 @@
+import 'package:flutter/material.dart';
+import 'package:note_names/model/name.dart';
+import 'package:note_names/widgets/musical_cryptogram/cryptogram_scheme_dropdown.dart';
+import 'package:note_names/widgets/musical_cryptogram/note_cards.dart';
+import 'package:note_names/widgets/name_section_text_field.dart';
+import 'package:note_names/widgets/name_section_value.dart';
+
+class CryptogramSection extends StatefulWidget {
+  final Name name;
+
+  const CryptogramSection({super.key, required this.name});
+
+  @override
+  State<CryptogramSection> createState() => _CryptogramSectionState();
+}
+
+class _CryptogramSectionState extends State<CryptogramSection> {
+  late Name _name = widget.name;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final color = theme.colorScheme.primary;
+    const contentPadding = EdgeInsetsDirectional.only(
+      start: 36,
+      top: 12,
+      end: 320,
+      bottom: 12,
+    );
+
+    return Container(
+      decoration: BoxDecoration(
+        color: color.withOpacity(0.1),
+        border: Border(
+          bottom: BorderSide(color: color.withOpacity(0.4), width: 2),
+        ),
+      ),
+      clipBehavior: Clip.antiAlias,
+      child: Stack(
+        children: [
+          Align(
+            alignment: AlignmentDirectional.centerEnd,
+            child: Container(
+              padding: const EdgeInsetsDirectional.only(end: 36),
+              width: MediaQuery.of(context).size.width / 4,
+              child: NameSectionValue(value: _name.numericValue),
+            ),
+          ),
+          Center(
+            child: FittedBox(
+              child: Padding(
+                padding: contentPadding,
+                child: NoteCards(name: _name),
+              ),
+            ),
+          ),
+          NameSectionTextField(
+            name: _name.name,
+            contentPadding: contentPadding,
+            onChanged: (value) {
+              setState(() {
+                _name = _name.copyWith(name: value);
+              });
+            },
+          ),
+          Container(
+            width: 250,
+            margin: const EdgeInsetsDirectional.only(start: 36),
+            child: CryptogramSchemeDropdown(
+              name: _name,
+              onSchemeChanged: (scheme) {
+                setState(() {
+                  _name = _name.copyWith(scheme: scheme);
+                });
+              },
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/musical_cryptogram/note_card.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+import 'package:music_notes/music_notes.dart';
+
+class NoteCard extends StatelessWidget {
+  final Note note;
+
+  const NoteCard({super.key, required this.note});
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final onPrimary = theme.colorScheme.primary.withOpacity(0.8);
+
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 4),
+      child: Material(
+        elevation: 1.5,
+        color: Colors.white,
+        borderRadius: const BorderRadius.all(Radius.circular(12)),
+        child: Container(
+          padding: const EdgeInsets.symmetric(
+            vertical: 12,
+            horizontal: 18,
+          ),
+          decoration: const BoxDecoration(
+            borderRadius: BorderRadius.all(Radius.circular(12)),
+          ),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text(
+                '$note',
+                style: theme.textTheme.displayLarge?.copyWith(
+                  fontWeight: FontWeight.w300,
+                  color: onPrimary,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/musical_cryptogram/note_cards.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:note_names/model/name.dart';
+import 'package:note_names/widgets/musical_cryptogram/note_card.dart';
+
+class NoteCards extends StatelessWidget {
+  final Name name;
+
+  const NoteCards({super.key, required this.name});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Wrap(
+        alignment: WrapAlignment.center,
+        runSpacing: 8,
+        crossAxisAlignment: WrapCrossAlignment.end,
+        children: [
+          for (final note in name.musicalCryptogram) NoteCard(note: note),
+        ],
+      ),
+    );
+  }
+}