Introduction

In this tutorial, we’ll build a fully functional calculator application using Flutter and leverage Riverpod for state management. Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Riverpod, on the other hand, is a reactive caching and data-binding framework that makes state management in Flutter more intuitive and predictable.

By the end of this tutorial, you’ll have:

• A solid understanding of Riverpod state management in Flutter
• Experience structuring a Flutter project with proper architecture
• A functional calculator app with a clean, responsive UI
• Knowledge of how to handle user input and perform calculations

Prerequisites

Before we begin, make sure you have:

• Flutter SDK installed (version 3.0.0 or higher)
• A code editor (VS Code, Android Studio, etc.)
• Basic understanding of Dart and Flutter

Setting Up the Project

Let’s start by creating a new Flutter project and adding the necessary dependencies.

1. Create a new Flutter project:

flutter create calculator_app
cd calculator_app

2. Open your pubspec.yaml file and add the Riverpod dependencies:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  flutter_riverpod: ^2.3.6
  riverpod_annotation: ^2.1.1

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0
  build_runner: ^2.3.3
  riverpod_generator: ^2.2.3

3. Run flutter pub get to install the dependencies.

Project Structure

For better organization, we’ll structure our project as follows:

lib/
├── main.dart              # Entry point
├── models/                # Data models
│   └── calculation.dart   # Calculation model
├── providers/             # Riverpod providers
│   └── calculator_provider.dart
├── screens/               # UI screens
│   └── calculator_screen.dart
└── widgets/               # Reusable widgets
    ├── calculator_button.dart
    └── calculator_display.dart

Let’s create these folders and files.

Creating the Calculation Model

First, let’s define our Calculation model to represent the state of our calculator:

// lib/models/calculation.dart
class Calculation {
  final String currentInput;
  final String previousInput;
  final String operation;
  final bool shouldResetCurrentInput;
  final String result;

  const Calculation({
    this.currentInput = '0',
    this.previousInput = '',
    this.operation = '',
    this.shouldResetCurrentInput = false,
    this.result = '',
  });

  // Create a copy of this Calculation with optional new values
  Calculation copyWith({
    String? currentInput,
    String? previousInput,
    String? operation,
    bool? shouldResetCurrentInput,
    String? result,
  }) {
    return Calculation(
      currentInput: currentInput ?? this.currentInput,
      previousInput: previousInput ?? this.previousInput,
      operation: operation ?? this.operation,
      shouldResetCurrentInput: shouldResetCurrentInput ?? this.shouldResetCurrentInput,
      result: result ?? this.result,
    );
  }

  @override
  String toString() {
    if (result.isNotEmpty) {
      return result;
    }
    if (previousInput.isEmpty) {
      return currentInput;
    }
    return '$previousInput $operation $currentInput';
  }
}

This model represents all the state we need to maintain for our calculator.

Setting Up Riverpod Provider

Now, let’s create our calculator provider using Riverpod:

// lib/providers/calculator_provider.dart
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import '../models/calculation.dart';

part 'calculator_provider.g.dart';

@riverpod
class CalculatorNotifier extends _$CalculatorNotifier {
  @override
  Calculation build() {
    return const Calculation();
  }

  // Add a digit to the current input
  void addDigit(String digit) {
    if (state.shouldResetCurrentInput) {
      state = state.copyWith(
        currentInput: digit,
        shouldResetCurrentInput: false,
      );
    } else {
      // Don't allow multiple leading zeros
      if (state.currentInput == '0' && digit == '0') return;

      // Replace the zero if it's the only digit
      if (state.currentInput == '0') {
        state = state.copyWith(currentInput: digit);
      } else {
        state = state.copyWith(currentInput: state.currentInput + digit);
      }
    }
  }

  // Add a decimal point to the current input
  void addDecimalPoint() {
    if (state.shouldResetCurrentInput) {
      state = state.copyWith(
        currentInput: '0.',
        shouldResetCurrentInput: false,
      );
    } else if (!state.currentInput.contains('.')) {
      state = state.copyWith(currentInput: state.currentInput + '.');
    }
  }

  // Clear all inputs and reset the calculator
  void clear() {
    state = const Calculation();
  }

  // Delete the last digit from the current input
  void deleteLastDigit() {
    if (state.currentInput.length > 1) {
      state = state.copyWith(
        currentInput: state.currentInput.substring(0, state.currentInput.length - 1),
      );
    } else {
      state = state.copyWith(currentInput: '0');
    }
  }

  // Set the operation and prepare for the next input
  void setOperation(String operation) {
    if (state.previousInput.isEmpty) {
      // This is the first operation
      state = state.copyWith(
        previousInput: state.currentInput,
        operation: operation,
        shouldResetCurrentInput: true,
        result: '',
      );
    } else if (!state.shouldResetCurrentInput) {
      // If we already have a previous operation, calculate it first
      calculate();
      // Then set up for the next operation
      state = state.copyWith(
        previousInput: state.result.isEmpty ? state.currentInput : state.result,
        operation: operation,
        shouldResetCurrentInput: true,
        result: '',
      );
    } else {
      // Just change the operation
      state = state.copyWith(operation: operation);
    }
  }

  // Calculate the result based on the current inputs and operation
  void calculate() {
    if (state.previousInput.isEmpty || state.operation.isEmpty) return;

    double num1 = double.parse(state.previousInput);
    double num2 = double.parse(state.currentInput);
    double resultValue = 0;

    switch (state.operation) {
      case '+':
        resultValue = num1 + num2;
        break;
      case '-':
        resultValue = num1 - num2;
        break;
      case '×':
        resultValue = num1 * num2;
        break;
      case '÷':
        if (num2 != 0) {
          resultValue = num1 / num2;
        } else {
          state = state.copyWith(result: 'Error');
          return;
        }
        break;
    }

    // Format the result to avoid unnecessary decimal places
    String resultString = resultValue.toString();
    if (resultValue == resultValue.toInt()) {
      resultString = resultValue.toInt().toString();
    }

    state = state.copyWith(
      result: resultString,
      currentInput: resultString,
      previousInput: '',
      operation: '',
      shouldResetCurrentInput: true,
    );
  }

  // Toggle the sign of the current input (positive/negative)
  void toggleSign() {
    if (state.currentInput != '0') {
      if (state.currentInput.startsWith('-')) {
        state = state.copyWith(
          currentInput: state.currentInput.substring(1),
        );
      } else {
        state = state.copyWith(
          currentInput: '-' + state.currentInput,
        );
      }
    }
  }

  // Calculate percentage
  void percentage() {
    double value = double.parse(state.currentInput) / 100;
    state = state.copyWith(
      currentInput: value.toString(),
    );
  }
}

// Generate the code for the provider
final calculatorProvider = StateNotifierProvider<CalculatorNotifier, Calculation>((ref) {
  return CalculatorNotifier();
});

We need to generate the code for our Riverpod provider. Run:

flutter pub run build_runner build

This will generate the calculator_provider.g.dart file.

Creating the UI Widgets

Now let’s create the UI components, starting with the calculator button widget:

// lib/widgets/calculator_button.dart
import 'package:flutter/material.dart';

class CalculatorButton extends StatelessWidget {
  final String text;
  final Color backgroundColor;
  final Color textColor;
  final VoidCallback onPressed;
  final double fontSize;
  final double height;
  final double width;

  const CalculatorButton({
    Key? key,
    required this.text,
    this.backgroundColor = Colors.white,
    this.textColor = Colors.black,
    required this.onPressed,
    this.fontSize = 30,
    this.height = 70,
    this.width = 70,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(5),
      height: height,
      width: width,
      child: ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          backgroundColor: backgroundColor,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(height / 2),
          ),
          padding: EdgeInsets.zero,
        ),
        child: Text(
          text,
          style: TextStyle(
            fontSize: fontSize,
            color: textColor,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

Next, let’s create the calculator display widget:

// lib/widgets/calculator_display.dart
import 'package:flutter/material.dart';

class CalculatorDisplay extends StatelessWidget {
  final String text;
  final String expression;

  const CalculatorDisplay({
    Key? key,
    required this.text,
    this.expression = '',
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 120,
      color: Colors.black,
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          if (expression.isNotEmpty)
            Text(
              expression,
              style: const TextStyle(
                color: Colors.grey,
                fontSize: 20,
              ),
            ),
          FittedBox(
            fit: BoxFit.scaleDown,
            child: Text(
              text,
              style: const TextStyle(
                color: Colors.white,
                fontSize: 48,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Creating the Calculator Screen

Now, let’s create the main calculator screen:

// lib/screens/calculator_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../widgets/calculator_button.dart';
import '../widgets/calculator_display.dart';
import '../providers/calculator_provider.dart';

class CalculatorScreen extends ConsumerWidget {
  const CalculatorScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final calculation = ref.watch(calculatorProvider);
    final notifier = ref.read(calculatorProvider.notifier);

    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Column(
          children: [
            CalculatorDisplay(
              text: calculation.currentInput,
              expression: calculation.previousInput.isNotEmpty
                  ? '${calculation.previousInput} ${calculation.operation}'
                  : '',
            ),
            const Spacer(),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      CalculatorButton(
                        text: 'C',
                        backgroundColor: Colors.grey.shade300,
                        onPressed: () => notifier.clear(),
                      ),
                      CalculatorButton(
                        text: '+/-',
                        backgroundColor: Colors.grey.shade300,
                        onPressed: () => notifier.toggleSign(),
                      ),
                      CalculatorButton(
                        text: '%',
                        backgroundColor: Colors.grey.shade300,
                        onPressed: () => notifier.percentage(),
                      ),
                      CalculatorButton(
                        text: '÷',
                        backgroundColor: Colors.orange,
                        textColor: Colors.white,
                        onPressed: () => notifier.setOperation('÷'),
                      ),
                    ],
                  ),
                  const SizedBox(height: 10),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      CalculatorButton(
                        text: '7',
                        backgroundColor: Colors.grey.shade800,
                        textColor: Colors.white,
                        onPressed: () => notifier.addDigit('7'),
                      ),
                      CalculatorButton(
                        text: '8',
                        backgroundColor: Colors.grey.shade800,
                        textColor: Colors.white,
                        onPressed: () => notifier.addDigit('8'),
                      ),
                      CalculatorButton(
                        text: '9',
                        backgroundColor: Colors.grey.shade800,
                        textColor: Colors.white,
                        onPressed: () => notifier.addDigit('9'),
                      ),
                      CalculatorButton(
                        text: '×',
                        backgroundColor: Colors.orange,
                        textColor: Colors.white,
                        onPressed: () => notifier.setOperation('×'),
                      ),
                    ],
                  ),
                  const SizedBox(height: 10),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      CalculatorButton(
                        text: '4',
                        backgroundColor: Colors.grey.shade800,
                        textColor: Colors.white,
                        onPressed: () => notifier.addDigit('4'),
                      ),
                      CalculatorButton(
                        text: '5',
                        backgroundColor: Colors.grey.shade800,
                        textColor: Colors.white,
                        onPressed: () => notifier.addDigit('5'),
                      ),
                      CalculatorButton(
                        text: '6',
                        backgroundColor: Colors.grey.shade800,
                        textColor: Colors.white,
                        onPressed: () => notifier.addDigit('6'),
                      ),
                      CalculatorButton(
                        text: '-',
                        backgroundColor: Colors.orange,
                        textColor: Colors.white,
                        onPressed: () => notifier.setOperation('-'),
                      ),
                    ],
                  ),
                  const SizedBox(height: 10),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      CalculatorButton(
                        text: '1',
                        backgroundColor: Colors.grey.shade800,
                        textColor: Colors.white,
                        onPressed: () => notifier.addDigit('1'),
                      ),
                      CalculatorButton(
                        text: '2',
                        backgroundColor: Colors.grey.shade800,
                        textColor: Colors.white,
                        onPressed: () => notifier.addDigit('2'),
                      ),
                      CalculatorButton(
                        text: '3',
                        backgroundColor: Colors.grey.shade800,
                        textColor: Colors.white,
                        onPressed: () => notifier.addDigit('3'),
                      ),
                      CalculatorButton(
                        text: '+',
                        backgroundColor: Colors.orange,
                        textColor: Colors.white,
                        onPressed: () => notifier.setOperation('+'),
                      ),
                    ],
                  ),
                  const SizedBox(height: 10),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      CalculatorButton(
                        text: '0',
                        backgroundColor: Colors.grey.shade800,
                        textColor: Colors.white,
                        width: 150,
                        onPressed: () => notifier.addDigit('0'),
                      ),
                      CalculatorButton(
                        text: '.',
                        backgroundColor: Colors.grey.shade800,
                        textColor: Colors.white,
                        onPressed: () => notifier.addDecimalPoint(),
                      ),
                      CalculatorButton(
                        text: '=',
                        backgroundColor: Colors.orange,
                        textColor: Colors.white,
                        onPressed: () => notifier.calculate(),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            const SizedBox(height: 20),
          ],
        ),
      ),
    );
  }
}

Setting Up the Main App

Finally, let’s set up our main.dart file:

// lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'screens/calculator_screen.dart';

void main() {
  runApp(
    const ProviderScope(
      child: CalculatorApp(),
    ),
  );
}

class CalculatorApp extends StatelessWidget {
  const CalculatorApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Calculator',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      debugShowCheckedModeBanner: false,
      home: const CalculatorScreen(),
    );
  }
}

Understanding Riverpod State Management

In our calculator app, we used Riverpod for state management, which brings several advantages:

1. Centralized State: All our calculator’s state is managed in the CalculatorNotifier class, which makes it easy to track and modify.
2. Immutable State: The Calculation class is immutable, and we use the copyWith method to create new instances with updated values. This helps prevent unexpected state mutations.
3. Dependency Injection: Riverpod provides a clean way to inject and access our state from anywhere in the app.
4. Reactivity: When the state changes, only the widgets that depend on that state are rebuilt, making our app more efficient.

Let’s look at how we consume the state in our UI:

final calculation = ref.watch(calculatorProvider);

This line watches the state of our calculator and rebuilds the widget whenever it changes.

final notifier = ref.read(calculatorProvider.notifier);

This line gives us access to the methods of our notifier, which we use to update the state.

Testing the App

Run your app with:

flutter run

You should now have a fully functional calculator app with a sleek design, similar to the iOS calculator.

Extending the App

Here are some ways you could extend this calculator app:

1. Add Memory Functions: Implement memory storage (M+, M-, MR, MC) functionality.
2. Scientific Calculator: Add scientific functions like trigonometry, logarithms, etc.
3. History Feature: Keep track of previous calculations.
4. Themes: Add light/dark mode or customizable themes.
5. Unit Conversion: Add the ability to convert between different units (length, weight, etc.).

Conclusion

In this tutorial, we’ve built a calculator app using Flutter and Riverpod. We’ve learned how to:

• Set up a Riverpod project structure
• Create and manage state with Riverpod
• Build a responsive UI with custom widgets
• Implement calculator logic
• Use proper architecture patterns

Riverpod offers a powerful approach to state management in Flutter, making it easier to build and maintain complex applications. The reactive nature of Riverpod allows our UI to automatically update when the state changes, while keeping our code organized and testable.

As you continue to work with Flutter and Riverpod, you’ll discover more advanced patterns and techniques that can further improve your applications.

Happy coding!