Bird
Raised Fist0
Fluttermobile~20 mins

Why platform channels bridge native code in Flutter - Build It to Prove It

Choose your learning style10 modes available
Build: Platform Channel Demo
This screen shows how Flutter communicates with native code using platform channels. It fetches the device's battery level from native code and displays it.
Target UI
-------------------------
| Platform Channel Demo |
|-----------------------|
| Battery Level: ?%     |
|                       |
| [Get Battery Level]    |
-------------------------
Display a text showing 'Battery Level: ?%' initially.
Add a button labeled 'Get Battery Level'.
When the button is tapped, use platform channels to call native code and get the current battery level.
Update the text with the received battery level percentage.
Handle errors gracefully by showing 'Battery Level: Unknown'.
Starter Code
Flutter
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: PlatformChannelDemo(),
    );
  }
}

class PlatformChannelDemo extends StatefulWidget {
  const PlatformChannelDemo({super.key});

  @override
  State<PlatformChannelDemo> createState() => _PlatformChannelDemoState();
}

class _PlatformChannelDemoState extends State<PlatformChannelDemo> {
  static const platform = MethodChannel('samples.flutter.dev/battery');

  String _batteryLevel = '?';

  Future<void> _getBatteryLevel() async {
    // TODO: Call native code using platform channel and update _batteryLevel
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Platform Channel Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Battery Level: $_batteryLevel%'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _getBatteryLevel,
              child: const Text('Get Battery Level'),
            ),
          ],
        ),
      ),
    );
  }
}
Task 1
Task 2
Solution
Flutter
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: PlatformChannelDemo(),
    );
  }
}

class PlatformChannelDemo extends StatefulWidget {
  const PlatformChannelDemo({super.key});

  @override
  State<PlatformChannelDemo> createState() => _PlatformChannelDemoState();
}

class _PlatformChannelDemoState extends State<PlatformChannelDemo> {
  static const platform = MethodChannel('samples.flutter.dev/battery');

  String _batteryLevel = '?';

  Future<void> _getBatteryLevel() async {
    String batteryLevel;
    try {
      final int result = await platform.invokeMethod('getBatteryLevel');
      batteryLevel = result.toString();
    } on PlatformException {
      batteryLevel = 'Unknown';
    }

    if (!mounted) return;

    setState(() {
      _batteryLevel = batteryLevel;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Platform Channel Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Battery Level: $_batteryLevel%'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _getBatteryLevel,
              child: const Text('Get Battery Level'),
            ),
          ],
        ),
      ),
    );
  }
}

This Flutter app uses a MethodChannel named samples.flutter.dev/battery to communicate with native code.

When the user taps the 'Get Battery Level' button, the app calls invokeMethod('getBatteryLevel') on the channel. This sends a message to the native platform (Android or iOS) to run native code that returns the current battery level as an integer.

The app waits asynchronously for the result. If successful, it updates the displayed battery level. If there is an error (for example, native code not implemented), it shows 'Unknown'.

This shows how platform channels bridge Flutter and native code, allowing Flutter apps to use device features not available directly in Flutter.

Final Result
Completed Screen
-------------------------
| Platform Channel Demo |
|-----------------------|
| Battery Level: 85%    |
|                       |
| [Get Battery Level]    |
-------------------------
User taps 'Get Battery Level' button.
App calls native code via platform channel.
Battery level number updates on screen.
If error occurs, text shows 'Battery Level: Unknown'.
Stretch Goal
Add a loading indicator while fetching battery level.
💡 Hint
Use a boolean state variable to show CircularProgressIndicator instead of button text during loading.

Practice

(1/5)
1. Why do Flutter apps use platform channels to communicate with native code?
easy
A. To speed up Flutter's UI rendering
B. To access device features not available in Flutter alone
C. To replace Flutter widgets with native widgets
D. To avoid using Dart language

Solution

  1. Step 1: Understand Flutter's limitations

    Flutter cannot directly access some device features like sensors or camera APIs.
  2. Step 2: Role of platform channels

    Platform channels let Flutter send messages to native code that can access these features.
  3. Final Answer:

    To access device features not available in Flutter alone -> Option B
  4. Quick Check:

    Platform channels = access native features [OK]
Hint: Remember: platform channels bridge Flutter and native features [OK]
Common Mistakes:
  • Thinking platform channels speed up UI rendering
  • Confusing platform channels with widget replacement
  • Believing platform channels avoid Dart usage
2. Which of the following is the correct way to create a platform channel in Flutter?
easy
A. PlatformChannel('com.example.channel')
B. NativeChannel('com.example.channel')
C. MethodChannel('com.example.channel')
D. FlutterChannel('com.example.channel')

Solution

  1. Step 1: Recall Flutter's platform channel class

    Flutter uses the MethodChannel class to create platform channels.
  2. Step 2: Check the correct constructor usage

    The constructor takes a string name like 'com.example.channel'.
  3. Final Answer:

    MethodChannel('com.example.channel') -> Option C
  4. Quick Check:

    MethodChannel = correct class name [OK]
Hint: MethodChannel is the official Flutter class for platform channels [OK]
Common Mistakes:
  • Using wrong class names like PlatformChannel or NativeChannel
  • Confusing the channel name with class name
  • Omitting the channel name string
3. What will happen when Flutter code calls a native method via platform channel but the native side does not implement that method?
medium
A. Flutter receives a PlatformException error
B. Flutter app crashes immediately
C. Flutter ignores the call silently
D. Flutter retries the call automatically

Solution

  1. Step 1: Understand platform channel error handling

    If native code does not implement the called method, Flutter gets an error response.
  2. Step 2: Identify the error type

    Flutter throws a PlatformException to indicate the method is missing.
  3. Final Answer:

    Flutter receives a PlatformException error -> Option A
  4. Quick Check:

    Missing native method = PlatformException [OK]
Hint: Missing native method triggers PlatformException in Flutter [OK]
Common Mistakes:
  • Assuming app crashes without error handling
  • Thinking Flutter ignores missing methods silently
  • Believing Flutter retries calls automatically
4. Identify the error in this Flutter platform channel code snippet:
final channel = MethodChannel('com.example.channel');
channel.invokeMethod('getBatteryLevel');
medium
A. MethodChannel cannot be final
B. Wrong channel name format
C. invokeMethod should be invokeNativeMethod
D. Missing await keyword for async call

Solution

  1. Step 1: Check method invocation style

    invokeMethod returns a Future and should be awaited or handled asynchronously.
  2. Step 2: Identify missing async handling

    Code calls invokeMethod without await or then, which can cause unhandled results.
  3. Final Answer:

    Missing await keyword for async call -> Option D
  4. Quick Check:

    invokeMethod requires await or async handling [OK]
Hint: Always await invokeMethod calls to handle async results [OK]
Common Mistakes:
  • Ignoring async nature of invokeMethod
  • Using wrong method names
  • Misunderstanding final keyword usage
5. You want to get the device's battery level using platform channels. Which sequence correctly describes the communication flow?
hard
A. Flutter sends message via MethodChannel -> Native code receives and returns battery level -> Flutter receives result
B. Native code sends battery level to Flutter -> Flutter processes and sends back confirmation
C. Flutter directly reads battery level without native code
D. Flutter uses platform channel to update UI without native interaction

Solution

  1. Step 1: Understand platform channel message flow

    Flutter initiates a message via MethodChannel to native code requesting data.
  2. Step 2: Native code processes and replies

    Native code handles the request, gets battery level, and sends it back.
  3. Step 3: Flutter receives and uses the result

    Flutter receives the battery level and can update UI accordingly.
  4. Final Answer:

    Flutter sends message via MethodChannel -> Native code receives and returns battery level -> Flutter receives result -> Option A
  5. Quick Check:

    Message flow = Flutter -> Native -> Flutter [OK]
Hint: Platform channels send request from Flutter, native replies, Flutter receives [OK]
Common Mistakes:
  • Thinking native initiates communication
  • Assuming Flutter reads battery without native code
  • Confusing message direction and flow
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard