Skip to main content ppwriters


Day 14

Interactive UI

A StatefulWidget in Flutter is a widget that can change over time based on changes to its internal state. This enables developers to create interactive user interfaces where the display updates in response to user interactions or changes in the app’s data.

Project - Dice Roller

Build a Flutter app to roll a dice.

  • initially it should display a Roll Dice button
  • every time user taps on the button, it should update a dice variable with a random number between 1 and 6
  • use the value of dice variable to display the corresponding dice image


  • It’s a good practice to keep stateful widgets small and focused on a single responsibility. This makes the widget easier to understand, test, and maintain.

  • When you need to update the internal state of a stateful widget, use the setState() method. This method triggers a rebuild of the widget, updating its display based on the new state.

  • Here’s a simple example of a stateful widget that increments a counter every time the user taps on it:

class CounterWidget extends StatefulWidget {
  _CounterWidgetState createState() => _CounterWidgetState();

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {

  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _incrementCounter,
      child: Text('Counter: $_counter'),


Enjoying? Tell your friends.


Learn the basics of Flutter and Dart in 30 days! We provide a roadmap, resources, and project ideas to help you along your journey.

back to 30 Days to Master Flutter

Join our community on Discord to connect with fellow learners, share your progress, and get help with any questions you may have throughout the #30DaysMasterFlutter challenge. Join now and get started on your journey to mastering Dart and Flutter!

join now