flutter-ui-sharry.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: PlannerScreen(),
    );
  }
}

enum PlanType { meeting, project, planning }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF1f1f1f),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(
                height: 30,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.grey,
                      borderRadius: BorderRadius.circular(50),
                    ),
                    child: const Icon(
                      Icons.person,
                      size: 50,
                    ),
                  ),
                  const Icon(
                    Icons.add,
                    color: Colors.white,
                    size: 30,
                  ),
                ],
              ),
              const SizedBox(
                height: 25,
              ),
              const Text(
                'MONDAY 16',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              const SizedBox(
                height: 10,
              ),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: [
                    const Text(
                      'TODAY',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 40,
                      ),
                    ),
                    const SizedBox(
                      width: 7,
                    ),
                    Container(
                      width: 7,
                      height: 7,
                      decoration: const BoxDecoration(
                        color: Color.fromARGB(255, 139, 36, 103),
                        shape: BoxShape.circle,
                      ),
                    ),
                    const SizedBox(
                      width: 7,
                    ),
                    const Text(
                      '17 18 19 20 21',
                      style: TextStyle(
                        color: Color.fromARGB(255, 134, 134, 134),
                        fontSize: 40,
                        letterSpacing: 2,
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(
                height: 30,
              ),
              Plan(
                type: PlanType.meeting,
                title: 'DESIGN MEETING',
                start: DateTime.now(),
                end: DateTime.now().add(const Duration(hours: 1)),
                members: const ['ALEX', 'HELENA', 'NANA'],
              ),
              Plan(
                type: PlanType.project,
                title: 'DAILY PROJECT',
                start: DateTime.now().add(const Duration(hours: 2)),
                end: DateTime.now().add(const Duration(hours: 3)),
                members: const ['ME', 'HELENA', 'NANA', 'KORE', 'YUMMY'],
              ),
              Plan(
                type: PlanType.planning,
                title: 'WEEKLY PLANNING',
                start: DateTime.now().add(const Duration(hours: 4)),
                end: DateTime.now().add(const Duration(hours: 5)),
                members: const ['ME', 'HELENA', 'NANA'],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class Plan extends StatelessWidget {
  final String title;
  final DateTime start;
  final DateTime end;
  final PlanType type;
  final List<String> members;
  const Plan({
    super.key,
    required this.title,
    required this.members,
    required this.type,
    required this.start,
    required this.end,
  });

  Color get typeColor {
    if (type == PlanType.meeting) {
      return const Color.fromARGB(255, 254, 247, 84);
    }
    if (type == PlanType.project) {
      return const Color.fromARGB(255, 156, 107, 206);
    }
    if (type == PlanType.planning) {
      return const Color.fromARGB(255, 188, 238, 75);
    }
    return Colors.grey;
  }

  String parseHour(DateTime date) {
    return DateFormat.H().format(date);
  }

  String parseMinute(DateTime date) {
    return DateFormat.m().format(date);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 10),
      decoration: BoxDecoration(
        color: typeColor,
        borderRadius: BorderRadius.circular(30),
      ),
      child: Column(
        children: [
          const SizedBox(
            height: 30,
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(
                width: 15,
              ),
              Column(
                children: [
                  Text(
                    parseHour(start),
                    style: const TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  Text(
                    parseMinute(start),
                    style: const TextStyle(
                      fontSize: 12,
                    ),
                  ),
                  Container(
                    width: 1,
                    height: 20,
                    decoration: const BoxDecoration(
                      color: Colors.black,
                    ),
                  ),
                  Text(
                    parseHour(end),
                    style: const TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  Text(
                    parseMinute(end),
                    style: const TextStyle(
                      fontSize: 12,
                    ),
                  ),
                ],
              ),
              const SizedBox(
                width: 15,
              ),
              Expanded(
                child: Text(
                  title,
                  style: const TextStyle(
                    fontSize: 50,
                    fontWeight: FontWeight.w600,
                    height: 1,
                  ),
                  softWrap: false,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
          const SizedBox(
            height: 25,
          ),
          Row(
            children: [
              const SizedBox(
                width: 55,
              ),
              for (var i = 0; i < members.length; i++)
                Row(children: [
                  Text(
                    i < 3 ? members[i] : '',
                    style: const TextStyle(
                      fontSize: 12,
                    ),
                  ),
                  const SizedBox(
                    width: 30,
                  ),
                  Text(
                    members.length > 3 && i == 2
                        ? '+${members.length - 3}'
                        : '',
                    style: const TextStyle(
                      fontSize: 12,
                    ),
                  ),
                ])
            ],
          ),
          const SizedBox(
            height: 20,
          ),
        ],
      ),
    );
  }
}