Snippet created via Remix API

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MarketingDashboardApp());

class MarketingDashboardApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Marketing Dashboard',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.grey[200], // Gray background
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MarketingDashboard(),
    );
  }
}

class MarketingDashboard extends StatefulWidget {
  @override
  _MarketingDashboardState createState() => _MarketingDashboardState();
}

class _MarketingDashboardState extends State<MarketingDashboard> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Marketing Analytics'),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              _buildOverviewCards(),
              SizedBox(height: 20),
              _buildChartSection(),
              SizedBox(height: 20),
              _buildPerformanceMetrics(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildOverviewCards() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        _buildMetricCard(
          title: 'Total Visitors',
          value: '45,678',
          icon: Icons.people,
          color: Colors.blue,
        ),
        _buildMetricCard(
          title: 'Conversion Rate',
          value: '3.2%',
          icon: Icons.trending_up,
          color: Colors.green,
        ),
        _buildMetricCard(
          title: 'Revenue',
          value: '\$124,567',
          icon: Icons.attach_money,
          color: Colors.purple,
        ),
      ],
    );
  }

  Widget _buildMetricCard({
    required String title,
    required String value,
    required IconData icon,
    required Color color,
  }) {
    return Expanded(
      child: Card(
        elevation: 4,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Icon(icon, color: color, size: 30),
                  Text(
                    title,
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.grey[600],
                    ),
                  ),
                ],
              ),
              SizedBox(height: 10),
              Text(
                value,
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  color: color,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildChartSection() {
    return Card(
      elevation: 4,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Website Traffic',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 20),
            Container(
              height: 250,
              child: CustomPaint(
                painter: TrafficChartPainter(),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPerformanceMetrics() {
    return Card(
      elevation: 4,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Campaign Performance',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 20),
            _buildPerformanceRow(
              campaign: 'Summer Sale',
              impressions: '125,456',
              clicks: '4,567',
              ctr: '3.6%',
            ),
            Divider(),
            _buildPerformanceRow(
              campaign: 'Holiday Promo',
              impressions: '98,765',
              clicks: '3,210',
              ctr: '3.2%',
            ),
            Divider(),
            _buildPerformanceRow(
              campaign: 'New Product Launch',
              impressions: '76,543',
              clicks: '2,890',
              ctr: '3.8%',
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildPerformanceRow({
    required String campaign,
    required String impressions,
    required String clicks,
    required String ctr,
  }) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            flex: 2,
            child: Text(
              campaign,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
          Expanded(
            child: Text(impressions, textAlign: TextAlign.center),
          ),
          Expanded(
            child: Text(clicks, textAlign: TextAlign.center),
          ),
          Expanded(
            child: Text(
              ctr,
              style: TextStyle(color: Colors.green),
              textAlign: TextAlign.right,
            ),
          ),
        ],
      ),
    );
  }
}

class TrafficChartPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 4
      ..style = PaintingStyle.stroke;

    final path = Path();
    final points = [
      Offset(0, size.height * 0.6),
      Offset(size.width * 0.2, size.height * 0.4),
      Offset(size.width * 0.4, size.height * 0.7),
      Offset(size.width * 0.6, size.height * 0.5),
      Offset(size.width * 0.8, size.height * 0.6),
      Offset(size.width, size.height * 0.4),
    ];

    path.moveTo(points[0].dx, points[0].dy);
    for (var i = 1; i < points.length; i++) {
      path.lineTo(points[i].dx, points[i].dy);
    }

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}