An Introduction to Flutter: Features, History, and Sample Code
This article provides a comprehensive overview of Flutter, Google's cross‑platform mobile UI toolkit, covering its purpose, development history, key advantages, sample Dart code for state management and platform channel usage, and resources for quickly getting started with Flutter development.
Flutter is a Google‑developed UI toolkit that enables a single codebase to run on both Android and iOS while delivering native performance and deep platform integration.
Built with the Dart programming language, Flutter is easy to pick up for developers familiar with Java or JavaScript, offering a reactive framework and a UI design model similar to web development.
The framework aims to provide beautiful, high‑performance, high‑stability, high‑frame‑rate, low‑latency cross‑platform mobile applications, with UI components that feel native on each platform.
Compared with React Native, Flutter also offers a reactive view system and delivers a truly native experience, such as platform‑specific back navigation icons and scrolling physics.
Flutter was first announced at Google I/O 2017, entered beta in early 2018, reached beta 3 in May, and later released its first preview version before the stable 1.0 launch, quickly gaining over 27 k GitHub stars and a 50 % increase in active users.
Key advantages include high productivity (single codebase for Android and iOS, less code for more features, hot‑reload for rapid iteration and debugging), elegant customizable UI (built‑in Material Design and Cupertino widgets), and a modern responsive framework with powerful APIs for animation, gestures, and effects.
Example of a simple stateful widget in Dart:
class CounterState extends State
{
int counter = 0;
void increment() {
// Notify Flutter that the state has changed; Flutter will call build() to update UI
setState(() {
counter++;
});
}
Widget build(BuildContext context) {
// This method is re‑executed after setState()
return new Row(
children:
[
new RaisedButton(
onPressed: increment,
child: new Text('Increment'),
),
new Text('Count: $counter'),
],
);
}
}Flutter also allows access to native platform features via platform channels. A sample method to retrieve the battery level demonstrates this:
Future
getBatteryLevel() async {
var batteryLevel = 'unknown';
try {
int result = await methodChannel.invokeMethod('getBatteryLevel');
batteryLevel = 'Battery level: $result%';
} on PlatformException {
batteryLevel = 'Failed to get battery level.';
}
setState(() {
_batteryLevel = batteryLevel;
});
}Developers can mix Flutter with existing native code (Java, Swift, ObjC) to reuse libraries and SDKs, providing a unified development experience across platforms.
The first preview release added 32‑bit iOS (ARMv7) support, improved the video player package, introduced Firebase Dynamic Links, and enhanced documentation for embedding Flutter widgets in existing apps. The VS Code Flutter extension also gained new features such as an outline view and emulator launch.
To upgrade an existing Flutter installation on the beta channel, simply run:
$ flutter upgradeFor learning Flutter quickly, the official Chinese site (https://flutter-io.cn/), community videos, newsletters, GitHub repository, and various tutorials are recommended.
Qunar Tech Salon
Qunar Tech Salon is a learning and exchange platform for Qunar engineers and industry peers. We share cutting-edge technology trends and topics, providing a free platform for mid-to-senior technical professionals to exchange and learn.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.