Calendar Day element

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Stack(
            children: [
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.blue,
                    radius: 18,
                  ),
                  CircleAvatar(
                    backgroundColor: Colors.blue,
                    radius: 18,
                  ),
                  CircleAvatar(
                    backgroundColor: Colors.blue,
                    radius: 18,
                  ),
                  CircleAvatar(
                    backgroundColor: Colors.blue,
                    radius: 18,
                  ),
                  CircleAvatar(
                    backgroundColor: Colors.blue,
                    radius: 18,
                  ),
                ],
              ),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  CustomWidget(firstDay: true),
                  CustomWidget(firstDay: true, selected: true),
                  CustomWidget(firstDay: true, selected: true, showDot: true),
                  CustomWidget(firstDay: false, selected: true),
                  CustomWidget(firstDay: false),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class CustomWidget extends StatelessWidget {
  final bool firstDay;
  final bool showDot;
  final bool selected;

  const CustomWidget({
    super.key,
    this.firstDay = false,
    this.showDot = false,
    this.selected = false,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 36,
      decoration: selected
          ? BoxDecoration(
              color: Colors.red.withOpacity(0.5),
              borderRadius: BorderRadius.circular(36),
            )
          : BoxDecoration(),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          SizedBox(height: 2),
          Text(
            '01',
            style: TextStyle(
              fontSize: 14,
              height: 1.0,
            ),
          ),
          if (firstDay)
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 3.0),
              child: Text(
                'Dhu’l-Q.',
                style: TextStyle(
                  fontSize: 6,
                  height: 1.0,
                ),
              ),
            )
          else
            Text(
              '02',
              style: TextStyle(
                fontSize: 12,
                height: 1.0,
              ),
            ),
          SizedBox(height: 1),
          SizedBox(
            height: 4,
            width: 4,
            child: showDot
                ? DecoratedBox(
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.black,
                    ),
                  )
                : null,
          ),
          SizedBox(height: 3)
        ],
      ),
    );
  }
}