Flutter 4: Cross-Platform Development
Flutter 4 marks a pivotal moment for developers who crave a single codebase that truly feels native on every platform. Whether you’re targeting iOS, Android, Web, Windows, macOS, or Linux, the framework now offers tighter integration, faster compilation, and a richer set of UI primitives. In this article we’ll explore the most important cross‑platform capabilities, walk through two end‑to‑end examples, and share pro tips that keep your apps snappy and maintainable.
Why Flutter 4 Is a Game‑Changer
Flutter’s core philosophy—“write once, run anywhere”—has always been appealing, but version 4 tightens the promise with three major upgrades. First, the new Impeller rendering engine delivers GPU‑accelerated performance on web and desktop, eliminating the jank that plagued earlier releases. Second, native‑first plugins let you call platform APIs without a bridge layer, reducing latency and simplifying code. Finally, the Flutter DevTools 3.0 suite provides real‑time profiling across all targets, making it easier to spot bottlenecks before they become user‑visible issues.
Setting Up a Cross‑Platform Project
Before you dive into code, make sure you have the latest stable SDK (4.0.x) and the appropriate platform toolchains installed. Run flutter doctor -v to verify that Android Studio, Xcode, and the web compiler are all detected. If you plan to ship desktop binaries, you’ll also need to enable the desktop and web channels:
flutter config --enable-windows
flutter config --enable-macos
flutter config --enable-linux
flutter config --enable-web
After configuring, create a fresh project with flutter create my_cross_app. The generated folder already contains platform‑specific entry points (android/, ios/, web/, etc.), so you can start adding shared Dart code immediately.
Core Concepts: Widgets, State, and the New Rendering Pipeline
Everything in Flutter is a widget, but Flutter 4 introduces layered compositing that separates layout from painting more cleanly. This means you can now reuse complex widget trees across web and desktop without worrying about pixel‑density mismatches. Understanding state management remains essential, however, because the same state object will now be shared across multiple runtime environments.
Stateless vs. Stateful Widgets
- StatelessWidget – Ideal for UI that never changes after build, such as static branding or icons.
- StatefulWidget – Required when UI reacts to user input, network responses, or platform events.
When you combine StatefulWidget with the new ValueNotifier pattern, you get a lightweight, reactive system that works uniformly on mobile, web, and desktop.
Cross‑Platform UI Patterns
Flutter’s widget library now includes platform‑aware components that automatically adapt their look and feel. For instance, CupertinoButton renders with iOS styling on iOS, while ElevatedButton falls back to Material Design on Android and the web. You can also use the Platform.is checks to fine‑tune behavior:
import 'dart:io' show Platform;
Widget platformSpecificButton() {
if (Platform.isIOS) {
return CupertinoButton(
child: Text('Tap me'),
onPressed: _handleTap,
);
} else {
return ElevatedButton(
child: Text('Tap me'),
onPressed: _handleTap,
);
}
}
This approach ensures that users feel at home regardless of their device, while you maintain a single source of truth for business logic.
Platform Channels: Bridging to Native Code
Although Flutter’s native‑first plugins cover most common use cases, there are scenarios where you need to call custom platform APIs—think of a proprietary biometric SDK or a low‑level file‑system operation. The Platform Channels API lets you send asynchronous messages between Dart and the host platform using method calls.
Creating a Simple Method Channel
// Dart side
static const platform = MethodChannel('com.example/deviceInfo');
Future<String> getDeviceModel() async {
try {
final String model = await platform.invokeMethod('getModel');
return model;
} on PlatformException catch (e) {
return 'Error: ${e.message}';
}
}
On Android, you’d implement the getModel method in Kotlin or Java, and on iOS in Swift. The same Dart call works across all targets, abstracting away the platform differences.
Example 1: A Todo List That Runs Everywhere
Let’s build a minimal Todo app that stores tasks locally using shared_preferences on mobile and the browser’s localStorage on the web. The UI consists of a ListView of cards, a floating action button, and a modal dialog for new entries.
Project Structure
lib/main.dart– Entry point and UI.lib/todo_service.dart– Persistence abstraction.pubspec.yaml– Addsshared_preferencesand
Todo Service (Cross‑Platform Storage)
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:convert';
class TodoService {
static const _key = 'todos';
Future<List<String>> loadTodos() async {
final prefs = await SharedPreferences.getInstance();
final json = prefs.getString(_key) ?? '[]';
return List<String>.from(jsonDecode(json));
}
Future<void> saveTodos(List<String> todos) async {
final prefs = await SharedPreferences.getInstance();
await prefs.setString(_key, jsonEncode(todos));
}
}
On the web, shared_preferences automatically maps to window.localStorage, so no extra code is required.
UI Implementation
import 'package:flutter/material.dart';
import 'todo_service.dart';
void main() => runApp(TodoApp());
class TodoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter 4 Todo',
home: TodoPage(),
);
}
}
class TodoPage extends StatefulWidget {
@override
_TodoPageState createState() => _TodoPageState();
}
class _TodoPageState extends State<TodoPage> {
final TodoService _service = TodoService();
List<String> _todos = [];
@override
void initState() {
super.initState();
_load();
}
Future<void> _load() async {
final loaded = await _service.loadTodos();
setState(() => _todos = loaded);
}
void _addTodo(String text) {
setState(() {
_todos.add(text);
});
_service.saveTodos(_todos);
}
void _showAddDialog() {
final controller = TextEditingController();
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text('New Task'),
content: TextField(controller: controller),
actions: [
TextButton(
child: Text('Cancel'),
onPressed: () => Navigator.pop(context),
),
ElevatedButton(
child: Text('Add'),
onPressed: () {
_addTodo(controller.text);
Navigator.pop(context);
},
),
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Todo List')),
body: ListView.builder(
itemCount: _todos.length,
itemBuilder: (_, i) => Card(
child: ListTile(
title: Text(_todos[i]),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () {
setState(() => _todos.removeAt(i));
_service.saveTodos(_todos);
},
),
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _showAddDialog,
child: Icon(Icons.add),
),
);
}
}
This app compiles to native ARM binaries on iOS/Android, a WebAssembly bundle for browsers, and a native executable for Windows/macOS/Linux—all with the same Dart source.
Example 2: Desktop File Picker with Native Dialogs
Desktop environments often require file‑system access that feels native. Flutter 4’s file_selector plugin now leverages the OS‑level file picker on Windows, macOS, and Linux, eliminating the need for third‑party wrappers.
Adding the Dependency
dependencies:
file_selector: ^0.9.0
Widget that Opens a File Dialog
import 'package:flutter/material.dart';
import 'package:file_selector/file_selector.dart';
class FilePickerDemo extends StatefulWidget {
@override
_FilePickerDemoState createState() => _FilePickerDemoState();
}
class _FilePickerDemoState extends State<FilePickerDemo> {
String? _filePath;
Future<void> _pickFile() async {
final typeGroup = XTypeGroup(label: 'text', extensions: ['txt', 'md']);
final XFile? file = await openFile(acceptedTypeGroups: [typeGroup]);
if (file != null) {
setState(() => _filePath = file.path);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Desktop File Picker')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: _pickFile,
child: Text('Choose File'),
),
if (_filePath != null) ...[
SizedBox(height: 20),
Text('Selected: $_filePath',
style: TextStyle(fontWeight: FontWeight.bold)),
],
],
),
),
);
}
}
Running flutter run -d windows, -d macos, or -d linux launches a truly native file‑picker dialog, while the same code works on mobile (falling back to the system picker) and on the web (opening a browser file chooser).
Performance Tips for Multi‑Platform Apps
Even though Impeller gives you hardware acceleration, you still need to be mindful of platform‑specific constraints. Here are three quick checks you can run before shipping:
- Avoid large widget rebuilds. Use
constconstructors wherever possible, and wrap expensive subtrees inRepaintBoundary. - Profile with DevTools. The “Performance” tab now shows separate timelines for UI thread, GPU thread, and platform channel latency.
- Lazy‑load assets. For web, split your bundle using
deferred importsso users only download code they need.
Pro tip: When targeting desktop, enable--releasebuilds withflutter build windows --release(or macOS/Linux). Release mode strips the Dart VM’s just‑in‑time (JIT) compiler, resulting in a 30‑40 % reduction in startup time.
Testing Across Platforms
Flutter’s test framework now supports multi‑platform golden tests. By rendering a widget on each target and comparing screenshots, you can catch platform‑specific visual regressions early. Example:
void main() {
testGoldens('Todo card looks consistent', (WidgetTester tester) async {
await tester.pumpWidget(MaterialApp(home: TodoCard(text: 'Sample')));
await multiScreenGolden(tester, 'todo_card');
});
}
The multiScreenGolden helper automatically generates images for mobile, web, and desktop pixel ratios, storing them in goldens/ for CI comparison.
Continuous Integration & Deployment
Because the same codebase produces binaries for six platforms, a robust CI pipeline is essential. Most teams use GitHub Actions with a matrix strategy:
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
platform: [android, ios, web, windows, macos, linux]
steps:
- uses: actions/checkout@v3
- uses: subosito/flutter-action@v2
with:
channel: stable
- run: flutter pub get
- name: Build ${{ matrix.platform }}
run: |
if [ "${{ matrix.platform }}" = "android" ]; then
flutter build apk --release
elif [ "${{ matrix.platform }}" = "ios" ]; then
flutter build ios --release
elif [ "${{ matrix.platform }}" = "web" ]; then
flutter build web --release
elif [ "${{ matrix.platform }}" = "windows" ]; then
flutter build windows --release
elif [ "${{ matrix.platform }}" = "macos" ]; then
flutter build macos --release
elif [ "${{ matrix.platform }}" = "linux" ]; then
flutter build linux --release
fi
Artifacts can then be uploaded to your preferred distribution channel—Google Play, App Store Connect, Azure Static Web Apps, or self‑hosted installers for desktop.
Real‑World Use Cases
Enterprises are increasingly adopting Flutter for internal tools because it reduces development overhead. A logistics company, for instance, built a tracking dashboard that runs on tablets in warehouses (Android), on a web portal for managers, and as a Windows desktop app for dispatch operators—all from a single Flutter repo.
Another example is a fintech startup that needed a secure, low‑latency trading client. By leveraging native‑first plugins for biometric authentication and hardware‑accelerated chart rendering, they delivered a consistent experience on iOS, Android, and macOS without maintaining separate codebases.
Best Practices for Maintaining a Cross‑Platform Codebase
1. Separate UI from platform logic. Keep platform‑specific code in dedicated service classes and expose clean Dart APIs.
2. Use feature flags. When a platform requires a workaround, guard it with a compile‑time constant (kIsWeb, Platform.isWindows) to avoid runtime checks.
3. Document platform expectations. Include a README section that lists required SDK versions, OS‑specific permissions, and build commands for each target.
Pro tip: Theflutter formatcommand now respects platform‑specific comment directives, letting you hide code sections from certain builds using// @if:androidand// @endiftags.
Conclusion
Flutter 4 delivers a truly unified development experience, allowing you