Overview

• File: lib/views/rapid_connect_page.dart

The RapidConnectPage is a Flutter widget that provides a quick connection interface for the HVC Mobile application. It displays a QR code for rapid connection to meetings or sessions, with a timer and progress indicator for time-limited connections.

Class Structure

Class Definition

class RapidConnectPage extends StatelessWidget {
  static const String routeName = '/RapidConnectPage';

  final RapidConnectDto rapidConnectDto;

  RapidConnectPage({Key? key, required this.rapidConnectDto}) : super(key: key);

  final MeetingsController meetingsController = Get.find();
  final RealTimeController realTimeController = Get.find();

  @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
• controllers/meetings_controller.dart - Meeting management
• models/dto_models.dart - Data transfer objects
• hlk_helpers/hlk_utils.dart - Utility functions
• shared/constants.dart - Constants

State Management

Controller Initialization

final MeetingsController meetingsController = Get.find();
final RealTimeController realTimeController = Get.find();

Reactive State Variables

// In MeetingsController
RxBool showTimer = false.obs;
RxDouble timeProgress = 0.0.obs;
RxInt duration = 0.obs;
Uint8List byteArray = Uint8List(0);

Rapid Connect Initialization

Initialization Process

@override
Widget build(BuildContext context) {
  meetingsController.isRapidConnectPageOpened = true;
  realTimeController
      .initRapidConnect(rapidConnectDto.uniqueId, rapidConnectDto.joinCode)
      .then((value) {
    if (value != null) {
      if (value.success)
        HlkDialog.showSuccessSnackBar(
            value.message ?? 'Rapid connect request sent successfully');
      else
        HlkDialog.showErrorSnackBar(
            value.message ?? 'Rapid connect request failed');
    }
  });

  var isLandscape = Get.context!.isLandscape;
  var s = isLandscape ? getHeight(0.7) : getWidth(0.7);
  var hasTimer = rapidConnectDto.durationInSeconds > 0;
  if (hasTimer) meetingsController.initRapidConnectCounter();

  // Rest of the build method...
}

Timer Initialization

// In MeetingsController
void initRapidConnectCounter() {
  showTimer.value = true;
  duration.value = durationInSeconds;
  timeProgress.value = 1.0;

  Timer.periodic(const Duration(seconds: 1), (timer) {
    if (duration.value > 0) {
      duration.value--;
      timeProgress.value = duration.value / durationInSeconds;
    } else {
      showTimer.value = false;
      timer.cancel();
    }
  });
}

UI Components

Main Layout

Scaffold(
  appBar: AppBar(
    title: Obx(
      () => Text(
        meetingsController.showTimer.value
            ? rapidConnectDto.displayName
            : 'Go Back',
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
        textAlign: TextAlign.center,
      ),
    ),
  ),
  body: Center(
    child: isLandscape
        ? Obx(
            () => Row(
              // Landscape layout
            ),
          )
        : Obx(
            () => Column(
              // Portrait layout
            ),
          ),
  ),
)

QR Code Display

Obx(() => meetingsController.showTimer.value
    ? Image.memory(
        meetingsController.byteArray,
        height: s,
        width: s,
        fit: BoxFit.contain,
      )
    : Opacity(
        opacity: 0.2,
        child: Image.asset(
          'assets/images/qrcode.png',
          height: s,
          width: s,
          fit: BoxFit.cover,
        ),
      ))

Join Code Display

Obx(
  () => Text(
    meetingsController.showTimer.value
        ? 'Code: ${rapidConnectDto.joinCode}'
        : 'Rapid Connect Session Expired',
    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
    textAlign: TextAlign.center,
  ),
)

Progress Indicator

Obx(() => Container(
      margin: const EdgeInsets.symmetric(horizontal: 48),
      child: LinearProgressIndicator(
        value: meetingsController.timeProgress.value,
        color: kAppColorPurple,
      ),
    ))

Responsive Layout

Orientation Detection

return OrientationBuilder(builder: (context, orientation) {
  isLandscape = orientation == Orientation.landscape;
  // Layout implementation...
});

Landscape Layout

Row(
  children: [
    Expanded(
      child: Padding(
        padding: const EdgeInsets.all(32),
        child: Obx(() => meetingsController.showTimer.value
            ? Image.memory(
                meetingsController.byteArray,
                height: s,
                width: s,
                fit: BoxFit.contain,
              )
            : Opacity(
                opacity: 0.2,
                child: Image.asset(
                  'assets/images/qrcode.png',
                  height: s,
                  width: s,
                  fit: BoxFit.cover,
                ),
              )),
      ),
    ),
    Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // Join code and progress indicator
        ],
      ),
    )
  ],
)

Portrait Layout

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    // QR code
    verticalSpace(0.03),
    verticalSpace(0.02),
    // Join code
    if (meetingsController.showTimer.value)
      verticalSpace(0.06),
    if (meetingsController.showTimer.value)
      // Progress indicator
  ],
)