IdCard

main.dart

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          width: 450,
          child: IdCard(
            name: 'Foo Bar',
            job: 'Flutter Developer',
            city: 'Universe',
            employeeNumber: 123456,
            initials: 'ABC',
            image: Image.network('https://randomuser.me/api/portraits/women/57.jpg'),
          ),
        ),
      ),
    );
  }
}

class IdCard extends StatelessWidget {
  final String name;
  final String initials;
  final String job;
  final String? city;
  final int employeeNumber;
  final Image? image;

  const IdCard({
    super.key,
    required this.name,
    required this.initials,
    required this.job,
    this.city,
    required this.employeeNumber,
    this.image,
  });

  @override
  Widget build(final BuildContext context) => Card(
        elevation: 3,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(16),
          side: const BorderSide(
            color: Color(0xFF0B1743),
          ),
        ),
        child: DecoratedBox(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16),
            gradient: const RadialGradient(
              center: Alignment(-0.45, -2.1),
              radius: 1.9,
              colors: [Color(0xFF4A50DB), Color(0xFF1B2C67)],
            ),
          ),
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Row(
                  children: [
                    Container(
                      // 2*2 is the border width
                      width: 45 + 2 * 2,
                      height: 45 + 2 * 2,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(
                          width: 2,
                          color: const Color(0xFF4B6BDC),
                        ),
                      ),
                      child: ClipOval(
                        child: image,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(left: 12),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.baseline,
                            textBaseline: TextBaseline.alphabetic,
                            children: [
                              Text(
                                name,
                                style: Theme.of(context).textTheme.titleMedium!.copyWith(
                                  color: const Color(0xFFF8FAFC),
                                ),
                                overflow: TextOverflow.ellipsis,
                                maxLines: 1,
                              ),
                              Padding(
                                padding: EdgeInsets.only(left: 8),
                                child: Text(
                                  '($initials)',
                                  style: Theme.of(context).textTheme.labelMedium!.copyWith(
                                    color: const Color(0xFF9BA1B0),
                                  ),
                                ),
                              ),
                            ],
                          ),
                          Text(
                            [job, city]
                                .where((final element) => element != null && element.isNotEmpty)
                                .join(', '),
                            style: Theme.of(context).textTheme.titleSmall!.copyWith(
                              color: const Color(0xFF7BD699),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                const SizedBox(height: 40),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    _NameValue(name: 'Employee No.', value: employeeNumber.toString()),
                    const _NameValue(name: 'Used Leave', value: '15 days'),
                    const _NameValue(name: 'Remaining', value: '9 days'),
                  ],
                )
              ],
            ),
          ),
        ),
      );
}

class _NameValue extends StatelessWidget {
  final String name;
  final String value;

  const _NameValue({
    required this.name,
    required this.value,
  });

  @override
  Widget build(final BuildContext context) => Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            name,
            style: Theme.of(context).textTheme.labelLarge!.copyWith(
              color: const Color(0xFF7BD699),
            ),
          ),
          Text(
            value,
            style: Theme.of(context).textTheme.titleMedium!.copyWith(
              color: const Color(0xFFF8FAFC),
            ),
          ),
        ],
      );
}