ui_clone_coding.dart

import 'package:flutter/material.dart';

class UIClone extends StatelessWidget {
  const UIClone({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: const Color(0xFF181818),
        body: SingleChildScrollView(
          clipBehavior: Clip.hardEdge,
          child: Column(
            children: [
              const SizedBox(
                height: 40,
              ),
              const Padding(
                  padding: EdgeInsets.symmetric(horizontal: 12),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      CircleAvatar(
                        backgroundImage:
                            AssetImage('assets/images/portrait_male.png'),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Icon(
                            Icons.add,
                            size: 32,
                            color: Colors.white,
                          ),
                        ],
                      ),
                    ],
                  )),
              const SizedBox(
                height: 20,
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'MONDAY 16',
                      style: TextStyle(
                        color: Colors.white.withOpacity(0.8),
                        fontSize: 14,
                      ),
                    ),
                    Row(
                      children: [
                        const Text(
                          'TODAY',
                          style: TextStyle(fontSize: 36, color: Colors.white),
                        ),
                        Text(
                          ' ∙ ',
                          style: TextStyle(
                              fontSize: 48,
                              fontWeight: FontWeight.bold,
                              color: Colors.purple.shade600),
                        ),
                        Text(
                          '17  18  19  20',
                          style: TextStyle(
                              fontSize: 36,
                              color: Colors.white.withOpacity(0.5)),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              CalendarCard(
                title: 'DESIGN\nMEETING',
                names: const ['ALEX', 'HELENA', 'NANA'],
                fromHour: '11',
                fromMinute: '30',
                toHour: '12',
                toMinute: '20',
                color: Colors.amberAccent.shade100,
              ),
              const SizedBox(
                height: 10,
              ),
              CalendarCard(
                title: 'DAILY\nPROJECT',
                names: const [
                  'ME',
                  'RICHARD',
                  'CIRY',
                  'ROME',
                  'JULIA',
                  'JACK',
                  'JANE'
                ],
                fromHour: '12',
                fromMinute: '35',
                toHour: '14',
                toMinute: '10',
                color: Colors.deepPurpleAccent.shade200,
              ),
              const SizedBox(
                height: 10,
              ),
              CalendarCard(
                title: 'WEEKLY\nPLANNING',
                names: const ['DEN', 'NANA', 'MARK'],
                fromHour: '15',
                fromMinute: '00',
                toHour: '16',
                toMinute: '30',
                color: Colors.lightGreen.shade400,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class CalendarCard extends StatelessWidget {
  final String title, fromHour, fromMinute, toHour, toMinute;
  final List<String> names;
  final Color color;

  const CalendarCard({
    super.key,
    required this.title,
    required this.names,
    required this.color,
    required this.fromHour,
    required this.fromMinute,
    required this.toHour,
    required this.toMinute,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8),
      child: Container(
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(25),
        ),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Column(
                children: [
                  Text(
                    fromHour,
                    style: const TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    fromMinute,
                    style: const TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  const Text(
                    '|',
                    style: TextStyle(
                      fontSize: 30,
                      fontWeight: FontWeight.w100,
                    ),
                  ),
                  Text(
                    toHour,
                    style: const TextStyle(
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    toMinute,
                    style: const TextStyle(
                        fontSize: 14, fontWeight: FontWeight.w600),
                  ),
                ],
              ),
              const SizedBox(
                width: 16,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                      fontSize: 52,
                    ),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  Row(
                    children: [
                      for (var name in names.sublist(0, 3))
                        Padding(
                          padding: const EdgeInsets.only(right: 32),
                          child: Text(
                            name,
                            style: TextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.w500,
                              color: Colors.black.withOpacity(0.4),
                            ),
                          ),
                        ),
                      if (names.length >= 4)
                        Text(
                          '+${names.length - 3}',
                          style: TextStyle(
                            fontSize: 14,
                            fontWeight: FontWeight.w500,
                            color: Colors.black.withOpacity(0.4),
                          ),
                        ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}