flutter-UI-clone.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: const Color(0xFF181818),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 8,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(
                  height: 50,
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 10,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: const [
                          CircleAvatar(
                            radius: 25, // Image radius
                            backgroundImage: NetworkImage(
                                'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
                          ),
                          Icon(
                            Icons.add,
                            color: Colors.white,
                            size: 30,
                          ),
                        ],
                      ),
                      const SizedBox(
                        height: 30,
                      ),
                      Text(
                        'MONDAY 16',
                        style: TextStyle(
                          fontSize: 13,
                          color: Colors.white.withOpacity(0.5),
                        ),
                      ),
                      const SizedBox(
                        height: 5,
                      ),
                      SizedBox(
                        height: 50,
                        child: ListView(
                          scrollDirection: Axis.horizontal,
                          shrinkWrap: true,
                          children: [
                            const Text(
                              'TODAY',
                              style: TextStyle(
                                fontSize: 40,
                                fontWeight: FontWeight.w400,
                                color: Colors.white,
                              ),
                            ),
                            const Padding(
                              padding: EdgeInsets.all(8),
                              child: Icon(
                                Icons.circle,
                                color: Colors.pink,
                                size: 10,
                              ),
                            ),
                            Text(
                              '17 18 19 20 21 22 23',
                              style: TextStyle(
                                fontSize: 40,
                                color: Colors.white.withOpacity(0.5),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                const SizedBox(
                  height: 30,
                ),
                const TodoCard(
                  name: 'DESIGN\nMEETING',
                  time: ['11', '30', '12', '20'],
                  people: ['ALEX', 'HELENA', 'NANA'],
                  color: Color(0xFFfef755),
                ),
                const TodoCard(
                  name: 'DAILY\nPROJECT',
                  time: ['12', '35', '14', '10'],
                  people: ['ME', 'RICHARD', 'CIRY', 'DEN', 'NANA', 'MARK'],
                  color: Color(0xFF9D6BCD),
                ),
                const TodoCard(
                  name: 'WEEKLY\nPLANNING',
                  time: ['15', '00', '16', '30'],
                  people: ['DEN', 'NANA', 'MARK'],
                  color: Color(0xFFBBEE4B),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class TodoCard extends StatelessWidget {
  final String name;
  final Color color;
  final List<String> time, people;

  const TodoCard({
    super.key,
    required this.name,
    required this.time,
    required this.people,
    required this.color,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 10),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(30),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 30),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  time[0],
                  style: const TextStyle(
                    color: Colors.black,
                    fontSize: 30,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                Text(
                  time[1],
                  style: const TextStyle(
                    color: Colors.black,
                    fontSize: 15,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                SizedBox(
                  height: 20,
                  child: VerticalDivider(
                    color: Colors.black.withOpacity(0.4),
                    thickness: 1,
                  ),
                ),
                Text(
                  time[2],
                  style: const TextStyle(
                    color: Colors.black,
                    fontSize: 30,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                Text(
                  time[3],
                  style: const TextStyle(
                    color: Colors.black,
                    fontSize: 15,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 130,
              child: Padding(
                padding: const EdgeInsets.only(left: 15),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      name,
                      style: const TextStyle(
                        color: Colors.black,
                        fontSize: 55,
                        height: 0.9,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Row(
                          children: people.sublist(0, 3).map((name) {
                            int index = people.indexOf(name);
                            return Container(
                              margin: const EdgeInsets.only(right: 10, top: 10),
                              child: Text(
                                name,
                                style: TextStyle(
                                  fontWeight: FontWeight.w500,
                                  color: name == 'ME'
                                      ? Colors.black
                                      : Colors.black.withOpacity(0.5),
                                ),
                              ),
                            );
                          }).toList(),
                        ),
                        Text(
                          people.length > 3 ? '+${people.length - 3}' : '',
                          style: TextStyle(
                            fontWeight: FontWeight.w500,
                            color: Colors.black.withOpacity(0.5),
                          ),
                        )
                      ],
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}