nomadcoders - flutter - challenge - senven

main.dart

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

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Challenges / seven',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        colorScheme: const ColorScheme.dark(
          background: Color(0x01f1f1fc),
        ),
      ),
      home: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 16,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: const [
                      CircleAvatar(
                        foregroundImage: NetworkImage(
                          "https://avatars.githubusercontent.com/u/5476413?v=4",
                        ),
                        radius: 40,
                      ),
                      FaIcon(
                        FontAwesomeIcons.plus,
                        size: 40,
                      )
                    ],
                  ),
                ),
                const SizedBox(height: 30),
                Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 16,
                  ),
                  child: Container(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      'MONDAY 16',
                      style: TextStyle(
                        color: Colors.grey.shade400,
                        fontSize: 20,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ),
                ),
                const SizedBox(height: 15),
                Padding(
                  padding: const EdgeInsets.only(left: 16),
                  child: Container(
                    alignment: Alignment.centerLeft,
                    child: RichText(
                      maxLines: 1,
                      overflow: TextOverflow.clip,
                      text: TextSpan(
                          text: 'TODAY',
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 45,
                          ),
                          children: [
                            TextSpan(
                              text: '·',
                              style: TextStyle(
                                  color: Colors.pink[800],
                                  fontSize: 45,
                                  fontWeight: FontWeight.bold),
                            ),
                            TextSpan(
                              text: '17  18  19  20',
                              style: TextStyle(
                                color: Colors.grey.shade600,
                                fontSize: 45,
                              ),
                            ),
                          ]),
                    ),
                  ),
                ),
                const SizedBox(height: 30),
                TaskCardWidget(
                  startTimeHour: "11",
                  startTimeMinute: "30",
                  endTimeHour: "12",
                  endTimeMinute: "20",
                  taskLine1: "DESIGN",
                  taskLine2: "MEETING",
                  tags: const [
                    {"text": "ALEX", "selected": false},
                    {"text": "HELENA", "selected": false},
                    {"text": "NANA", "selected": false},
                  ],
                  cardColor: Colors.yellow.shade400,
                ),
                const SizedBox(height: 10),
                TaskCardWidget(
                  startTimeHour: "12",
                  startTimeMinute: "35",
                  endTimeHour: "14",
                  endTimeMinute: "10",
                  taskLine1: "DAILY",
                  taskLine2: "PROJECT",
                  tags: const [
                    {"text": "ME", "selected": true},
                    {"text": "RICHARD", "selected": false},
                    {"text": "CIRY", "selected": false},
                    {"text": "+4", "selected": false},
                  ],
                  cardColor: Colors.deepPurple.shade300,
                ),
                const SizedBox(height: 10),
                TaskCardWidget(
                  startTimeHour: "15",
                  startTimeMinute: "00",
                  endTimeHour: "16",
                  endTimeMinute: "30",
                  taskLine1: "WEEKLY",
                  taskLine2: "PLANNING",
                  tags: const [
                    {"text": "DEN", "selected": false},
                    {"text": "NANA", "selected": false},
                    {"text": "MARK", "selected": false},
                  ],
                  cardColor: Colors.lightGreen.shade400,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class TaskCardWidget extends StatelessWidget {
  final Color? cardColor;
  final String startTimeHour;
  final String startTimeMinute;
  final String endTimeHour;
  final String endTimeMinute;
  final String taskLine1;
  final String taskLine2;
  final List<Map<String, dynamic>> tags;
  const TaskCardWidget({
    super.key,
    required this.startTimeHour,
    required this.startTimeMinute,
    required this.endTimeHour,
    required this.endTimeMinute,
    required this.taskLine1,
    required this.taskLine2,
    required this.tags,
    required this.cardColor,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(
          35,
        ),
        color: cardColor,
      ),
      child: Padding(
        padding: const EdgeInsets.only(
          top: 30,
          left: 16,
          right: 16,
          bottom: 5,
        ),
        child: Row(
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Column(
                  children: [
                    Text(
                      startTimeHour,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 30,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    Text(
                      startTimeMinute,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 15,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    SizedBox(
                      height: 20,
                      width: 1,
                      child: Container(
                        color: Colors.black,
                      ),
                    ),
                    Text(
                      endTimeHour,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 30,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    Text(
                      endTimeMinute,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 15,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ],
                ),
                const SizedBox(width: 20),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      taskLine1,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 65,
                        fontWeight: FontWeight.w500,
                        height: 1,
                      ),
                    ),
                    Text(
                      taskLine2,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 65,
                        fontWeight: FontWeight.w500,
                        height: 0.8,
                      ),
                    ),
                    const SizedBox(height: 20),
                    Row(
                      children: [
                        for (var map in tags)
                          Padding(
                            padding: const EdgeInsets.only(
                              right: 30,
                            ),
                            child: Text(
                              map["text"],
                              style: TextStyle(
                                color: map["selected"]
                                    ? Colors.black
                                    : Colors.black38,
                                fontSize: 20,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                      ],
                    )
                  ],
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}