How to Build a Fintech Insights Screen in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

/// Insights — monthly insight cards (Revolut-inspired design system).
///
/// Self-contained per CONVENTIONS.md: pure Flutter only, the exact design font
/// (Inter) is bundled under `fonts/`, no network images, and the screen forces
/// its own dark theme. A feed of varied, colour-coded insight cards summarises
/// the month with realistic, specific numbers.
class FintechInsightsScreen extends StatelessWidget {
  const FintechInsightsScreen({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 _brand = Color(0xFF494FDF);
  static const Color _teal = Color(0xFF00A87E);
  static const Color _amber = Color(0xFFEC7E00);
  static const Color _red = Color(0xFFE23B4A);
  static const Color _muted = Color(0xFF8D969E);

  static const List<_Insight> _insights = <_Insight>[
    _Insight(
      Icons.trending_down_rounded,
      _teal,
      'You spent 12% less',
      'June spending is \$1,285 — down \$175 from May. Nice work.',
    ),
    _Insight(
      Icons.repeat_rounded,
      _brand,
      '6 active subscriptions',
      'They cost \$64.91/month. Spotify renews in 3 days.',
    ),
    _Insight(
      Icons.local_fire_department_rounded,
      _red,
      'Restaurants are up 8%',
      'Your biggest category this month at \$412.80 across 7 visits.',
    ),
    _Insight(
      Icons.savings_rounded,
      _amber,
      r'$48.20 in round-ups',
      'Spare change moved to your Holiday vault automatically.',
    ),
    _Insight(
      Icons.bolt_rounded,
      _teal,
      r'$22 cashback earned',
      'From 3 partner offers. Tap to see what’s available next.',
    ),
  ];

  @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>[
                    const Text(
                      'Here’s what stood out in June.',
                      style: TextStyle(
                        fontFamily: _font,
                        fontSize: 15,
                        letterSpacing: 0.24,
                        color: _muted,
                      ),
                    ),
                    const SizedBox(height: 16),
                    for (final _Insight i in _insights)
                      _InsightCard(insight: 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(
              'Insights',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontFamily: _font,
                fontSize: 18,
                fontWeight: FontWeight.w500,
                letterSpacing: 0.24,
                color: Colors.white,
              ),
            ),
          ),
          const SizedBox(width: 48),
        ],
      ),
    );
  }
}

class _Insight {
  const _Insight(this.icon, this.tint, this.title, this.body);
  final IconData icon;
  final Color tint;
  final String title;
  final String body;
}

class _InsightCard extends StatelessWidget {
  const _InsightCard({required this.insight});

  final _Insight insight;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 12),
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: FintechInsightsScreen._surface,
        borderRadius: BorderRadius.circular(18),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            width: 46,
            height: 46,
            decoration: BoxDecoration(
              color: insight.tint.withValues(alpha: 0.16),
              borderRadius: BorderRadius.circular(13),
            ),
            child: Icon(insight.icon, size: 23, color: insight.tint),
          ),
          const SizedBox(width: 14),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  insight.title,
                  style: const TextStyle(
                    fontFamily: FintechInsightsScreen._font,
                    fontSize: 15,
                    fontWeight: FontWeight.w600,
                    letterSpacing: 0.24,
                    color: Colors.white,
                  ),
                ),
                const SizedBox(height: 5),
                Text(
                  insight.body,
                  style: const TextStyle(
                    fontFamily: FintechInsightsScreen._font,
                    fontSize: 13,
                    height: 1.45,
                    letterSpacing: 0.24,
                    color: FintechInsightsScreen._muted,
                  ),
                ),
              ],
            ),
          ),
          const Padding(
            padding: EdgeInsets.only(top: 4, left: 6),
            child: Icon(Icons.chevron_right_rounded,
                size: 20, color: FintechInsightsScreen._muted),
          ),
        ],
      ),
    );
  }
}