[platform_channels] adds EventChannel Demo #462

AyushBherwani1998 · 2020-06-06T17:23:58Z

Description

Adds an EventChannel Demo where it streams the value of Accelerometer sensor.

GIF

AyushBherwani1998 · 2020-06-06T17:27:21Z

platform_channels/test/src/event_channel_demo_test.dart

+    testWidgets('EventChannel accelerometer Stream test', (tester) async {
+      await tester.pumpWidget(MaterialApp(
+        home: EventChannelDemo(),
+      ));
+
+      expect(find.text('No Data Available'), findsOneWidget);
+    });


I'm not sure how can I mock the EventChannel.recieveBroadcastStream. Suggestions and ideas for testing are much appreciated.

The EventChannel test in the framework helped me.

Here

AyushBherwani1998 · 2020-06-06T17:29:26Z

platform_channels/lib/src/event_channel_demo.dart

+        builder: (context, snapshot) {
+          if (snapshot.hasData) {
+            return Center(
+              child: Column(


Any suggestions for improving UI are welcome. We can also have three Contianers which change properties when a value changes. But since the sample is for learning purpose I kept it simple enough. I'm happy to iterate over sample to improve the UI.

As we discussed offline, I think you could do something simple with Animated Container, which always manages to make UI look cool.

@RedBrogdon Instead of using AnimatedContainer I tried Transform to rotate the containers whenever the value changes. There are three containers which resemble 3 Axis. Each Container rotates on a single axis.

GIF

The above example works fine on the Emulator, but when testing on the real device, the value changes too fast and hence the Containers keep rotating even while you are holding the phone.

I also tried with the AnimatedContainer, based on the values of x and y-axis from the Stream I was changing the height and width of the AnimatedContainer respectively, and on the value of z-axis, I'm changing the borderRadius, which works fine on the real device too.

GIF

The recent commit uses AnimatedContainer example.

RedBrogdon

Looking great. I have a few notes, but nothing huge.

RedBrogdon · 2020-06-10T04:40:11Z

...nels/android/app/src/main/kotlin/dev/flutter/platform_channels/AccelerometerStreamHandler.kt

+    private lateinit var eventSink: EventChannel.EventSink
+
+    override fun onListen(arguments: Any?, events: EventChannel.EventSink?) {
+        if (events != null)


I'm not sure that events could ever be null here without something having gone very, very wrong. If you're going to have a null check, I would probably put the registerListener call in there as well. No point in having the listener if you can't send events back.

RedBrogdon · 2020-06-10T04:47:00Z

platform_channels/android/app/src/main/kotlin/dev/flutter/platform_channels/MainActivity.kt

+        // Creates a EventChannel, and sets a StreamHandler. The AccelerometerStreamHandler
+        // implements a StreamHandler and SensorEventListener to listen the value changes from
+        // the sensor and send it to dart side.
+        EventChannel(flutterEngine.dartExecutor, "accelerometer")


Consider aligning the names of the two channels a little more. The previous one is "methodChannelDemo," and this one is "accelerometer" rather than "eventChannelDemo" or something similar. You could always rename the method channel one to "counter."

RedBrogdon · 2020-06-10T04:48:19Z

platform_channels/android/app/src/main/kotlin/dev/flutter/platform_channels/MainActivity.kt

@@ -27,5 +35,14 @@ class MainActivity : FlutterActivity() {
                        }
                    }
                }
+
+        val sensorManger: SensorManager = getSystemService(Context.SENSOR_SERVICE) as SensorManager
+        // Use instance of Sensor Service to get the ACCELEROMETER sensor.


I would recommend cutting the comments on line 40 and 42-44. Your code is easy to read and very direct. I don't think people need the comments to understand what you're doing.

RedBrogdon · 2020-06-10T04:49:29Z

platform_channels/lib/src/accelerometer_event_channel.dart

+
+import 'package:flutter/services.dart';
+
+/// This class includes the implementation for [EventChannel] to listen value


nit: "listen to value" and "from the accelerometer."

RedBrogdon · 2020-06-10T04:49:46Z

platform_channels/lib/src/accelerometer_event_channel.dart

+class Accelerometer {
+  static final _eventChannel = const EventChannel('accelerometer');
+
+  /// Method responsible to provide a stream of [AccelerometerReadings] to listen


nit: "responsible for providing" and "to listen to"

RedBrogdon · 2020-06-10T04:54:07Z

platform_channels/lib/src/accelerometer_event_channel.dart

+  /// Acceleration force along the z-axis.
+  final double z;
+
+  AccelerometerReadings(this.x, this.y, this.z);


Optional suggestion, but you could make this a const constructor.

RedBrogdon · 2020-06-10T04:55:35Z

platform_channels/lib/src/event_channel_demo.dart

+import 'package:flutter/material.dart';
+import 'package:platform_channels/src/accelerometer_event_channel.dart';
+
+/// The widget demonstrates how to use [EventChannel] to listen continuous values


We're getting way into the Dart style guide here, but it's recommended to start class comments like these with a verb:

https://dart.dev/guides/language/effective-dart/documentation#prefer-starting-function-or-method-comments-with-third-person-verbs

In this case, you'd just drop "the widget" from the beginning.

RedBrogdon · 2020-06-10T04:56:09Z

platform_channels/lib/src/event_channel_demo.dart

+/// The widget demonstrates how to use [EventChannel] to listen continuous values
+/// of Accelerometer Sensor from platform.
+///
+/// The widget uses a [StreamBuilder] to rebuild it's descendant whenever it


Here, "the widget" is fine. It's just for the initial sentence that the noun is typically dropped.

RedBrogdon · 2020-06-10T04:56:40Z

platform_channels/lib/src/event_channel_demo.dart

+        builder: (context, snapshot) {
+          if (snapshot.hasData) {
+            return Center(
+              child: Column(


As we discussed offline, I think you could do something simple with Animated Container, which always manages to make UI look cool.

RedBrogdon · 2020-06-10T04:58:38Z

platform_channels/lib/src/event_channel_demo.dart

+      body: StreamBuilder<AccelerometerReadings>(
+        stream: Accelerometer.getReadings(),
+        builder: (context, snapshot) {
+          if (snapshot.hasData) {


Consider checking for errors and displaying them as well. It's a good practice, and one some devices it's possible a user could get one.

RedBrogdon · 2020-06-10T05:03:22Z

@amirh, would you mind taking a quick look at the tests in event_channel_demo_test.dart? I'm not hugely familiar with testing with mocked event channel code, and I imagine you (or someone on your team) are.

RedBrogdon · 2020-06-12T05:26:04Z

platform_channels/lib/src/event_channel_demo.dart

+              final height = 150 + snapshot.data.x * 10;
+              final borderRadius = snapshot.data.z;
+
+              return AnimatedContainer(


The changes you've made everywhere else are solid, so I think the only remaining question is what to do about displaying the data. While the AnimatedContainer code you have here is clean, valid, Flutter, I don't think it's obvious to someone looking at the app how the container visually relates to the numbers coming out of the accelerometer (I don't have the eyes to see small changes in border radius, for example).

For now, I would consider just going back to Text widgets, so you can put your time into finishing out the rest of the app (and the plugin app). Once those are done, you'll likely have time to come back to this section of the code, and (probably) you'll have had an idea for a great way to present the data.

That's just a suggestion, though. If you want to iterate on a few designs and try to find a great one, that's cool. You might try an animated bar chart, similar to what audio equalizers do, for example.

The changes you've made everywhere else are solid, so I think the only remaining question is what to do about displaying the data. While the AnimatedContainer code you have here is clean, valid, Flutter, I don't think it's obvious to someone looking at the app how the container visually relates to the numbers coming out of the accelerometer (I don't have the eyes to see small changes in border radius, for example).

Completely makes sense to me.

For now, I would consider just going back to Text widgets, so you can put your time into finishing out the rest of the app (and the plugin app). Once those are done, you'll likely have time to come back to this section of the code, and (probably) you'll have had an idea for a great way to present the data.

SGTM, as we finish the project we can iterate over the design. Also, if I come across any idea for displaying data, I will submit a separate PR for that, so we don't have our progress on hold.

RedBrogdon · 2020-06-12T23:58:52Z

Thanks for some more great code!

AyushBherwani1998 added 7 commits June 6, 2020 21:03

adds EventChannel demo

476f5ca

adds test

ab48b29

improves formatting

6b0b155

updates demo list

ae8714a

improves formatting in main.dart

426a3e3

improves formatting of .kt files

89badf1

improves documentation

4d59bd3

AyushBherwani1998 commented Jun 6, 2020

View reviewed changes

improves test

42ec132

RedBrogdon self-requested a review June 9, 2020 06:10

RedBrogdon requested changes Jun 10, 2020

View reviewed changes

AyushBherwani1998 added 2 commits June 10, 2020 20:17

worked on the reviews

659831a

updates test

d0d0c54

AyushBherwani1998 requested a review from RedBrogdon June 10, 2020 15:15

updates Accelerometer documentation

a2066e2

RedBrogdon reviewed Jun 12, 2020

View reviewed changes

revert the UI changes

f231ce9

AyushBherwani1998 requested a review from RedBrogdon June 12, 2020 06:06

RedBrogdon approved these changes Jun 12, 2020

View reviewed changes

RedBrogdon merged commit 87c9cfa into flutter:master Jun 12, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[platform_channels] adds EventChannel Demo #462

[platform_channels] adds EventChannel Demo #462

AyushBherwani1998 commented Jun 6, 2020

AyushBherwani1998 Jun 6, 2020 •

edited

Loading

AyushBherwani1998 Jun 7, 2020 •

edited

Loading

AyushBherwani1998 Jun 6, 2020 •

edited

Loading

RedBrogdon Jun 10, 2020

AyushBherwani1998 Jun 10, 2020

AyushBherwani1998 Jun 10, 2020

RedBrogdon left a comment

RedBrogdon Jun 10, 2020

RedBrogdon Jun 10, 2020

RedBrogdon Jun 10, 2020

RedBrogdon Jun 10, 2020

RedBrogdon Jun 10, 2020

RedBrogdon Jun 10, 2020

RedBrogdon Jun 10, 2020

RedBrogdon Jun 10, 2020

RedBrogdon Jun 10, 2020

RedBrogdon Jun 10, 2020

RedBrogdon commented Jun 10, 2020

RedBrogdon Jun 12, 2020

AyushBherwani1998 Jun 12, 2020 •

edited

Loading

RedBrogdon commented Jun 12, 2020


		import 'package:flutter/services.dart';

		/// This class includes the implementation for [EventChannel] to listen value

[platform_channels] adds EventChannel Demo #462

[platform_channels] adds EventChannel Demo #462

Conversation

AyushBherwani1998 commented Jun 6, 2020

Description

GIF

AyushBherwani1998 Jun 6, 2020 • edited Loading

Choose a reason for hiding this comment

AyushBherwani1998 Jun 7, 2020 • edited Loading

Choose a reason for hiding this comment

AyushBherwani1998 Jun 6, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

GIF

GIF

Choose a reason for hiding this comment

RedBrogdon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

RedBrogdon commented Jun 10, 2020

Choose a reason for hiding this comment

AyushBherwani1998 Jun 12, 2020 • edited Loading

Choose a reason for hiding this comment

RedBrogdon commented Jun 12, 2020

AyushBherwani1998 Jun 6, 2020 •

edited

Loading

AyushBherwani1998 Jun 7, 2020 •

edited

Loading

AyushBherwani1998 Jun 6, 2020 •

edited

Loading

AyushBherwani1998 Jun 12, 2020 •

edited

Loading