build method
- BuildContext context
Describes the part of the user interface represented by this widget.
The framework calls this method when this widget is inserted into the tree in a given BuildContext and when the dependencies of this widget change (e.g., an InheritedWidget referenced by this widget changes). This method can potentially be called in every frame and should not have any side effects beyond building a widget.
The framework replaces the subtree below this widget with the widget returned by this method, either by updating the existing subtree or by removing the subtree and inflating a new subtree, depending on whether the widget returned by this method can update the root of the existing subtree, as determined by calling Widget.canUpdate.
Typically implementations return a newly created constellation of widgets that are configured with information from this widget's constructor and from the given BuildContext.
The given BuildContext contains information about the location in the tree at which this widget is being built. For example, the context provides the set of inherited widgets for this location in the tree. A given widget might be built with multiple different BuildContext arguments over time if the widget is moved around the tree or if the widget is inserted into the tree in multiple places at once.
The implementation of this method must only depend on:
- the fields of the widget, which themselves must not change over time, and
- any ambient state obtained from the
context
using BuildContext.dependOnInheritedWidgetOfExactType.
If a widget's build method is to depend on anything else, use a StatefulWidget instead.
See also:
- StatelessWidget, which contains the discussion on performance considerations.
Implementation
@override
Widget build(BuildContext context) {
// ========================
// ====== CONFIGURATION ======
// ========================
// Mediasfu account credentials
// Replace 'your_api_username' and 'your_api_key' with your actual credentials
// Not needed if using a custom server with no MediaSFU Cloud Egress (recording, ...)
final Credentials credentials = Credentials(
apiUserName: 'your_api_username',
apiKey: 'your_api_key',
);
// Specify your Community Edition (CE) server link or leave as an empty string if not using a custom server
const String localLink =
'http://localhost:3000'; // Set to '' if not using your own server
/**
* Automatically set `connectMediaSFU` to `true` if `localLink` is provided,
* indicating the use of MediaSFU Cloud by default.
*
* - If `localLink` is not empty, MediaSFU Cloud will be used for additional features.
* - If `localLink` is empty, the application will connect to MediaSFU Cloud by default.
*/
final bool connectMediaSFU = localLink.trim().isNotEmpty;
// ========================
// ====== USE CASES ======
// ========================
// Deprecated Feature: useLocalUIMode
// This feature is deprecated due to updates for strong typing.
// It is no longer required and should not be used in new implementations.
/**
* Uncomment and configure the following section if you intend to use seed data
* for generating random participants and messages.
*
* Note: This is deprecated and maintained only for legacy purposes.
*/
/*
const bool useSeed = false;
SeedData? seedData;
if (useSeed) {
const String memberName = 'Prince';
const String hostName = 'Fred';
final participants = generateRandomParticipants(
GenerateRandomParticipantsOptions(
member: memberName,
coHost: '',
host: hostName,
forChatBroadcast:
eventType == EventType.chat || eventType == EventType.broadcast,
),
);
final messages = generateRandomMessages(
GenerateRandomMessagesOptions(
participants: participants,
member: memberName,
host: hostName,
forChatBroadcast:
eventType == EventType.chat || eventType == EventType.broadcast,
),
);
final requests = generateRandomRequestList(
GenerateRandomRequestListOptions(
participants: participants,
hostName: memberName,
coHostName: '',
numberOfRequests: 3,
),
);
final waitingList = generateRandomWaitingRoomList();
seedData = SeedData(
participants: participants,
messages: messages,
requests: requests,
waitingList: waitingList,
member: memberName,
host: hostName,
eventType: eventType,
);
}
*/
// ========================
// ====== COMPONENT SELECTION ======
// ========================
/**
* Choose the Mediasfu component based on the event type and use case.
* Uncomment the component corresponding to your specific use case.
*/
// ------------------------
// ====== SIMPLE USE CASE ======
// ------------------------
/**
* **Simple Use Case (Welcome Page)**
*
* Renders the default welcome page.
* No additional inputs required.
*/
// return MaterialApp(
// title: 'Mediasfu Chat',
// theme: ThemeData(
// primarySwatch: Colors.blue,
// ),
// home: MediasfuChat(),
// );
// ------------------------
// ====== PRE-JOIN USE CASE ======
// ------------------------
/**
* **Use Case with Pre-Join Page (Credentials Required)**
*
* Uses a pre-join page that requires users to enter credentials.
*/
// final MediasfuChatOptions options = MediasfuChatOptions(
// preJoinPageWidget: PreJoinPage(),
// credentials: credentials,
// );
// return MaterialApp(
// title: 'Mediasfu Chat with Pre-Join',
// theme: ThemeData(
// primarySwatch: Colors.blue,
// ),
// home: MediasfuChat(options: options),
// );
// ------------------------
// ====== SEED DATA USE CASE ======
// ------------------------
/**
* **Use Case with Local UI Mode (Seed Data Required)**
*
* Runs the application in local UI mode using seed data.
*
* @deprecated Due to updates for strong typing, this feature is deprecated.
*/
// final MediasfuChatOptions options = MediasfuChatOptions(
// useLocalUIMode: true,
// useSeed: true,
// seedData: seedData!,
// );
// return MaterialApp(
// title: 'Mediasfu Chat with Seed Data',
// theme: ThemeData(
// primarySwatch: Colors.blue,
// ),
// home: MediasfuChat(options: options),
// );
// ------------------------
// ====== Chat EVENT TYPE ======
// ------------------------
/**
* **MediasfuChat Component**
*
* Uncomment to use the Chat event type.
*/
/*
final MediasfuChatOptions options = MediasfuChatOptions(
credentials: credentials,
localLink: localLink,
connectMediaSFU: connectMediaSFU,
// seedData: useSeed ? seedData : null,
);
return MaterialApp(
title: 'Mediasfu Chat',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MediasfuChat(options: options),
);
*/
// ========================
// ====== DEFAULT COMPONENT ======
// ========================
/**
* **Default to MediasfuChat with Updated Configuration**
*
* Renders the welcome page with specified server and cloud connection settings.
*/
final MediasfuChatOptions options = MediasfuChatOptions(
// Uncomment the following lines to use a custom pre-join page
/*
preJoinPageWidget: ({PreJoinPageOptions? options}) {
return myCustomPreJoinPage(
credentials: credentials,
);
},
*/
// Uncomment the following lines to enable local UI mode with seed data; deprecated
/*
useLocalUIMode: useLocalUIMode,
useSeed: useSeed,
seedData: seedData,
*/
// Uncomment the following lines to use your own Mediasfu server
localLink: localLink,
// Uncomment the following lines to pass your Credentials if not using MediaSFU Cloud (primarily or secondarily)
// MediaSFU Cloud handles recording and other egress processes for MediaSFU Community Edition
// You need to pass your own Mediasfu server link if you are using MediaSFU Community Edition
// Pass your credentials if you will be using MediaSFU Cloud for recording and other egress processes or as your primary server
credentials: credentials,
// Uncomment the following lines to use your own Mediasfu server with MediaSFU Cloud (for recording and other egress purposes)
// If you are using MediaSFU Cloud for recording and other egress processes, set connectMediaSFU to true
connectMediaSFU: connectMediaSFU,
);
return MaterialApp(
title: 'Mediasfu Chat',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MediasfuChat(options: options),
);
}