Scripts2026年4月12日·1 分钟阅读

Flutter — Google Cross-Platform UI Toolkit for Beautiful Apps

Flutter is Google cross-platform UI toolkit for crafting beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. Powered by the Dart language and the Skia rendering engine (now Impeller).

SC
Script Depot · Community
快速使用

先拿来用,再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

# Install via FVM (Flutter Version Manager, recommended)
brew tap leoafarias/fvm
brew install fvm
fvm install stable
fvm use stable

# Or download SDK directly
# https://docs.flutter.dev/get-started/install

flutter doctor
flutter create my_app
cd my_app
flutter run                  # Picks connected device
flutter run -d chrome        # Web
flutter run -d macos         # Desktop

A minimal widget:

import "package:flutter/material.dart";

void main() => runApp(const TokRepoApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "TokRepo",
      theme: ThemeData(colorSchemeSeed: Colors.blue, useMaterial3: true),
      home: const CounterPage(),
    );
  }
}

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});
  @override
  State<CounterPage> createState() => _CounterState();
}

class _CounterState extends State<CounterPage> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Counter")),
      body: Center(child: Text("Count: $count", style: const TextStyle(fontSize: 32))),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => count++),
        child: const Icon(Icons.add),
      ),
    );
  }
}
介绍

Flutter is Google open-source UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single Dart codebase. First released in 2017. Flutter apps compile ahead-of-time to native ARM/x64/JS code and render using a custom GPU-accelerated engine (Skia, now being replaced by Impeller for better iOS performance). Used by Google Ads, Alibaba, BMW, Toyota, Canonical, and many more.

What Flutter Does

  • Cross-platform — iOS, Android, Web, macOS, Windows, Linux, embedded
  • Widget-based UI — everything is a widget, composition over inheritance
  • Hot reload — sub-second UI updates during development
  • Skia/Impeller — custom rendering engine, pixel-perfect across platforms
  • Material Design 3 — Material widgets with theming
  • Cupertino widgets — iOS-style controls
  • State management — Provider, Riverpod, Bloc, GetX, Redux
  • Packages — 40,000+ on pub.dev
  • Native integration — method channels + Pigeon for type-safe bridges
  • DevTools — profiling, widget inspector, network, CPU/memory

Architecture

Dart source compiles to native ARM64/x64 for release (AOT) or interpreted via the Dart VM in debug (JIT) enabling hot reload. UI is a tree of widgets that Flutter rasterizes with its own rendering engine on top of the platform canvas. Native plugins bridge platform APIs via method channels.

Self-Hosting

Open-source SDK. Install locally.

Key Features

  • Single codebase for 6 platforms
  • Hot reload and hot restart
  • Custom rendering engine (Skia / Impeller)
  • Material Design 3
  • Cupertino (iOS) widgets
  • Huge widget library
  • 40,000+ packages on pub.dev
  • DevTools profiler
  • Firebase integration
  • Custom animations and gestures

Comparison

Framework Language Rendering Platforms
Flutter Dart Own engine 6
React Native JS/TS Native components iOS, Android, Web (sub)
SwiftUI Swift Apple Apple only
Jetpack Compose Kotlin Android Android + Desktop
.NET MAUI C# Native components 4
Qt C++/QML Own engine 6+

常见问题 FAQ

Q: Flutter vs React Native? A: Flutter 自绘 UI(视觉完全一致但像素看上去非原生感);RN 桥接原生组件(更原生观感但跨平台差异需要处理)。Flutter 性能更稳定,RN 生态和 JS 社区更大。

Q: 支持 Web 生产吗? A: 支持,但首屏较大(Dart runtime + CanvasKit)。适合 app-like SPA,不适合 SEO 站点。

Q: Impeller 是什么? A: Flutter 新渲染后端,取代 Skia。在 iOS 上解决 shader compilation jank 问题,是未来标准。

来源与致谢 Sources

讨论

登录后参与讨论。
还没有评论,来写第一条吧。

相关资产