Snippet created via Next.js API

main.dart

import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Analytics Dashboard',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.grey[100],
      ),
      home: const DashboardPage(),
    );
  }
}

class DashboardPage extends StatefulWidget {
  const DashboardPage({Key? key}) : super(key: key);

  @override
  State<DashboardPage> createState() => _DashboardPageState();
}

class _DashboardPageState extends State<DashboardPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          // Left Sidebar
          Container(
            width: 250,
            color: Colors.white,
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                const Text(
                  'Sitemark-web',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 32),
                ListTile(
                  leading: const Icon(Icons.home),
                  title: const Text('Home'),
                  selected: true,
                ),
                ListTile(
                  leading: const Icon(Icons.analytics),
                  title: const Text('Analytics'),
                ),
                ListTile(
                  leading: const Icon(Icons.people),
                  title: const Text('Clients'),
                ),
                ListTile(
                  leading: const Icon(Icons.task),
                  title: const Text('Tasks'),
                ),
                const Spacer(),
                ListTile(
                  leading: const Icon(Icons.settings),
                  title: const Text('Settings'),
                ),
                ListTile(
                  leading: const Icon(Icons.info),
                  title: const Text('About'),
                ),
                ListTile(
                  leading: const Icon(Icons.feedback),
                  title: const Text('Feedback'),
                ),
              ],
            ),
          ),
          
          // Main Content
          Expanded(
            child: SingleChildScrollView(
              padding: const EdgeInsets.all(24),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Header
                  Row(
                    children: [
                      Text(
                        'Dashboard > Home',
                        style: TextStyle(
                          color: Colors.grey[600],
                          fontSize: 14,
                        ),
                      ),
                      const Spacer(),
                      const SearchBar(),
                      const SizedBox(width: 16),
                      const Icon(Icons.notifications),
                      const SizedBox(width: 16),
                      const Icon(Icons.dark_mode),
                    ],
                  ),

                  const SizedBox(height: 32),
                  const Text(
                    'Overview',
                    style: TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),

                  const SizedBox(height: 24),
                  
                  // Stats Cards
                  Row(
                    children: [
                      Expanded(
                        child: _buildStatCard(
                          'Users',
                          '14k',
                          '+25%',
                          Colors.green,
                          const LineChart(LineChartData()),
                        ),
                      ),
                      const SizedBox(width: 24),
                      Expanded(
                        child: _buildStatCard(
                          'Conversions', 
                          '325',
                          '-25%',
                          Colors.red,
                          const LineChart(LineChartData()),
                        ),
                      ),
                      const SizedBox(width: 24),
                      Expanded(
                        child: _buildStatCard(
                          'Event count',
                          '200k',
                          '+5%',
                          Colors.blue,
                          const LineChart(LineChartData()),
                        ),
                      ),
                    ],
                  ),

                  const SizedBox(height: 24),

                  // Charts
                  Row(
                    children: [
                      Expanded(
                        child: _buildChartCard(
                          'Sessions',
                          '13,277',
                          '+35%',
                          const LineChart(LineChartData()),
                        ),
                      ),
                      const SizedBox(width: 24),
                      Expanded(
                        child: _buildChartCard(
                          'Page views and downloads',
                          '1.3M',
                          '-8%',
                          const BarChart(BarChartData()),
                        ),
                      ),
                    ],
                  ),

                  const SizedBox(height: 24),

                  // Details Table
                  Card(
                    child: Padding(
                      padding: const EdgeInsets.all(16),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const Text(
                            'Details',
                            style: TextStyle(
                              fontSize: 18,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          const SizedBox(height: 16),
                          DataTable(
                            columns: const [
                              DataColumn(label: Text('Page Title')),
                              DataColumn(label: Text('Status')),
                              DataColumn(label: Text('Users')),
                              DataColumn(label: Text('Event Count')),
                              DataColumn(label: Text('Views per User')),
                              DataColumn(label: Text('Average Time')),
                              DataColumn(label: Text('Daily Conversions')),
                            ],
                            rows: [
                              _buildDataRow(
                                'Homepage Overview',
                                true,
                                '212423',
                                '8345',
                                '18.5',
                                '2m 15s',
                              ),
                              _buildDataRow(
                                'Product Details - Gadgets',
                                true,
                                '172240',
                                '5653',
                                '9.7',
                                '2m 30s',
                              ),
                              _buildDataRow(
                                'Checkout Process - Step 1',
                                false,
                                '58240',
                                '3455',
                                '15.2',
                                '2m 10s',
                              ),
                              _buildDataRow(
                                'User Profile Dashboard',
                                true,
                                '96240',
                                '112543',
                                '4.5',
                                '2m 40s',
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildStatCard(String title, String value, String change, Color changeColor, Widget chart) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: TextStyle(
                color: Colors.grey[600],
                fontSize: 14,
              ),
            ),
            const SizedBox(height: 8),
            Row(
              children: [
                Text(
                  value,
                  style: const TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const Spacer(),
                Text(
                  change,
                  style: TextStyle(
                    color: changeColor,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 16),
            SizedBox(
              height: 50,
              child: chart,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildChartCard(String title, String value, String change, Widget chart) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Text(
                  title,
                  style: TextStyle(
                    color: Colors.grey[600],
                    fontSize: 14,
                  ),
                ),
                const Spacer(),
                Text(
                  '$value $change',
                  style: const TextStyle(
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 16),
            SizedBox(
              height: 200,
              child: chart,
            ),
          ],
        ),
      ),
    );
  }

  DataRow _buildDataRow(
    String title,
    bool isOnline,
    String users,
    String events,
    String views,
    String time,
  ) {
    return DataRow(
      cells: [
        DataCell(Text(title)),
        DataCell(
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
            decoration: BoxDecoration(
              color: isOnline ? Colors.green[50] : Colors.grey[100],
              borderRadius: BorderRadius.circular(12),
            ),
            child: Text(
              isOnline ? 'Online' : 'Offline',
              style: TextStyle(
                color: isOnline ? Colors.green : Colors.grey,
                fontSize: 12,
              ),
            ),
          ),
        ),
        DataCell(Text(users)),
        DataCell(Text(events)),
        DataCell(Text(views)),
        DataCell(Text(time)),
        const DataCell(Icon(Icons.show_chart, size: 16)),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 300,
      height: 40,
      decoration: BoxDecoration(
        color: Colors.grey[100],
        borderRadius: BorderRadius.circular(8),
      ),
      child: TextField(
        decoration: InputDecoration(
          hintText: 'Search...',
          prefixIcon: const Icon(Icons.search),
          border: InputBorder.none,
          contentPadding: const EdgeInsets.symmetric(horizontal: 16),
        ),
      ),
    );
  }
}