DEV Community: Ratratatyu

Dev Challenge. Solo Learning — Gamified Productivity Tracker

Ratratatyu — Sun, 01 Mar 2026 17:30:48 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

This project inspired by observing how quickly motivation can drop among my peers—not just in programming, but in other activities as well. Many people struggle to see the results of their efforts immediately, which often makes it hard to stay consistent. I wanted to create a tool that helps users track their time spent on tasks or learning sessions, while also giving instant feedback and a sense of progression.

What I Built

I built Solo Learning, an app that gamifies productivity and learning. Users can set timers for their tasks, and after completing each timer, they earn XP (experience points) and level up—similar to a game. This system allows users to visually see their progress and stay motivated, even for tasks that take time or effort to complete.

This is an MVP version, and while I had many more ideas for features like multiple timers, progress charts, and advanced analytics, I was limited by the two-day timeframe and my current level of experience with Flutter. Despite these limitations, I focused on creating a working prototype that clearly demonstrates the core concept of motivating users through visualized progress and gamification.

Demo

This is a main screen. Here you can see your level, how much xp you need before the next one, and a motivational block (it was planned to make a diagram there to show how much time was spent, but I didn’t have time to implement it)

This is a screen with a timer. After the timer ends, the user receives xp

This is a congratulations screen where it is indicated that the user has earned 50 xp

This is the level up congratulations screen.

Code

The project is available on GitHub: (https://github.com/RatRatatyu/SoloLearningApp)

How I Built It

I built this project entirely in Flutter, using Provider for state management. I focused on creating a clean and responsive interface with interactive components like timers, progress indicators, and level-up notifications. The gamification elements were designed to be simple yet engaging, allowing users to see immediate rewards for completing tasks.


class stateProvider extends ChangeNotifier{
  bool isLevelUp = false;
  int levelNow = 1;
  late int nextLevelXp = 100;
  int totalXpNow = 0;

  void levelUp(){
    levelNow++;
    isLevelUp = true;
    nextLevelXp = levelNow * 100;
    notifyListeners();
  }

  void resetLevelUp(){
    isLevelUp = false;
    notifyListeners();
  }

  void xpUp(int xp){
    totalXpNow += xp;
    if (totalXpNow >= nextLevelXp){
      totalXpNow -= nextLevelXp;
      levelUp();
    }
    notifyListeners();
  }

}

I created a stateProvider class that handles XP, levels, and level-up logic. Functions like xpUp(), levelUp(), and resetLevelUp() manage the user’s progress. This way, all the core data is centralized and easy to track.

final isLevelUp = context.select((stateProvider p) => p.isLevelUp);
    if (isLevelUp) {
      WidgetsBinding.instance.addPostFrameCallback((_) async {
        await Navigator.push(
          context,
          MaterialPageRoute(builder: (_) => levelUpWidget()),
        );
        if (!context.mounted) return;

        context.read<stateProvider>().resetLevelUp();
      });
    }

On the main screen, I monitor whether the provider has been updated and whether the level has increased, which would show a screen with rewards

timer = Timer.periodic(const Duration(seconds: 1), (t) {
      if (remainingTime.inSeconds > 0) {
        setState(() {
          remainingTime -= const Duration(seconds: 1);
        });
      } else {
        t.cancel();
        setState(() {
          isRunning = false;
        });
        Navigator.push(context, MaterialPageRoute(builder: (context)=> xpUpWidget()));
      }
    });
  }

After the timer has expired I show the user a screen to increase xp

Also, pictures with cats were created using AI

Although this is my first submission to a challenge like this, it has been an invaluable learning experience. I now understand more clearly the areas where I need to improve and the tools I want to explore further. I plan to continue developing this app beyond the competition, adding features such as multiple timers, progress charts, more interactive animations, and overall polish for a future release.

I also want to wish good luck to all other participants! For me, the main goal was not only competing but testing my skills, learning, and gaining experience, and I look forward to participating in similar challenges in the future.

Flutter for Beginners: Where to Start?

Ratratatyu — Sun, 22 Feb 2026 17:13:18 +0000

Who this article is for: for those who are just starting their journey in Flutter framework development

Hello everyone! This is an introductory guide to Flutter. We will cover the basic concepts and break down the code that Flutter generates when creating a new project. I started mobile app development with Flutter — without knowing architecture and without experience in Kotlin or Swift. Only later, when I figured out the basics, did I move on to native development. I can say: if you already write in Kotlin or Swift, it will be very easy for you. And vice versa — Flutter will simplify learning native development.

What is Flutter?

Flutter is a cross-platform framework from Google. In simple terms: we write one code and can run the application on Android, iOS, Web, and other platforms. Development is done in the Dart language, which is also created by Google. It's important to understand: Flutter is not just a library, but a full-fledged UI engine that renders the interface itself.

First, let's discuss what I consider the most important part — architecture. Flutter uses its own rendering engine, unlike React Native, which renders native platform components. In Flutter, there is the ability to call native code through platform channels, but personally, I haven't encountered situations where this was necessary — the framework covers the vast majority of tasks. During development, you have access to two sets of widgets:

Cupertino — for iOS style
Material — for Android style

You may know that Android and iOS have different interface patterns and animations. The human brain gets used to consistency: a user who has been on Android for years won't immediately figure out iOS. Therefore, when developing, it's important to consider user comfort and adapt the UI for both platforms.

Widgets

When you open the Flutter documentation, you'll see the phrase: "In Flutter, everything is a widget." A class, text, button — absolutely everything is a widget. But behind this simple statement lies a complex architecture of three trees:

Widget Tree — the widget tree. Lives briefly, serves to describe the UI configuration.
Element Tree — the element tree. Lives longer, links widgets to their render objects. When a widget is recreated, the element persists and monitors its widget.
Render Object Tree — the rendering tree. This is where the actual drawing on the screen happens.

Flutter uses a declarative approach: we describe what the UI should look like, and the rendering tree handles the drawing.

Analizing code

Let's look at the code that is offered to us when creating the project and then improve it

First, we connect the library with components

import 'package:flutter/material.dart';

The main function is the entry point to the application. runApp launches it, accepting the root widget

void main() {
  runApp(const MyApp());
}

Creating the First Class
It inherits from StatelessWidget — meaning it has no state and doesn't redraw itself. Here we set general settings: theme, colors, and specify which widget to show first

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

In the home parameter, we pass MyHomePage and give it a title — we'll use it later.
Next MyHomePage this is a StatefulWidget — it has state and can redraw. In the class itself, we only create this state

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

The constructor requires title (required) and saves it to a variable. Widgets can accept any values and use them internally.

Where Everything Happens: State
In the _MyHomePageState class, we describe the UI and logic. State can be stored in different ways — here it's simple, so we use setState:
Breaking it down in order

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Scaffold — the "foundation" of the screen. We add AppBar (header), navigation, and body to it.
setState — triggers a redraw. But only the build method redraws, not the entire widget. The variable won't reset to zero.
Theme.of(context) — we pull the theme from anywhere in the tree. We set it in MyApp — we use it here.
Positioning: Center aligns to the center, inside it Column — a column of elements.
mainAxisAlignment: MainAxisAlignment.center aligns children to the center vertically.
Strings with variables: '$_counter' — in Dart, this is how we insert variables into text.
FloatingActionButton — a round button in the bottom right corner. In onPressed — our function, tooltip is needed for accessibility (read by screen readers), in child — a plus icon. Flutter gives many icons out of the box, but you can find libraries or draw your own.

Practice: Improving the Counter

Theory is important, but practice is everything. Let's refine the starter project: add a decrement button and change the layout. Here's what we got

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: _decrementCounter,
                  child: const Icon(Icons.remove),
                ),
                const SizedBox(width: 20),
                ElevatedButton(
                  onPressed: _incrementCounter,
                  child: const Icon(Icons.add),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

What We Changed and How It Works

Added a Decrement Function Just like _incrementCounter, but we decrement by 1. setState tells Flutter: "data has changed, redraw the screen".

void _decrementCounter() {
  setState(() {
    _counter--;
  });
}

Removed FloatingActionButton
Was: one button in the bottom right corner.
Became: two buttons in the center of the screen.
FloatingActionButton is convenient for one main action. But we now have two actions — plus and minus. So we moved the buttons into the screen body.
Added a Row with Buttons

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    ElevatedButton(
      onPressed: _decrementCounter,
      child: const Icon(Icons.remove),
    ),
    const SizedBox(width: 20),
    ElevatedButton(
      onPressed: _incrementCounter,
      child: const Icon(Icons.add),
    ),
  ],
),

Row — arranges elements in a row (horizontally). mainAxisAlignment: MainAxisAlignment.spaceAround — aligns elements with equal space between them.
ElevatedButton — a button with "elevation" (shadow, material design).
onPressed — we pass the function directly, without parentheses: _incrementCounter, not _incrementCounter(). Otherwise Flutter will call the function immediately during build, not on press.

Conclusion

In this article, we broke down the basic Flutter starter project and refined it a bit — added a second button and played with the layout. But this is only the tip of the iceberg. In real development, there's much more to understand.
The main thing to remember is that Flutter is built on three pillars: widgets, state, and context. Everything is a widget. State changes through setState (or more complex tools). Context gives access to theme, navigation, and parent data.
Practice, experiment, break code and fix it. That's the only way understanding comes.
Good luck in development! 🚀