flutter_ui

import 'package:flutter/material.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.black,
        body: Column(
          children: [
            const SizedBox(
              height: 40,
            ),
            const Header(),
            const SizedBox(
              height: 30,
            ),
            const Calendar(),
            const SizedBox(
              height: 20,
            ),
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  children: const [
                    Schedule(
                      title: 'DESIGN\nMEETING',
                      background: Colors.yellow,
                      startHour: '11',
                      endHour: '30',
                      startMin: '12',
                      endMin: '20',
                      participants: ['ALEX', 'HELENA', 'NANA'],
                    ),
                    SizedBox(height: 5),
                    Schedule(
                      title: 'DAILY\nPROJECT',
                      background: Colors.purple,
                      startHour: '12',
                      endHour: '35',
                      startMin: '14',
                      endMin: '10',
                      participants: ['ME', 'RICHARD', 'CIRY', '+4'],
                    ),
                    SizedBox(height: 5),
                    Schedule(
                      title: 'WEEKLY\nPLANNING',
                      background: Colors.green,
                      startHour: '15',
                      endHour: '00',
                      startMin: '16',
                      endMin: '00',
                      participants: ['DEN', 'NANA', 'MARK'],
                    )
                  ],
                ),
              ),
            ),
          ],
        ));
  }
}

class Schedule extends StatelessWidget {
  final String title;
  final Color background;
  final String startHour;
  final String startMin;
  final String endHour;
  final String endMin;
  final List<String> participants;
  const Schedule({
    super.key,
    required this.title,
    required this.background,
    required this.startHour,
    required this.startMin,
    required this.endHour,
    required this.endMin,
    required this.participants,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: background,
        borderRadius: const BorderRadius.all(
          Radius.circular(30),
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.only(
          top: 40,
          left: 10,
          bottom: 15,
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(
              children: [
                Text(
                  startHour,
                  style: const TextStyle(
                      fontSize: 20, fontWeight: FontWeight.bold),
                ),
                Text(
                  endHour,
                  style: const TextStyle(fontSize: 15),
                ),
                const Text('|',
                    style: TextStyle(
                      fontSize: 30,
                    )),
                Text(
                  startMin,
                  style: const TextStyle(
                      fontSize: 20, fontWeight: FontWeight.bold),
                ),
                Text(
                  endMin,
                  style: const TextStyle(fontSize: 15),
                ),
              ],
            ),
            const SizedBox(
              width: 15,
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 50,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                const SizedBox(height: 30),
                Row(
                  children: [
                    for (var name in participants)
                      Row(
                        children: [
                          Text(name,
                              style: TextStyle(
                                color:
                                    name == 'ME' ? Colors.black : Colors.grey,
                              )),
                          const SizedBox(
                            width: 20,
                          )
                        ],
                      )
                  ],
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'MONDAY 16',
          style: TextStyle(
            color: Colors.white.withOpacity(0.8),
          ),
        ),
        const SizedBox(
          height: 8,
        ),
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              Text(
                'TODAY',
                style: TextStyle(
                  fontSize: 40,
                  color: Colors.white.withOpacity(0.9),
                ),
              ),
              Container(
                margin: const EdgeInsets.symmetric(
                  horizontal: 5,
                ),
                child: Icon(
                  Icons.circle,
                  color: Colors.red.withOpacity(0.7),
                  size: 10,
                ),
              ),
              const Day(17),
              const SizedBox(
                width: 20,
              ),
              const Day(18),
              const SizedBox(
                width: 20,
              ),
              const Day(19),
              const SizedBox(
                width: 20,
              ),
              const Day(20),
              const SizedBox(
                width: 20,
              ),
              const Day(21),
            ],
          ),
        )
      ],
    );
  }
}

class Day extends StatelessWidget {
  final int day;
  const Day(
    this.day, {
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Text(
      '$day',
      style: const TextStyle(color: Colors.grey, fontSize: 40),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Container(
          width: 50,
          height: 50,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(100),
            color: Colors.red,
          ),
          child: Image.network(
            'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
            scale: 10,
          ),
        ),
        IconButton(
          icon: const Icon(
            Icons.add,
            color: Colors.white,
            size: 30,
          ),
          onPressed: () {},
        )
      ],
    );
  }
}