Make a Calculator App with Flutter

What This App Does

A Calculator app serves a specific need in today's mobile-first world. Building one with Flutter means you ship to iOS, Android, and the web from a single codebase, cutting development time dramatically while keeping a native-quality experience.

Main Features

Feature	Why It Matters
Expression Display	Show the full expression as the user types, not just the result
Basic Operations	Add, subtract, multiply, divide with proper operator precedence
Memory Functions	MC, MR, M+, M- buttons for storing temporary values
History Log	Keep a scrollable list of past calculations
Scientific Mode	Trigonometric, logarithmic, and exponential functions in a side panel

How to Make a Calculator App with Flutter

Expression Display

class Calculator extends StatefulWidget {
  @override State createState() => _CalculatorState();
}

class _CalculatorState extends State {
  String _expression = '';
  String _result = '0';

  void _onButtonTap(String value) {
    setState(() {
      if (value == '=') {
        try {
          final parser = ExpressionParser();
          final exp = Expression.fromString(_expression);
          final eval = exp.evaluate(EvaluationContext());
          _result = eval.toString();
        } catch (_) {
          _result = 'Error';
        }
      } else {
        _expression += value;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          padding: const EdgeInsets.all(24),
          alignment: Alignment.centerRight,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Text(_expression, style: Theme.of(context).textTheme.titleLarge),
              Text(_result, style: Theme.of(context).textTheme.displaySmall),
            ],
          ),
        ),
        // Button grid goes here
      ],
    );
  }
}

Basic Operations

final buttons = [
  ['C', '±', '%', '/'],
  ['7', '8', '9', '×'],
  ['4', '5', '6', '-'],
  ['1', '2', '3', '+'],
  ['0', '.', '='],
];

Widget _buildButtonGrid() {
  return Column(children: buttons.map((row) =>
    Row(children: row.map((label) =>
      Expanded(
        child: Padding(
          padding: const EdgeInsets.all(4),
          child: ElevatedButton(
            onPressed: () => _onButtonTap(label),
            style: ElevatedButton.styleFrom(
              padding: const EdgeInsets.all(20),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(12)),
            ),
            child: Text(label, style: const TextStyle(fontSize: 20)),
          ),
        ),
      ),
    ).toList()),
  ).toList());
}

Recommended Libraries

Package	Purpose
math_expressions	Parse and evaluate mathematical expressions safely
provider	Manage calculator state across modes
shared_preferences	Persist history log

UI & UX Suggestions

Use a dark background (#1a1a2e), coloured operator buttons colour palette to match the app's purpose. Keep the navigation simple — a bottom nav bar or a single-scroll layout works best for this type of app. Make sure every interaction provides haptic or visual feedback so the app feels responsive and polished.