🎲 DiceRoller

A beginner-friendly Flutter app that rolls a dice and displays the result as an asset image. I built it for learning flutter. It demonstrates stateful UI, custom reusable widgets, and an optional liquid-glass button effect.

✨ Features

• Dice rolling: tap the button to generate a random result (1–6) and display the matching face image.
• Asset-based UI: each face is a crisp .png image, swapped out via setState.
• StyledText widget: reusable text component with consistent styling across the app.
• Configurable button: clean, customisable roll button with flexible appearance options.
• Optional Liquid Glass effect: wrap the button in LiquidGlassLayer / LiquidGlass for a glossy, frosted appearance.

---

📸 Screenshots

Add screenshots here once you have them — one for iOS and one for Android.

---

🚀 Getting Started

Prerequisites

• Flutter SDK (3.x or later)
• Dart 3.x (bundled with Flutter)
• A connected device or emulator

Installation

git clone https://github.com/Fire207/DiceRoller.git
cd DiceRoller
flutter pub get
flutter run

To run on a specific platform:

flutter run -d ios       # iOS Simulator or device
flutter run -d android   # Android Emulator or device

---

📁 Project Structure

DiceRoller/
├── lib/
│   ├── main.dart              # App entry point
│   ├── dice_roller.dart       # Main stateful widget & roll logic
│   ├── styled_text.dart       # Reusable StyledText widget
│   └── gradient_container.dart # Background container widget
├── assets/
│   └── images/
│       ├── dice-1.png
│       ├── dice-2.png
│       ├── dice-3.png
│       ├── dice-4.png
│       ├── dice-5.png
│       └── dice-6.png
├── pubspec.yaml
└── README.md

---

⚙️ Configuration

Registering Assets

Make sure all dice images are declared in pubspec.yaml:

flutter:
  assets:
    - assets/images/dice-1.png
    - assets/images/dice-2.png
    - assets/images/dice-3.png
    - assets/images/dice-4.png
    - assets/images/dice-5.png
    - assets/images/dice-6.png

Or use a folder shorthand:

flutter:
  assets:
    - assets/images/

Enabling the Liquid Glass Effect

1. Add the package to pubspec.yaml:

dependencies:
  liquid_glass: ^x.x.x   # replace with latest version

2. Run flutter pub get.

3. In your widget tree, wrap the roll button:

LiquidGlassLayer(
  child: LiquidGlass(
    child: ElevatedButton(
      onPressed: _rollDice,
      child: const Text('Roll'),
    ),
  ),
)

---

🏗️ How It Works

Rolling the dice updates the UI via Flutter's setState:

void _rollDice() {
  setState(() {
    currentDiceRoll = Random().nextInt(6) + 1;
  });
}

The displayed image is derived from the current roll value:

Image.asset('assets/images/dice-$currentDiceRoll.png')

---

🧪 Tests

No tests are included yet. When you add them:

flutter test              # Run all unit and widget tests
flutter test --coverage   # Generate a coverage report

Consider adding a widget test that verifies the image path updates correctly after a simulated tap.

---

📚 Resources

• Flutter – Write your first app
• Flutter Cookbook
• Dart Language Tour
• setState and StatefulWidget

---

🪪 License

This project is licensed under the MIT License.

---

First Flutter project — built to learn stateful widgets and asset management. 🎉