diff --git a/images/8-ball-flutter-gif.gif b/images/8-ball-flutter-gif.gif new file mode 100644 index 0000000..5f6c9ea Binary files /dev/null and b/images/8-ball-flutter-gif.gif differ diff --git a/posts/04_8_ball.md b/posts/04_8_ball.md new file mode 100644 index 0000000..f117d24 --- /dev/null +++ b/posts/04_8_ball.md @@ -0,0 +1,185 @@ +--- +title: "Flutter 8 Ball Project Study Guide" +tags: + - project-04 +--- + +# Magic 8 Ball Flutter Project Study Guide + +## 1. Project Overview + +The Magic 8 Ball project is a simple Flutter application that simulates a magic 8 ball toy. When the user taps the screen, the app displays a random answer image, mimicking the experience of shaking a physical magic 8 ball for answers to yes-or-no questions. + +Main features: +- Interactive UI with a single-screen layout +- Random answer generation +- Image-based responses +- Stateful widget implementation for dynamic content + +## 2. Key Components Analysis + +### Breakdown of main.dart file + +The `main.dart` file contains two main parts: +1. The `main()` function, which is the entry point of the application +2. The `Magic8` widget and its state class `_Magic88State` + +### Entry point explanation + +```dart +void main() { + runApp(MaterialApp( + home: Scaffold( + backgroundColor: Colors.blueGrey, + appBar: AppBar( + title: Text( + 'Ask Me Anything', + style: TextStyle( + color: Colors.white, + ), + ), + centerTitle: true, + backgroundColor: Colors.blue, + ), + body: Magic8(), + ), + )); +} +``` + +The `main()` function calls `runApp()` with a `MaterialApp` widget. This sets up the basic structure of the app, including: +- A `Scaffold` widget for the app's overall layout +- An `AppBar` with the title "Ask Me Anything" +- The `Magic8` widget as the body of the app + +### Main widget structure + +The app uses a `StatefulWidget` called `Magic8`: + +```dart +class Magic8 extends StatefulWidget { + const Magic8({super.key}); + + @override + State createState() => _Magic88State(); +} + +class _Magic88State extends State { + // State management and build method +} +``` + +This structure allows the app to maintain and update its state (the current answer number) when the user interacts with it. + +## 3. Widget Tree Visualization + +```mermaid +graph TD + A[MaterialApp] --> B[Scaffold] + B --> C[AppBar] + B --> D[Magic8 StatefulWidget] + D --> E[_Magic88State] + E --> F[Center] + F --> G[TextButton] + G --> H[Image.asset] +``` + +## 4. Key Widgets and Their Purposes + +1. `MaterialApp`: Provides the overall structure and theme for the app. +2. `Scaffold`: Implements the basic material design layout structure. +3. `AppBar`: Displays the app title at the top of the screen. +4. `Magic8` (StatefulWidget): Manages the state of the magic 8 ball. +5. `Center`: Aligns its child widget (the 8 ball image) to the center of the screen. +6. `TextButton`: Detects user taps and triggers the state update. +7. `Image.asset`: Displays the current 8 ball answer image. + +## 5. State Management + +The app uses a `StatefulWidget` to manage its state: + +```dart +class _Magic88State extends State { + int answerNumber = 1; + + void shake8Ball() { + setState(() { + answerNumber = Random().nextInt(5) + 1; + }); + } + + // build method +} +``` + +- The `answerNumber` variable represents the current state. +- The `shake8Ball()` method updates the state by generating a random number between 1 and 5. +- `setState()` is called to notify the framework that the state has changed, triggering a rebuild of the UI. + +## 6. Styling and Customization + +The app uses a simple styling approach: +- The background color is set to `Colors.blueGrey` in the `Scaffold`. +- The `AppBar` has a blue background and white text. +- The main content (8 ball image) is centered on the screen. + +No custom widgets or complex styles are used in this project. + +## 7. Layout Techniques + +The app uses a straightforward layout: +- `Scaffold` provides the overall structure. +- `Center` widget ensures the 8 ball image is centered on the screen. +- `TextButton` wraps the image to make the entire area tappable. + +## 8. Asset Management + +Assets are declared in the `pubspec.yaml` file: + +```yaml +flutter: + uses-material-design: true + + assets: + - images/ +``` + +This configuration tells Flutter to include all files in the `images/` directory as assets. + +In the code, assets are used with the `Image.asset()` widget: + +```dart +Image.asset('images/ball$answerNumber.png') +``` + +The `$answerNumber` is interpolated into the asset path to display the correct image based on the current state. + +## 9. Learning Outcomes + +Key Flutter/Dart concepts demonstrated in this project: +1. Stateful Widget implementation +2. Basic state management using `setState()` +3. Random number generation +4. Asset management and usage +5. Event handling with `TextButton` +6. String interpolation in Dart +7. Basic Flutter app structure (MaterialApp, Scaffold, AppBar) + +## Finished App + +![Finished App](../images/8-ball-flutter-gif.gif) + +## 10. Exercises to Reinforce Learning + +1. Add a text display below the 8 ball image to show a textual representation of the answer. +2. Implement an animation when changing the 8 ball image (e.g., a fade or rotation effect). +3. Add a reset button that sets the 8 ball back to its initial state. +4. Create a custom app theme and apply it to the MaterialApp widget. +5. Implement a counter to track how many times the user has shaken the 8 ball, displaying it in the AppBar. + +## 11. Additional Resources + +- [Flutter StatefulWidget documentation](https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html) +- [Flutter asset management guide](https://flutter.dev/docs/development/ui/assets-and-images) +- [Dart Random class documentation](https://api.dart.dev/stable/2.16.2/dart-math/Random-class.html) +- [Flutter layout tutorial](https://flutter.dev/docs/development/ui/layout/tutorial) \ No newline at end of file