Overview

• File: lib/views/ringing_page.dart

The RingingPage is a Flutter widget that provides a call interface for the HVC Mobile application. It displays a ringing screen with options to accept or decline incoming calls, or cancel outgoing calls. The page includes caller information, call status, and appropriate action buttons based on whether the user is making or receiving a call.

Class Structure

Class Definition

class RingingPage extends StatelessWidget {
  static const String routeName = '/RingingPage';
  RingingPage({Key? key, required this.isMeCalling, required this.nameToShow})
      : super(key: key);

  final bool isMeCalling;
  final String nameToShow;
  final RealTimeController realTimeController = Get.find();

  final callStyle = const TextStyle(
    fontSize: 16,
    color: kAppColorWhite,
  );

  @override
  Widget build(BuildContext context) {
    // Implementation...
  }
}

Dependencies

Required Packages

• flutter/material.dart - Core Flutter UI components
• get/get.dart - State management and routing

Internal Dependencies

• controllers/real_time_controller.dart - Real-time communication
• hlk_helpers/hlk_utils.dart - Utility functions
• shared/constants.dart - Constants
• widgets/call_icon.dart - Call action button widget
• views/call_page.dart - Call page for accepted calls

State Management

Controller Initialization

final RealTimeController realTimeController = Get.find();

Reactive State Variables

// In RealTimeController
RxString callStatus = ''.obs;
Rx<CallDetails?> callDetails = Rx<CallDetails?>(null);

Call Handling

Initialization

@override
Widget build(BuildContext context) {
  realTimeController.initRingingTimer(isMeCalling, nameToShow);
  // Rest of the build method...
}

Accepting Calls

CallIcon(
  textAtTop: false,
  color: kAppColorGreen,
  text: 'Accept',
  iconData: Icons.call,
  onPressed: () async {
    realTimeController.cancelRingingTimer();
    final callDetails = await realTimeController.acceptCall();
    await realTimeController.resetCalling();
    if (callDetails != null) {
      Get.off(
        CallPage(
          callDetails: callDetails,
          isEventOwner: false,
        ),
      );
    }
  },
  style: callStyle,
)

Declining Calls

CallIcon(
  textAtTop: false,
  color: Colors.red,
  text: 'Decline',
  iconData: Icons.call_end,
  onPressed: () async {
    realTimeController.cancelRingingTimer();
    await realTimeController.cancelCall();
    await realTimeController.resetCalling();
    Get.back();
  },
  style: callStyle,
)

Canceling Outgoing Calls

CallIcon(
  color: Colors.red,
  text: 'Cancel',
  iconData: Icons.call_end,
  onPressed: () async {
    realTimeController.cancelRingingTimer();
    await realTimeController.endCall();
    await realTimeController.resetCalling();
    Get.back();
  },
  style: callStyle,
  textAtTop: false,
)

UI Components

Main Layout

Scaffold(
  backgroundColor: kAppColorBlack,
  body: SafeArea(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // Caller information
            ],
          ),
        ),
        // Action buttons
        verticalSpace(0.08),
      ],
    ),
  ),
)

Caller Avatar

CircleAvatar(
  backgroundColor: kAppColorGrey,
  backgroundImage: const AssetImage('assets/images/hvclogo.png'),
  radius: Get.context!.isLandscape
      ? getHeight(0.15)
      : getWidth(0.15),
)

Caller Name

Text(
  textAlign: TextAlign.center,
  nameToShow,
  style: callStyle.copyWith(
    fontWeight: FontWeight.bold,
    fontSize: 20,
  ),
  maxLines: 1,
  softWrap: false,
  overflow: TextOverflow.ellipsis,
)

Call Status

Obx(
  () => Text(
    textAlign: TextAlign.center,
    realTimeController.callStatus.value,
    style: callStyle,
    maxLines: 1,
    softWrap: false,
    overflow: TextOverflow.ellipsis,
  ),
)

Action Buttons

// For incoming calls
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    CallIcon(
      textAtTop: false,
      color: Colors.red,
      text: 'Decline',
      iconData: Icons.call_end,
      onPressed: () async {
        // Decline call implementation
      },
      style: callStyle,
    ),
    CallIcon(
      textAtTop: false,
      color: kAppColorGreen,
      text: 'Accept',
      iconData: Icons.call,
      onPressed: () async {
        // Accept call implementation
      },
      style: callStyle,
    ),
  ],
)

// For outgoing calls
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    CallIcon(
      color: Colors.red,
      text: 'Cancel',
      iconData: Icons.call_end,
      onPressed: () async {
        // Cancel call implementation
      },
      style: callStyle,
      textAtTop: false,
    ),
  ],
)

Responsive Layout

Orientation Handling

CircleAvatar(
  backgroundColor: kAppColorGrey,
  backgroundImage: const AssetImage('assets/images/hvclogo.png'),
  radius: Get.context!.isLandscape
      ? getHeight(0.15)
      : getWidth(0.15),
)