How to Build a Doctor Appointments Screen in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

import 'widgets/appointment_card.dart';
import 'widgets/bottom_nav_bar.dart';
import 'widgets/segmented_tabs.dart';

/// "My Appointments" — a medical appointments screen (Active / History).
///
/// Self-contained, pure Flutter, no external packages. Renders standalone when
/// pushed as a route — it carries its own colors and type, and does not depend
/// on any app-level theme.
///
/// Bundles its exact design font (Inter) per CONVENTIONS rule 5, and uses
/// network avatars (Pravatar) so it needs zero image-asset setup.
class MyAppointmentsScreen extends StatefulWidget {
  const MyAppointmentsScreen({super.key});

  @override
  State<MyAppointmentsScreen> createState() => _MyAppointmentsScreenState();
}

class _MyAppointmentsScreenState extends State<MyAppointmentsScreen> {
  static const Color _background = Color(0xFFF9F9FE);
  static const Color _title = Color(0xFF0F0F0F);

  int _selectedTab = 0; // 0 = Active, 1 = History
  int _navIndex = 2; // Document tab, per the design.

  // Demo data. In a real app this comes from your data layer; avatars use
  // network URLs (Pravatar) so the screen needs zero asset setup.
  static const List<Appointment> _activeAppointments = <Appointment>[
    Appointment(
      doctorName: 'Billy Long',
      specialty: 'General Practitioners',
      dateTime: 'Thu, Jan 11 at 09.00 AM - 11.30 AM',
      status: 'Ongoing',
      avatarUrl: 'https://i.pravatar.cc/150?img=12',
    ),
    Appointment(
      doctorName: 'Sophia Martinez',
      specialty: 'Cardiologist',
      dateTime: 'Mon, Jan 15 at 10.00 AM - 11.00 AM',
      status: 'Upcoming',
      avatarUrl: 'https://i.pravatar.cc/150?img=45',
    ),
    Appointment(
      doctorName: 'Daniel Reed',
      specialty: 'Dermatologist',
      dateTime: 'Wed, Jan 17 at 02.30 PM - 03.15 PM',
      status: 'Upcoming',
      avatarUrl: 'https://i.pravatar.cc/150?img=33',
    ),
  ];

  static const List<Appointment> _historyAppointments = <Appointment>[
    Appointment(
      doctorName: 'Emma Wilson',
      specialty: 'Pediatrician',
      dateTime: 'Mon, Dec 18 at 09.30 AM - 10.15 AM',
      status: 'Completed',
      avatarUrl: 'https://i.pravatar.cc/150?img=5',
    ),
    Appointment(
      doctorName: 'James Carter',
      specialty: 'Orthopedic Surgeon',
      dateTime: 'Fri, Dec 08 at 01.00 PM - 02.00 PM',
      status: 'Completed',
      avatarUrl: 'https://i.pravatar.cc/150?img=60',
    ),
    Appointment(
      doctorName: 'Olivia Brown',
      specialty: 'Neurologist',
      dateTime: 'Tue, Nov 28 at 11.00 AM - 11.45 AM',
      status: 'Cancelled',
      avatarUrl: 'https://i.pravatar.cc/150?img=47',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: _background,
      body: SafeArea(
        bottom: false,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            const Padding(
              padding: EdgeInsets.fromLTRB(24, 20, 24, 0),
              child: Text(
                'My Appointment',
                style: TextStyle(
                  fontFamily: 'Inter',
                  color: _title,
                  fontSize: 32,
                  fontWeight: FontWeight.w700,
                  height: 1.2,
                ),
              ),
            ),
            const SizedBox(height: 8),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 24),
              child: SegmentedTabs(
                labels: const <String>['Active', 'History'],
                selectedIndex: _selectedTab,
                onChanged: (int index) =>
                    setState(() => _selectedTab = index),
              ),
            ),
            const SizedBox(height: 16),
            Expanded(
              child: _AppointmentList(
                appointments: _selectedTab == 0
                    ? _activeAppointments
                    : _historyAppointments,
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: AppointmentsBottomNav(
        currentIndex: _navIndex,
        onChanged: (int index) => setState(() => _navIndex = index),
      ),
    );
  }
}

/// Scrollable list of appointment cards (used for both Active and History).
class _AppointmentList extends StatelessWidget {
  const _AppointmentList({required this.appointments});

  final List<Appointment> appointments;

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      padding: const EdgeInsets.fromLTRB(13, 0, 13, 24),
      itemCount: appointments.length,
      separatorBuilder: (BuildContext context, int index) =>
          const SizedBox(height: 16),
      itemBuilder: (BuildContext context, int index) {
        return AppointmentCard(
          appointment: appointments[index],
          onSeeDetails: () {},
        );
      },
    );
  }
}