Do Widgets tutorial (#1)

2026-06-04 17:59:48 +02:00
parent 2ba63a4f0e
commit c7e80406b1
8 changed files with 460 additions and 20 deletions
--- a/src/main.dart
+++ b/src/main.dart
@@ -0,0 +1,138 @@
+import 'package:flutter/material.dart';
+import 'game.dart';
+import 'tutFun.dart';
+
+void main() {
+    runApp(const MainApp());
+}
+
+class GamePage extends StatefulWidget {
+    GamePage({super.key});
+
+    @override State<GamePage> createState() => GamePageState();
+}
+    
+class GamePageState extends State<GamePage> {
+    final Game _game = Game();
+
+    @override
+    Widget build(BuildContext context) {
+        return Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Column(
+                spacing: 5.0,
+                children: [
+                    for (final guess in _game.guesses)
+                        Row(
+                            spacing: 5.0,
+                            children: [
+                                for (final letter in guess)
+                                    Tile(letter.char, letter.type)
+                            ],
+                        ),
+                    GuessInput(
+                        onSubmitGuess: (guess) {
+                            /**/print(guess);
+                            setState(() {
+                                _game.guess(guess);
+                            });
+                        }
+                    ),
+                ],
+            ),
+        );
+    }
+}
+
+class GuessInput extends StatelessWidget {
+    GuessInput({super.key, required this.onSubmitGuess});
+
+    final FocusNode _focusNode = FocusNode();
+    final void Function(String) onSubmitGuess;
+    final TextEditingController _textEditingController = TextEditingController();
+
+    @override
+    Widget build(BuildContext context) {
+        return Row(
+            children: [
+                Expanded(
+                    child: Padding(
+                        child: TextField(
+                            autofocus: true,
+                            controller: _textEditingController,
+                            decoration: InputDecoration(
+                                border: OutlineInputBorder(
+                                    borderRadius: BorderRadius.all(Radius.circular(35)),
+                                ),
+                            ),
+                            focusNode: _focusNode,
+                            maxLength: 5,
+                            onSubmitted: (_) {
+                                processSubmit();
+                            },
+                        ),
+                        padding: const EdgeInsets.all(8.0),
+                    ),
+                ),
+                IconButton(
+                    icon: const Icon(Icons.arrow_circle_up),
+                    onPressed: () {
+                        processSubmit();
+                    },
+                    padding: EdgeInsets.zero,
+                ),
+            ]
+        );
+    }
+
+    void processSubmit() {
+        onSubmitGuess(_textEditingController.text.trim());
+        _textEditingController.clear();
+        _focusNode.requestFocus();
+    }
+}
+
+class MainApp extends StatelessWidget {
+    const MainApp({super.key});
+
+    @override
+    Widget build(BuildContext context) {
+        return MaterialApp(
+            home: Scaffold(
+                appBar: AppBar(
+                    title: Align(
+                        alignment: Alignment.centerLeft,
+                        child: Text("Birdle"),
+                    ),
+                ),
+                body: Center(child: GamePage()),
+            ),
+        );
+    }
+}
+
+class Tile extends StatelessWidget {
+    const Tile(this.letter, this.hitType, {super.key});
+
+    final String letter;
+    final HitType hitType;
+
+    @override
+    Widget build(BuildContext context) {
+        return AnimatedContainer(
+            child: Center(
+                child: Text(
+                    letter.toUpperCase(),
+                    style: Theme.of(context).textTheme.titleLarge,
+                ),
+            ),
+            decoration: BoxDecoration(
+                border: Border.all(color: Colors.grey.shade300),
+                color: tutTileColor(hitType),
+            ),
+            duration: Duration(milliseconds: 300),
+            height: 60,
+            width: 60,
+        );
+    }
+}