How to Build a Fintech Cashflow Screen in Flutter (Full Code + Preview)
Most cashflow charts in Flutter start with a charting package, a controller, and a build-size bump — all to draw twelve rectangles. This tutorial builds a Revolut-style cashflow screen with none of that: a paired money-in vs money-out bar chart made from `Expanded`, `FractionallySizedBox`, and rounded `Container`s, a 'Net this month' summary card with a positive pill, and a monthly breakdown list that computes each month's net on the fly. You end up with one self-contained, dark-themed Dart file you can drop straight into any finance app.
Watch the Flutter UI walkthrough
A short screen recording of Fintech · Cashflow running, if you'd rather see it before you read the code. The written tutorial below covers everything in it.
Can't see the video? Watch it on YouTube.
What you'll build
- ✓A paired bar chart comparing income and spend across six months, built from plain widgets with zero chart dependencies
- ✓A 'Net this month' summary card showing +$1,315.00 in teal beside a tinted 'Positive' status pill
- ✓A monthly breakdown card that lists months newest-first and derives each net from income minus outgoing at build time
- ✓A reusable `_bar` helper that scales any value against a $5,000 ceiling with `FractionallySizedBox`
- ✓A forced dark theme with a six-colour Revolut-inspired palette and the bundled Inter font
Step-by-step build
Create the file
Add a new file at lib/fintech_cashflow/fintech_cashflow_screen.dart in your Flutter project.
Register the bundled fonts
No external packages — this is pure Flutter. It does bundle its design font (Inter), so drop the font file into fonts/ and declare it in pubspec.yaml:
flutter:
fonts:
- family: Inter
fonts:
- asset: fonts/Inter-Regular.ttfBuild it, piece by piece
Here's how the screen goes together. Each block below is a real slice of the code with a plain-English explanation — paste them in order, or grab the whole file from the next section.
One list of month records drives the whole screen
import 'package:flutter/material.dart';
/// Cashflow — money in vs out over time (Revolut-inspired design system).
///
/// Self-contained per CONVENTIONS.md: pure Flutter only, the exact design font
/// (Inter) is bundled under `fonts/`, the paired bar chart is built from plain
/// widgets (no charting package, no network), and the screen forces its own
/// dark theme. A net summary and per-month breakdown complete the picture.
class FintechCashflowScreen extends StatelessWidget {
const FintechCashflowScreen({super.key, this.onBack});
final VoidCallback? onBack;
static const String _font = 'Inter';
static const Color _bg = Color(0xFF191C1F);
static const Color _surface = Color(0xFF242729);
static const Color _teal = Color(0xFF00A87E);
static const Color _red = Color(0xFFE23B4A);
static const Color _muted = Color(0xFF8D969E);
static const Color _hairline = Color(0xFF2E3235);
static const List<_Month> _months = <_Month>[
_Month('Jan', 4200, 3850),
_Month('Feb', 4200, 4010),
_Month('Mar', 4650, 3720),
_Month('Apr', 4200, 4380),
_Month('May', 4830, 3515),
_Month('Jun', 4830, 3515),
];
static const double _maxVal = 5000;`FintechCashflowScreen` is a `StatelessWidget` with a single `onBack` callback — nothing on this screen mutates, so there is no state class to maintain. The palette is six `static const Color`s: a near-black `_bg` (0xFF191C1F), a lighter `_surface` for cards, `_teal` for money in, `_red` for money out, plus `_muted` and `_hairline` for secondary text and dividers. The interesting decision is `_months`: six `_Month(label, income, outgoing)` records are the only data on the screen — the chart, the legend maths, and the breakdown list are all projections of this one list. `_maxVal = 5000` is the shared chart ceiling every bar is scaled against, so bar heights stay comparable across months.
Forcing dark mode and laying out the scroll
@override
Widget build(BuildContext context) {
return Theme(
data: ThemeData.dark(useMaterial3: true),
child: Scaffold(
backgroundColor: _bg,
body: SafeArea(
child: Column(
children: <Widget>[
_buildAppBar(),
Expanded(
child: ListView(
physics: const BouncingScrollPhysics(),
padding: const EdgeInsets.fromLTRB(20, 8, 20, 24),
children: <Widget>[
_buildNet(),
const SizedBox(height: 24),
_buildChart(),
const SizedBox(height: 12),
_buildLegend(),
const SizedBox(height: 24),
_sectionLabel('Monthly breakdown'),
const SizedBox(height: 6),
Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration(
color: _surface,
borderRadius: BorderRadius.circular(16),
),
child: Column(
children: <Widget>[
for (int i = _months.length - 1; i >= 0; i--) ...<Widget>[
if (i != _months.length - 1)
const Divider(height: 1, color: _hairline),
_MonthRow(month: _months[i]),
],
],
),
),
],
),
),
],
),
),
),
);
}The build wraps everything in `Theme(data: ThemeData.dark(useMaterial3: true))`, so the screen renders dark even inside a light-themed host app — it carries its own theme rather than inheriting one. Inside a `SafeArea`, the app bar stays fixed while an `Expanded` `ListView` with `BouncingScrollPhysics` scrolls the net card, chart, legend, and breakdown. The breakdown card uses a reversed collection-for — `for (int i = _months.length - 1; i >= 0; i--)` — so June appears first, matching how people read a finance history (most recent month on top), and the `if (i != _months.length - 1)` guard inserts a 1px `_hairline` `Divider` between rows but never above the first one.
A hand-balanced app bar
Widget _buildAppBar() {
return Padding(
padding: const EdgeInsets.fromLTRB(8, 4, 8, 4),
child: Row(
children: <Widget>[
IconButton(
onPressed: onBack,
icon: const Icon(Icons.arrow_back_ios_new_rounded,
size: 20, color: Colors.white),
),
const Expanded(
child: Text(
'Cashflow',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: _font,
fontSize: 18,
fontWeight: FontWeight.w500,
letterSpacing: 0.24,
color: Colors.white,
),
),
),
const SizedBox(width: 48),
],
),
);
}Rather than a Material `AppBar`, the header is a plain `Row`: an `IconButton` firing `onBack`, an `Expanded` centred 'Cashflow' title, and a trailing `SizedBox(width: 48)`. That 48px box is the whole trick — it mirrors the standard `IconButton` footprint on the left, so `textAlign: TextAlign.center` lands the title on the true horizontal centre of the screen instead of drifting right. The title is 18px `w500` Inter with a subtle 0.24 letter-spacing that every text style on this screen repeats.
The net summary card and its status pill
Widget _buildNet() {
return Container(
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
color: _surface,
borderRadius: BorderRadius.circular(18),
),
child: Row(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const <Widget>[
Text(
'Net this month',
style: TextStyle(
fontFamily: _font,
fontSize: 13,
letterSpacing: 0.24,
color: _muted,
),
),
SizedBox(height: 6),
Text(
r'+$1,315.00',
style: TextStyle(
fontFamily: _font,
fontSize: 28,
fontWeight: FontWeight.w600,
letterSpacing: 0.24,
color: _teal,
),
),
],
),
const Spacer(),
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: _teal.withValues(alpha: 0.16),
borderRadius: BorderRadius.circular(9999),
),
child: const Text(
'Positive',
style: TextStyle(
fontFamily: _font,
fontSize: 12.5,
fontWeight: FontWeight.w600,
letterSpacing: 0.24,
color: _teal,
),
),
),
],
),
);
}`_buildNet` is a `_surface` container with 18px padding and an 18px corner radius holding a two-line column — a 13px `_muted` 'Net this month' label over the 28px `w600` figure — pushed apart from a status pill by a `Spacer`. The amount string is a raw literal (`r'+$1,315.00'`) so the dollar sign is not read as Dart interpolation, and it renders in `_teal` because the month is positive. The pill's background is `_teal.withValues(alpha: 0.16)` with a `borderRadius` of 9999 — a tint of the same hue as its 'Positive' text, so the badge reads as a state of the number rather than a separate element.
A paired bar chart with no charting package
Widget _buildChart() {
return SizedBox(
height: 160,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
for (final _Month m in _months)
Expanded(
child: Column(
children: <Widget>[
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_bar(m.income / _maxVal, _teal),
const SizedBox(width: 3),
_bar(m.outgoing / _maxVal, _red),
],
),
),
const SizedBox(height: 8),
Text(
m.label,
style: const TextStyle(
fontFamily: _font,
fontSize: 11,
letterSpacing: 0.24,
color: _muted,
),
),
],
),
),
],
),
);
}
Widget _bar(double frac, Color color) {
return Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: FractionallySizedBox(
heightFactor: frac.clamp(0.02, 1),
child: Container(
decoration: BoxDecoration(
color: color,
borderRadius: const BorderRadius.vertical(top: Radius.circular(4)),
),
),
),
),
);
}The chart is a 160px-tall `Row` with `crossAxisAlignment: CrossAxisAlignment.end`, one `Expanded` column per month so six months always share the width evenly. Each column stacks a bottom-aligned pair of bars — `_bar(m.income / _maxVal, _teal)` and `_bar(m.outgoing / _maxVal, _red)` separated by a 3px gap — above the 11px month label. `_bar` does the actual scaling: an `Align(alignment: Alignment.bottomCenter)` holding a `FractionallySizedBox` whose `heightFactor` is `frac.clamp(0.02, 1)`, so bars grow up from the baseline and a zero-value month still shows a 2% sliver instead of vanishing. Only the top corners get a 4px radius, keeping the baseline flat.
Legend dots and a spaced-caps section label
Widget _buildLegend() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_legendDot(_teal, 'Money in'),
const SizedBox(width: 24),
_legendDot(_red, 'Money out'),
],
);
}
Widget _legendDot(Color color, String label) {
return Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 10,
height: 10,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(3),
),
),
const SizedBox(width: 8),
Text(
label,
style: const TextStyle(
fontFamily: _font,
fontSize: 12.5,
letterSpacing: 0.24,
color: _muted,
),
),
],
);
}
Widget _sectionLabel(String text) {
return Text(
text.toUpperCase(),
style: const TextStyle(
fontFamily: _font,
fontSize: 11,
fontWeight: FontWeight.w500,
letterSpacing: 1.0,
color: _muted,
),
);
}`_buildLegend` centres two `_legendDot` rows 24px apart, each a 10px square with a 3px corner radius beside 12.5px `_muted` text — 'Money in' in `_teal`, 'Money out' in `_red`, the same hues the bars use, so the mapping needs no explanation. `mainAxisSize: MainAxisSize.min` keeps each dot-label pair hugging its content so the outer `mainAxisAlignment: MainAxisAlignment.center` can do the positioning. `_sectionLabel` upper-cases its text at 11px with `letterSpacing: 1.0`, the classic spaced-caps treatment that separates 'MONTHLY BREAKDOWN' from the data below without stealing visual weight.
The month model and a net computed at build time
class _Month {
const _Month(this.label, this.income, this.outgoing);
final String label;
final double income;
final double outgoing;
}
class _MonthRow extends StatelessWidget {
const _MonthRow({required this.month});
final _Month month;
@override
Widget build(BuildContext context) {
final double net = month.income - month.outgoing;
final bool positive = net >= 0;
return Padding(
padding: const EdgeInsets.symmetric(vertical: 14),
child: Row(
children: <Widget>[
SizedBox(
width: 44,
child: Text(
month.label,
style: const TextStyle(
fontFamily: FintechCashflowScreen._font,
fontSize: 14.5,
fontWeight: FontWeight.w500,
letterSpacing: 0.24,
color: Colors.white,
),
),
),
const Spacer(),
Text(
'+\$${month.income.toStringAsFixed(0)}',
style: const TextStyle(
fontFamily: FintechCashflowScreen._font,
fontSize: 13,
letterSpacing: 0.24,
color: FintechCashflowScreen._teal,
),
),
const SizedBox(width: 14),
Text(
'-\$${month.outgoing.toStringAsFixed(0)}',
style: const TextStyle(
fontFamily: FintechCashflowScreen._font,
fontSize: 13,
letterSpacing: 0.24,
color: FintechCashflowScreen._red,
),
),
const SizedBox(width: 14),
SizedBox(
width: 64,
child: Text(
'${positive ? '+' : '-'}\$${net.abs().toStringAsFixed(0)}',
textAlign: TextAlign.right,
style: TextStyle(
fontFamily: FintechCashflowScreen._font,
fontSize: 13.5,
fontWeight: FontWeight.w600,
letterSpacing: 0.24,
color: positive ? Colors.white : FintechCashflowScreen._red,
),
),
),
],
),
);
}
}`_Month` is a three-field const value class — `label`, `income`, `outgoing` — deliberately storing no net, because `_MonthRow` derives it in build: `final double net = month.income - month.outgoing;` and `final bool positive = net >= 0;`. That keeps the data honest (a stored net could drift out of sync with its parts). The row lays out a fixed 44px month label, a `Spacer`, then income in `_teal` with a `+` prefix, outgoing in `_red` with a `-`, and the net right-aligned in a fixed 64px `SizedBox` so amounts line up down the column. The sign logic is `'${positive ? '+' : '-'}\$${net.abs().toStringAsFixed(0)}'` — the value is shown as an absolute with an explicit sign, and only a negative net turns the text `_red`; a positive net stays white so the column doesn't shout.
Full code
The complete, ready-to-paste source. Free to use in your projects — one click copies it all.
import 'package:flutter/material.dart';
/// Cashflow — money in vs out over time (Revolut-inspired design system).
///
/// Self-contained per CONVENTIONS.md: pure Flutter only, the exact design font
/// (Inter) is bundled under `fonts/`, the paired bar chart is built from plain
/// widgets (no charting package, no network), and the screen forces its own
/// dark theme. A net summary and per-month breakdown complete the picture.
class FintechCashflowScreen extends StatelessWidget {
const FintechCashflowScreen({super.key, this.onBack});
final VoidCallback? onBack;
static const String _font = 'Inter';
static const Color _bg = Color(0xFF191C1F);
static const Color _surface = Color(0xFF242729);
static const Color _teal = Color(0xFF00A87E);
static const Color _red = Color(0xFFE23B4A);
static const Color _muted = Color(0xFF8D969E);
static const Color _hairline = Color(0xFF2E3235);
static const List<_Month> _months = <_Month>[
_Month('Jan', 4200, 3850),
_Month('Feb', 4200, 4010),
_Month('Mar', 4650, 3720),
_Month('Apr', 4200, 4380),
_Month('May', 4830, 3515),
_Month('Jun', 4830, 3515),
];
static const double _maxVal = 5000;
@override
Widget build(BuildContext context) {
return Theme(
data: ThemeData.dark(useMaterial3: true),
child: Scaffold(
backgroundColor: _bg,
body: SafeArea(
child: Column(
children: <Widget>[
_buildAppBar(),
Expanded(
child: ListView(
physics: const BouncingScrollPhysics(),
padding: const EdgeInsets.fromLTRB(20, 8, 20, 24),
children: <Widget>[
_buildNet(),
const SizedBox(height: 24),
_buildChart(),
const SizedBox(height: 12),
_buildLegend(),
const SizedBox(height: 24),
_sectionLabel('Monthly breakdown'),
const SizedBox(height: 6),
Container(
padding: const EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration(
color: _surface,
borderRadius: BorderRadius.circular(16),
),
child: Column(
children: <Widget>[
for (int i = _months.length - 1; i >= 0; i--) ...<Widget>[
if (i != _months.length - 1)
const Divider(height: 1, color: _hairline),
_MonthRow(month: _months[i]),
],
],
),
),
],
),
),
],
),
),
),
);
}
Widget _buildAppBar() {
return Padding(
padding: const EdgeInsets.fromLTRB(8, 4, 8, 4),
child: Row(
children: <Widget>[
IconButton(
onPressed: onBack,
icon: const Icon(Icons.arrow_back_ios_new_rounded,
size: 20, color: Colors.white),
),
const Expanded(
child: Text(
'Cashflow',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: _font,
fontSize: 18,
fontWeight: FontWeight.w500,
letterSpacing: 0.24,
color: Colors.white,
),
),
),
const SizedBox(width: 48),
],
),
);
}
Widget _buildNet() {
return Container(
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
color: _surface,
borderRadius: BorderRadius.circular(18),
),
child: Row(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const <Widget>[
Text(
'Net this month',
style: TextStyle(
fontFamily: _font,
fontSize: 13,
letterSpacing: 0.24,
color: _muted,
),
),
SizedBox(height: 6),
Text(
r'+$1,315.00',
style: TextStyle(
fontFamily: _font,
fontSize: 28,
fontWeight: FontWeight.w600,
letterSpacing: 0.24,
color: _teal,
),
),
],
),
const Spacer(),
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: _teal.withValues(alpha: 0.16),
borderRadius: BorderRadius.circular(9999),
),
child: const Text(
'Positive',
style: TextStyle(
fontFamily: _font,
fontSize: 12.5,
fontWeight: FontWeight.w600,
letterSpacing: 0.24,
color: _teal,
),
),
),
],
),
);
}
Widget _buildChart() {
return SizedBox(
height: 160,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
for (final _Month m in _months)
Expanded(
child: Column(
children: <Widget>[
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_bar(m.income / _maxVal, _teal),
const SizedBox(width: 3),
_bar(m.outgoing / _maxVal, _red),
],
),
),
const SizedBox(height: 8),
Text(
m.label,
style: const TextStyle(
fontFamily: _font,
fontSize: 11,
letterSpacing: 0.24,
color: _muted,
),
),
],
),
),
],
),
);
}
Widget _bar(double frac, Color color) {
return Expanded(
child: Align(
alignment: Alignment.bottomCenter,
child: FractionallySizedBox(
heightFactor: frac.clamp(0.02, 1),
child: Container(
decoration: BoxDecoration(
color: color,
borderRadius: const BorderRadius.vertical(top: Radius.circular(4)),
),
),
),
),
);
}
Widget _buildLegend() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_legendDot(_teal, 'Money in'),
const SizedBox(width: 24),
_legendDot(_red, 'Money out'),
],
);
}
Widget _legendDot(Color color, String label) {
return Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: 10,
height: 10,
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(3),
),
),
const SizedBox(width: 8),
Text(
label,
style: const TextStyle(
fontFamily: _font,
fontSize: 12.5,
letterSpacing: 0.24,
color: _muted,
),
),
],
);
}
Widget _sectionLabel(String text) {
return Text(
text.toUpperCase(),
style: const TextStyle(
fontFamily: _font,
fontSize: 11,
fontWeight: FontWeight.w500,
letterSpacing: 1.0,
color: _muted,
),
);
}
}
class _Month {
const _Month(this.label, this.income, this.outgoing);
final String label;
final double income;
final double outgoing;
}
class _MonthRow extends StatelessWidget {
const _MonthRow({required this.month});
final _Month month;
@override
Widget build(BuildContext context) {
final double net = month.income - month.outgoing;
final bool positive = net >= 0;
return Padding(
padding: const EdgeInsets.symmetric(vertical: 14),
child: Row(
children: <Widget>[
SizedBox(
width: 44,
child: Text(
month.label,
style: const TextStyle(
fontFamily: FintechCashflowScreen._font,
fontSize: 14.5,
fontWeight: FontWeight.w500,
letterSpacing: 0.24,
color: Colors.white,
),
),
),
const Spacer(),
Text(
'+\$${month.income.toStringAsFixed(0)}',
style: const TextStyle(
fontFamily: FintechCashflowScreen._font,
fontSize: 13,
letterSpacing: 0.24,
color: FintechCashflowScreen._teal,
),
),
const SizedBox(width: 14),
Text(
'-\$${month.outgoing.toStringAsFixed(0)}',
style: const TextStyle(
fontFamily: FintechCashflowScreen._font,
fontSize: 13,
letterSpacing: 0.24,
color: FintechCashflowScreen._red,
),
),
const SizedBox(width: 14),
SizedBox(
width: 64,
child: Text(
'${positive ? '+' : '-'}\$${net.abs().toStringAsFixed(0)}',
textAlign: TextAlign.right,
style: TextStyle(
fontFamily: FintechCashflowScreen._font,
fontSize: 13.5,
fontWeight: FontWeight.w600,
letterSpacing: 0.24,
color: positive ? Colors.white : FintechCashflowScreen._red,
),
),
),
],
),
);
}
}
Plus bundled 1 binary asset (fonts/images). The CLI and MCP install those for you automatically.
Two faster ways to add it
Copy-paste works, but you can skip it entirely.
1. FlutterKit CLI
One command drops this screen — and its fonts — straight into your project.
$ flutterkit add fintech-cashflow2. AI agent (MCP)
Connect FlutterKit's MCP server in Claude or Cursor and just ask your agent to install fintech-cashflow — it fetches and writes the files for you.
FAQ
Can I use this cashflow screen in a commercial Flutter app?
Yes. FlutterKit screens are free to use, including commercially. You can ship this cashflow screen in a client project, a paid fintech app, or an internal tool without attribution.
Which packages does this screen need?
None. The paired bar chart is built entirely from `Row`, `Expanded`, `Align`, and `FractionallySizedBox` — no fl_chart or other charting dependency, and no network calls. The only asset is the Inter font, which ships bundled with the screen under `fonts/` and is referenced by the `_font` constant.
What Flutter version does this code require?
Flutter 3.27 or newer, because the status pill uses `Color.withValues(alpha: 0.16)`, which replaced the deprecated `withOpacity`. On an older SDK, swap that one call to `_teal.withOpacity(0.16)`. The `super.key` constructor parameter also assumes Dart 2.17+, which any recent Flutter includes.
How do I feed the chart real transaction data?
Replace the `static const _months` list with a list you build from your backend — one `_Month(label, income, outgoing)` per period — and pass it into the widget as a constructor parameter instead of a static. Also compute `_maxVal` from the data (for example `months.map((m) => max(m.income, m.outgoing)).reduce(max)`) so the tallest bar always reaches full height; with the hard-coded 5000 ceiling, a big month would clamp and a quiet year would look flat.
Why does the monthly breakdown list run newest-first while the chart runs oldest-first?
They serve different reading modes. The chart's `for (final _Month m in _months)` keeps chronological order because a trend only makes sense left-to-right in time. The breakdown card iterates backwards (`for (int i = _months.length - 1; i >= 0; i--)`) so June sits at the top — when you scan a list of months you want the most recent one without scrolling, the same convention banking apps use for statements.
