Generated code from pixels2flutter.dev

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        primarySwatch: Colors.blue,
      ),
      home: DashboardScreen(),
    );
  }
}

class DashboardScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Hi, Alex!',
                style: TextStyle(
                  fontSize: 32.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
              ),
              SizedBox(height: 8.0),
              Text(
                'Looks that you\'ve been active.\nKeep up the good work!',
                style: TextStyle(
                  fontSize: 18.0,
                  color: Colors.black.withOpacity(0.6),
                ),
              ),
              SizedBox(height: 24.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  _buildActivityCard(
                    'Cycling',
                    '14 km',
                    '50 min',
                    Colors.blue,
                    'https://placehold.co/64x64?description=Icon%20for%20Cycling',
                  ),
                  _buildBalanceCard(),
                ],
              ),
              SizedBox(height: 16.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  _buildActivityCard(
                    'Steps',
                    '22 345',
                    '14 km',
                    Colors.purple,
                    'https://placehold.co/64x64?description=Icon%20for%20Steps',
                  ),
                  _buildActivityCard(
                    'Running',
                    '2 km',
                    '10 min',
                    Colors.blue,
                    'https://placehold.co/64x64?description=Icon%20for%20Running',
                  ),
                ],
              ),
              SizedBox(height: 16.0),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  _buildActivityCard(
                    'Calories burnt',
                    '200 cal',
                    '',
                    Colors.orange,
                    'https://placehold.co/64x64?description=Icon%20for%20Calories%20Burnt',
                  ),
                  _buildActivityCard(
                    'Points',
                    '217',
                    '',
                    Colors.red,
                    'https://placehold.co/64x64?description=Icon%20for%20Points',
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildActivityCard(String title, String value, String subtitle, Color color, String imageUrl) {
    return Expanded(
      child: Container(
        padding: const EdgeInsets.all(16.0),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(16.0),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.1),
              blurRadius: 8.0,
              offset: Offset(0, 2),
            ),
          ],
        ),
        child: Column(
          children: [
            Image.network(imageUrl, width: 64, height: 64),
            SizedBox(height: 8.0),
            Text(
              title,
              style: TextStyle(
                fontSize: 18.0,
                color: Colors.black.withOpacity(0.6),
              ),
            ),
            SizedBox(height: 8.0),
            Text(
              value,
              style: TextStyle(
                fontSize: 24.0,
                fontWeight: FontWeight.bold,
                color: color,
              ),
            ),
            if (subtitle.isNotEmpty) ...[
              SizedBox(height: 4.0),
              Text(
                subtitle,
                style: TextStyle(
                  fontSize: 16.0,
                  color: Colors.black.withOpacity(0.6),
                ),
              ),
            ],
          ],
        ),
      ),
    );
  }

  Widget _buildBalanceCard() {
    return Expanded(
      child: Container(
        padding: const EdgeInsets.all(16.0),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(16.0),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.1),
              blurRadius: 8.0,
              offset: Offset(0, 2),
            ),
          ],
        ),
        child: Column(
          children: [
            Image.network('https://placehold.co/64x64?description=Icon%20for%20Balance', width: 64, height: 64),
            SizedBox(height: 8.0),
            Text(
              'Balance',
              style: TextStyle(
                fontSize: 18.0,
                color: Colors.black.withOpacity(0.6),
              ),
            ),
            SizedBox(height: 8.0),
            Text(
              '\$32.85',
              style: TextStyle(
                fontSize: 24.0,
                fontWeight: FontWeight.bold,
                color: Colors.blue,
              ),
            ),
            SizedBox(height: 16.0),
            _buildProgressBar(34, 50, Colors.blue),
          ],
        ),
      ),
    );
  }

  Widget _buildProgressBar(int value, int total, Color color) {
    return Stack(
      children: [
        Container(
          height: 8.0,
          decoration: BoxDecoration(
            color: Colors.grey[300],
            borderRadius: BorderRadius.circular(4.0),
          ),
        ),
        FractionallySizedBox(
          widthFactor: value / total,
          child: Container(
            height: 8.0,
            decoration: BoxDecoration(
              color: color,
              borderRadius: BorderRadius.circular(4.0),
            ),
          ),
        ),
        Positioned.fill(
          child: Center(
            child: Text(
              '$value of $total',
              style: TextStyle(
                fontSize: 12.0,
                color: Colors.black.withOpacity(0.6),
              ),
            ),
          ),
        ),
      ],
    );
  }
}