feat(example_full): create example representing the whole plugin functional

2024-02-06 19:41:56 +01:00
parent 258cdf0adc
commit f71121bd92
89 changed files with 3112 additions and 1164 deletions
@@ -0,0 +1,82 @@
+import 'package:flutter/material.dart';
+import 'package:nearby_service_example_full/domain/app_service.dart';
+import 'package:nearby_service_example_full/domain/app_state.dart';
+import 'package:provider/provider.dart';
+
+import 'builder/app_step_view_builder.dart';
+import 'components/info_panel.dart';
+
+const kPinkColor = Color(0xFFC80099);
+const kBlueColor = Color(0xFF0043D5);
+const kWhiteColor = Color(0xFFFFFFFF);
+const kGreyColor = Color(0xFF607D8B);
+const kGreenColor = Color(0xFF07B988);
+
+class App extends StatelessWidget {
+  const App({super.key, required this.service});
+
+  final AppService service;
+
+  @override
+  Widget build(BuildContext context) {
+    return ChangeNotifierProvider.value(
+      value: service,
+      child: MaterialApp(
+        theme: ThemeData(
+          colorScheme: ColorScheme.fromSeed(seedColor: kBlueColor),
+        ),
+        home: Scaffold(
+          appBar: AppBar(
+            title: const Text('Nearby service example app'),
+            actions: [
+              Builder(builder: (context) {
+                return IconButton(
+                  onPressed: () => InfoPanel.show(context),
+                  icon: const Icon(Icons.info_outline),
+                );
+              }),
+            ],
+          ),
+          body: Consumer<AppService>(builder: (context, service, _) {
+            return Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                const Padding(
+                  padding: EdgeInsets.fromLTRB(16, 12, 16, 10),
+                  child: InfoPanel(),
+                ),
+                Flexible(
+                  child: MediaQuery.removePadding(
+                    context: context,
+                    removeLeft: true,
+                    child: Stepper(
+                      controlsBuilder: (context, _) => const SizedBox.shrink(),
+                      currentStep: service.state.step,
+                      steps: [
+                        ...AppState.steps.map((e) {
+                          final builder = AppStepViewBuilder(state: e);
+                          final isActive = e == service.state;
+                          return Step(
+                            state: isActive
+                                ? StepState.indexed
+                                : e.step < service.state.step
+                                    ? StepState.complete
+                                    : StepState.disabled,
+                            title: builder.buildTitle(),
+                            subtitle: builder.buildSubtitle(),
+                            content: builder.buildContent(),
+                            isActive: isActive,
+                          );
+                        }),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            );
+          }),
+        ),
+      ),
+    );
+  }
+}
@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:nearby_service_example_full/domain/app_state.dart';
+import 'package:nearby_service_example_full/presentation/view/view.dart';
+
+class AppStepViewBuilder {
+  const AppStepViewBuilder({required this.state});
+
+  final AppState state;
+
+  Widget buildContent() {
+    return switch (state) {
+      (AppState.idle) => const IdleView(),
+      (AppState.permissions) => const PermissionsView(),
+      (AppState.checkServices) => const CheckServiceView(),
+      (AppState.selectClientType) => const SelectClientTypeView(),
+      (AppState.readyToDiscover) => const ReadyView(),
+      (AppState.discoveringPeers) => const DiscoveryView(),
+      (AppState.streamingPeers) => const StreamingPeersView(),
+      (AppState.loadingConnection) => const Center(
+          child: CircularProgressIndicator.adaptive(),
+        ),
+      (AppState.connected) => const ConnectedView(),
+      (AppState.communicationChannelCreated) => const CommunicationView(),
+    };
+  }
+
+  Widget buildTitle() {
+    return Text(
+      switch (state) {
+        AppState.idle => "Let's start!",
+        AppState.permissions => "Provide permissions",
+        AppState.checkServices => "Check services",
+        AppState.selectClientType =>
+          'Do you want to find your friend from this device?',
+        AppState.readyToDiscover => "Ready to discover!",
+        AppState.discoveringPeers => "Discovering devices...",
+        AppState.streamingPeers => "Peers stream got!",
+        AppState.loadingConnection => "Loading your connection",
+        AppState.connected => "Connected!",
+        AppState.communicationChannelCreated => "You can communicate!",
+      },
+      style: const TextStyle(fontSize: 14),
+    );
+  }
+
+  Widget? buildSubtitle() {
+    final subtitle = switch (state) {
+      AppState.selectClientType =>
+        'Click "Yes" if you will search, click "No" if you will wait for your friend to connect',
+      _ => null,
+    };
+    return subtitle != null ? Text(subtitle) : null;
+  }
+}
@@ -0,0 +1,126 @@
+import 'package:flutter/material.dart';
+import 'package:nearby_service/nearby_service.dart';
+import 'package:nearby_service_example_full/domain/app_service.dart';
+import 'package:nearby_service_example_full/presentation/app.dart';
+import 'package:provider/provider.dart';
+
+class DevicePreview extends StatelessWidget {
+  const DevicePreview(
+      {super.key, required this.device, this.largeView = false});
+
+  final NearbyDevice device;
+  final bool largeView;
+
+  @override
+  Widget build(BuildContext context) {
+    final color = device.status.isConnected ? kGreenColor : kGreyColor;
+
+    final avatar = CircleAvatar(
+      backgroundColor: kBlueColor.withOpacity(0.7),
+      foregroundColor: kWhiteColor,
+      maxRadius: largeView ? 100 : 30,
+      child: Padding(
+        padding: const EdgeInsets.all(8.0),
+        child: Text(
+          device.info.displayName.substring(0, 1).toUpperCase(),
+          style: TextStyle(fontSize: largeView ? 32 : 16),
+        ),
+      ),
+    );
+    final name = Text(
+      '${device.info.displayName} '
+      '${device.byPlatform(onAndroid: (d) => d.isGroupOwner ? " - group owner" : "") ?? ''}',
+      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+            fontWeight: FontWeight.bold,
+          ),
+    );
+    final id = Text(
+      'ID: ${device.info.id}',
+      style: Theme.of(context).textTheme.labelSmall?.copyWith(
+            fontSize: 10,
+          ),
+    );
+    final status = Text(
+      device.byPlatform(
+            onAny: (d) => d.status.name,
+            onIOS: (d) =>
+                context.select<AppService, bool>((v) => v.isIOSBrowser)
+                    ? "Peer found | ${d.status.name}"
+                    : "Pending invitation | ${d.status.name}",
+          ) ??
+          '',
+      style: Theme.of(context).textTheme.labelSmall?.copyWith(
+            color: color,
+          ),
+    );
+
+    final disconnectButton = device.status.isConnected
+        ? TextButton(
+            onPressed: () => context.read<AppService>().disconnect(device),
+            style: TextButton.styleFrom(
+              foregroundColor: kPinkColor,
+            ),
+            child: const Text('Disconnect'),
+          )
+        : null;
+    if (largeView) {
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          avatar,
+          const SizedBox(height: 10),
+          name,
+          const SizedBox(height: 5),
+          id,
+          if (disconnectButton != null)
+            Padding(
+              padding: const EdgeInsets.only(top: 10),
+              child: disconnectButton,
+            ),
+        ],
+      );
+    } else {
+      return InkWell(
+        borderRadius: BorderRadius.circular(12),
+        onTap: () {
+          if (!device.status.isConnected) {
+            context.read<AppService>().connect(device);
+          } else {
+            context.read<AppService>().startListeningConnectedDevice(device);
+          }
+        },
+        child: Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Flexible(
+                flex: 3,
+                child: Row(
+                  children: [
+                    avatar,
+                    const SizedBox(width: 10),
+                    Flexible(
+                      child: Column(
+                        mainAxisSize: MainAxisSize.min,
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [name, id, status],
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              Flexible(
+                child: Text(
+                  device.status.isConnected ? 'Tap to chat' : 'Tap to connect',
+                  style: const TextStyle(color: kGreenColor, fontSize: 12),
+                  textAlign: TextAlign.center,
+                ),
+              )
+            ],
+          ),
+        ),
+      );
+    }
+  }
+}
@@ -0,0 +1,149 @@
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:nearby_service_example_full/domain/app_service.dart';
+import 'package:nearby_service_example_full/presentation/app.dart';
+import 'package:nearby_service_example_full/utils/extensions.dart';
+import 'package:provider/provider.dart';
+
+class InfoPanel extends StatelessWidget {
+  const InfoPanel({super.key});
+
+  static Future show(BuildContext context) {
+    return showModalBottomSheet(
+      context: context,
+      backgroundColor: kWhiteColor,
+      builder: (context) {
+        return const Padding(
+          padding: EdgeInsets.fromLTRB(16, 24, 16, 10),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              Text(
+                'Informational panel',
+                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
+              ),
+              SizedBox(height: 32),
+              AdditionalInfoPanel(),
+              SizedBox(height: 8),
+              InfoPanel(),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer<AppService>(
+      builder: (context, service, _) {
+        return Wrap(
+          alignment: WrapAlignment.start,
+          crossAxisAlignment: WrapCrossAlignment.center,
+          spacing: 4,
+          runSpacing: 8,
+          children: [
+            if (service.currentDeviceInfo != null)
+              _InfoChip(
+                label: 'Device P2P Name',
+                value: service.currentDeviceInfo!.displayName,
+              ),
+            _InfoChip(
+              label: 'Communication channel state',
+              value: service.communicationChannelState.previewName,
+            ),
+            if (Platform.isIOS)
+              _InfoChip(
+                label: 'Role',
+                value: service.isIOSBrowser
+                    ? 'You are going to find your friend'
+                    : 'You are waiting for another user to connect',
+              ),
+            if (Platform.isAndroid && service.isAndroidGroupOwner != null)
+              _InfoChip(
+                label: 'Role',
+                value: service.isAndroidGroupOwner!
+                    ? 'You are a group owner'
+                    : 'You are not a group owner',
+              ),
+          ],
+        );
+      },
+    );
+  }
+}
+
+class AdditionalInfoPanel extends StatelessWidget {
+  const AdditionalInfoPanel({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer<AppService>(builder: (context, service, _) {
+      return Wrap(
+        alignment: WrapAlignment.start,
+        crossAxisAlignment: WrapCrossAlignment.center,
+        spacing: 4,
+        runSpacing: 8,
+        children: [
+          _InfoChip(
+            label: 'Platform',
+            value: service.platformVersion,
+          ),
+          _InfoChip(
+            label: 'Model',
+            value: service.platformModel,
+          ),
+          if (service.currentDeviceInfo != null && Platform.isIOS)
+            _InfoChip(
+              label: 'Device P2P ID',
+              value: service.currentDeviceInfo!.id,
+            ),
+        ],
+      );
+    });
+  }
+}
+
+class _InfoChip extends StatelessWidget {
+  const _InfoChip({required this.label, required this.value});
+
+  final String label;
+  final String value;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(16),
+        color: Theme.of(context).colorScheme.background,
+        boxShadow: [
+          BoxShadow(
+            blurRadius: 2,
+            color: Theme.of(context).shadowColor.withOpacity(0.4),
+            offset: const Offset(0, 1),
+          ),
+        ],
+      ),
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 3),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            '$label: ',
+            style: TextStyle(
+              fontWeight: FontWeight.bold,
+              color: Theme.of(context).colorScheme.onBackground,
+            ),
+          ),
+          Text(
+            value,
+            style: TextStyle(
+              color: Theme.of(context).colorScheme.onBackground,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import 'package:nearby_service_example_full/domain/app_service.dart';
+import 'package:nearby_service_example_full/uikit/uikit.dart';
+import 'package:provider/provider.dart';
+
+class CheckServiceView extends StatefulWidget {
+  const CheckServiceView({super.key});
+
+  @override
+  State<CheckServiceView> createState() => _CheckServiceViewState();
+}
+
+class _CheckServiceViewState extends State<CheckServiceView> {
+  bool showEnableButton = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        ActionButton(
+          onTap: () {
+            context.read<AppService>().checkWifiService().then((value) {
+              if (!value) {
+                setState(() {
+                  showEnableButton = true;
+                });
+                AppShackBar.show(
+                  context,
+                  'Please enable Wi-fi',
+                  actionType: ActionType.warning,
+                );
+              }
+            });
+          },
+          title: 'Check Wi-fi service',
+        ),
+        if (showEnableButton)
+          Padding(
+            padding: const EdgeInsets.only(top: 10.0),
+            child: ActionButton(
+              onTap: context.read<AppService>().openServicesSettings,
+              title: 'Open settings',
+            ),
+          ),
+      ],
+    );
+  }
+}
@@ -0,0 +1,138 @@
+import 'dart:io';
+
+import 'package:file_picker/file_picker.dart';
+import 'package:flutter/material.dart';
+import 'package:nearby_service_example_full/domain/app_service.dart';
+import 'package:nearby_service_example_full/presentation/app.dart';
+import 'package:nearby_service_example_full/uikit/uikit.dart';
+import 'package:provider/provider.dart';
+
+import '../components/device_preview.dart';
+
+class CommunicationView extends StatefulWidget {
+  const CommunicationView({super.key});
+
+  @override
+  State<CommunicationView> createState() => _CommunicationViewState();
+}
+
+class _CommunicationViewState extends State<CommunicationView> {
+  String message = '';
+  List<PlatformFile> files = [];
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer<AppService>(
+      builder: (context, service, _) {
+        final device = service.connectedDevice;
+        if (device == null) {
+          return Center(
+            child: ActionButton(
+              onTap: service.stopListeningAll,
+              title: 'Restart',
+            ),
+          );
+        }
+        final inputBorder = OutlineInputBorder(
+          borderSide: const BorderSide(color: kGreenColor),
+          borderRadius: BorderRadius.circular(32),
+        );
+        return Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            DevicePreview(device: device, largeView: true),
+            const SizedBox(height: 10),
+            Flexible(
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Expanded(
+                    flex: 2,
+                    child: TextField(
+                      onChanged: (value) => setState(() {
+                        message = value;
+                      }),
+                      decoration: InputDecoration(
+                        contentPadding: const EdgeInsets.symmetric(
+                          horizontal: 24,
+                          vertical: 12,
+                        ),
+                        enabledBorder: inputBorder,
+                        border: inputBorder,
+                        focusedBorder: inputBorder,
+                        hintStyle: const TextStyle(color: kGreenColor),
+                        hintText: 'Enter a message',
+                      ),
+                    ),
+                  ),
+                  Flexible(
+                    child: ActionButton(
+                      title: 'Send',
+                      onTap: () => service.sendMessage(message),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(height: 10),
+            const Text('OR'),
+            const SizedBox(height: 10),
+            Flexible(
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Expanded(
+                    flex: 2,
+                    child: ActionButton(
+                      type: ActionType.success,
+                      title: 'Choose files',
+                      onTap: () async {
+                        final result = await FilePicker.platform.pickFiles(
+                          allowMultiple: true,
+                        );
+                        setState(() {
+                          files = [...?result?.files];
+                        });
+                      },
+                    ),
+                  ),
+                  Flexible(
+                    child: ActionButton(
+                      title: 'Send',
+                      onTap: () => service.sendFilesRequest([
+                        ...files
+                            .map((e) => e.path)
+                            .where((element) => element != null)
+                            .cast<String>(),
+                      ]),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(height: 10),
+            const Text('Selected files:', style: TextStyle(fontSize: 18)),
+            Flexible(
+              child: GridView.count(
+                shrinkWrap: true,
+                crossAxisCount: 2,
+                mainAxisSpacing: 12,
+                crossAxisSpacing: 12,
+                physics: const NeverScrollableScrollPhysics(),
+                children: [
+                  ...files.where((element) => element.path != null).map(
+                        (e) => Image.file(
+                          File(e.path!),
+                          fit: BoxFit.cover,
+                        ),
+                      ),
+                ],
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}
@@ -0,0 +1,113 @@
+import 'package:flutter/material.dart';
+import 'package:nearby_service/nearby_service.dart';
+import 'package:nearby_service_example_full/domain/app_service.dart';
+import 'package:nearby_service_example_full/uikit/uikit.dart';
+import 'package:provider/provider.dart';
+
+import '../components/device_preview.dart';
+
+class ConnectedView extends StatelessWidget {
+  const ConnectedView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer<AppService>(
+      builder: (context, service, _) {
+        final device = service.connectedDevice;
+        return device != null
+            ? Center(
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [
+                    if (!device.status.isConnected)
+                      const Center(
+                        child: Padding(
+                          padding: EdgeInsets.all(8.0),
+                          child: Text('Connection lost'),
+                        ),
+                      )
+                    else if (!device.status.isConnected)
+                      Column(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          const Text('Connection lost'),
+                          ActionButton(
+                            onTap: () {
+                              service.connect(device);
+                            },
+                            title: 'Reconnect',
+                          ),
+                        ],
+                      )
+                    else
+                      DevicePreview(device: device, largeView: true),
+                    const SizedBox(height: 10),
+                    if (service.communicationChannelState !=
+                        CommunicationChannelState.loading)
+                      ActionButton(
+                        title: 'Start communicate',
+                        onTap: () => service.startCommunicationChannel(
+                          listener: (event) => _listener(context, event),
+                          onFilesSaved: (files) => _onFileSaved(context, files),
+                        ),
+                      )
+                    else
+                      Text(
+                        'Connecting socket.. '
+                        '${service.isAndroidGroupOwner != null ? service.isAndroidGroupOwner! ? "Waiting a client for connect" : "Waiting a server for connect" : "Waiting a connection"}',
+                      )
+                  ],
+                ),
+              )
+            : const SizedBox();
+      },
+    );
+  }
+
+  void _listener(BuildContext context, ReceivedNearbyMessage message) {
+    final senderSubtitle = 'From ${message.sender.displayName} '
+        '(ID: ${message.sender.id})';
+    message.content.byType(
+      onText: (content) {
+        AppShackBar.show(
+          Scaffold.of(context).context,
+          content.value,
+          subtitle: senderSubtitle,
+        );
+      },
+      onFilesRequest: (content) {
+        ActionDialog.show(
+          context,
+          title: 'Request to send ${content.files.length} files',
+          subtitle: senderSubtitle,
+        ).then((value) {
+          if (value is bool) {
+            context.read<AppService>().sendFilesResponse(
+                  content.id,
+                  response: value,
+                );
+          }
+        });
+      },
+      onFilesResponse: (content) {
+        AppShackBar.show(
+          Scaffold.of(context).context,
+          content.response ? 'Request is accepted!' : 'Request was denied :(',
+          subtitle: senderSubtitle,
+          actionType: content.response ? ActionType.idle : ActionType.warning,
+        );
+      },
+    );
+  }
+
+  void _onFileSaved(BuildContext context, ReceivedNearbyFilesPack pack) {
+    final senderSubtitle = 'From ${pack.sender.displayName} '
+        '(ID: ${pack.sender.id})';
+    AppShackBar.show(
+      Scaffold.of(context).context,
+      '${pack.files.length} files saved! \n${pack.files.map((e) => e.name).join('\n')}',
+      subtitle: senderSubtitle,
+    );
+  }
+}
@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:nearby_service_example_full/domain/app_service.dart';
+import 'package:nearby_service_example_full/uikit/uikit.dart';
+import 'package:provider/provider.dart';
+
+class DiscoveryView extends StatelessWidget {
+  const DiscoveryView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        ActionButton(
+          onTap: context.read<AppService>().startListeningPeers,
+          title: 'Tap to get peers!',
+        ),
+        const SizedBox(height: 10),
+        ActionButton(
+          type: ActionType.warning,
+          onTap: context.read<AppService>().stopDiscovery,
+          title: 'Stop discovery',
+        ),
+      ],
+    );
+  }
+}
@@ -0,0 +1,80 @@
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:nearby_service_example_full/domain/app_service.dart';
+import 'package:nearby_service_example_full/uikit/uikit.dart';
+import 'package:provider/provider.dart';
+
+class IdleView extends StatefulWidget {
+  const IdleView({super.key});
+
+  @override
+  State<IdleView> createState() => _IdleViewState();
+}
+
+class _IdleViewState extends State<IdleView> {
+  late final controller = TextEditingController();
+  bool initialized = false;
+
+  @override
+  void initState() {
+    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
+      context.read<AppService>().getSavedIOSDeviceName().then((value) {
+        controller.text = value;
+        controller.selection = TextSelection.collapsed(offset: value.length);
+        setState(() {
+          initialized = true;
+        });
+      });
+    });
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (!initialized) {
+      return const Center(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            Text(
+              'Getting saved name...',
+              style: TextStyle(fontSize: 12),
+            ),
+            SizedBox(height: 10),
+            CircularProgressIndicator.adaptive(),
+          ],
+        ),
+      );
+    }
+    return Center(
+      child: Column(
+        children: [
+          if (Platform.isIOS)
+            Padding(
+              padding: const EdgeInsets.only(bottom: 10.0),
+              child: TextFormField(
+                decoration: const InputDecoration(
+                  labelText: 'Device Name',
+                  hintText: 'Enter the name of your device',
+                ),
+                controller: controller,
+              ),
+            ),
+          ActionButton(
+            onTap: () {
+              context.read<AppService>().initialize(controller.text);
+            },
+            title: 'Tap to start',
+          ),
+        ],
+      ),
+    );
+  }
+}
@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:nearby_service_example_full/domain/app_service.dart';
+import 'package:nearby_service_example_full/uikit/uikit.dart';
+import 'package:provider/provider.dart';
+
+class PermissionsView extends StatelessWidget {
+  const PermissionsView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer<AppService>(builder: (context, service, _) {
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          ActionButton(
+            onTap: service.requestPermissions,
+            title: 'Request permissions',
+          ),
+        ],
+      );
+    });
+  }
+}
@@ -0,0 +1,33 @@
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:nearby_service_example_full/domain/app_service.dart';
+import 'package:nearby_service_example_full/domain/app_state.dart';
+import 'package:nearby_service_example_full/uikit/uikit.dart';
+import 'package:provider/provider.dart';
+
+class ReadyView extends StatelessWidget {
+  const ReadyView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        ActionButton(
+          onTap: context.read<AppService>().discover,
+          title: 'Start discover peers',
+        ),
+        const SizedBox(height: 10),
+        if (Platform.isIOS)
+          ActionButton(
+            onTap: () {
+              context.read<AppService>().updateState(AppState.selectClientType);
+            },
+            title: 'Reselect client type',
+            type: ActionType.warning,
+          ),
+      ],
+    );
+  }
+}
@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:nearby_service_example_full/domain/app_service.dart';
+import 'package:nearby_service_example_full/uikit/uikit.dart';
+import 'package:provider/provider.dart';
+
+class SelectClientTypeView extends StatelessWidget {
+  const SelectClientTypeView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        ActionButton(
+          title: 'Yes',
+          onTap: () {
+            context.read<AppService>().setIsBrowser(value: true);
+          },
+        ),
+        const SizedBox(width: 10),
+        ActionButton(
+          title: 'No',
+          onTap: () {
+            context.read<AppService>().setIsBrowser(value: false);
+          },
+        ),
+      ],
+    );
+  }
+}
@@ -0,0 +1,61 @@
+import 'dart:io';
+
+import 'package:flutter/material.dart';
+import 'package:nearby_service_example_full/domain/app_service.dart';
+import 'package:nearby_service_example_full/uikit/uikit.dart';
+import 'package:provider/provider.dart';
+
+import '../components/device_preview.dart';
+
+class StreamingPeersView extends StatelessWidget {
+  const StreamingPeersView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        ActionButton(
+          type: ActionType.warning,
+          onTap: context.read<AppService>().stopListeningPeers,
+          title: 'Stop stream peers',
+        ),
+        const SizedBox(height: 10),
+        const _PeersBody(),
+      ],
+    );
+  }
+}
+
+class _PeersBody extends StatelessWidget {
+  const _PeersBody();
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer<AppService>(
+      builder: (context, service, _) {
+        return (service.peers != null && service.peers!.isNotEmpty)
+            ? Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  ...service.peers!.map(
+                    (e) {
+                      return Container(
+                        padding: const EdgeInsets.only(bottom: 8.0),
+                        child: DevicePreview(device: e),
+                      );
+                    },
+                  ),
+                ],
+              )
+            : Text(
+                Platform.isAndroid || service.isIOSBrowser
+                    ? 'No one here ('
+                    : "Wait until someone invites you!",
+                textAlign: TextAlign.center,
+              );
+      },
+    );
+  }
+}
@@ -0,0 +1,9 @@
+export 'check_service_view.dart';
+export 'communication_view.dart';
+export 'connected_view.dart';
+export 'discovery_view.dart';
+export 'idle_view.dart';
+export 'permissions_view.dart';
+export 'ready_view.dart';
+export 'select_client_type_view.dart';
+export 'streaming_peers_view.dart';