第 1 課：介紹 Flutter 與 Dart

Flutter 和 Dart：從基礎到高級

第 1 部分：Dart 和 Flutter 基礎知識

亞洲開發網

1.什麼是顫振？

Flutter 是 Google 的 UI 工具包，可讓您從單一程式碼庫在行動裝置、Web 和桌面上建立本機編譯的應用程式。顫振用途 斯基亞發動機 直接渲染到畫布，而不依賴本機小工具。

框架	引擎	語言	優點
顫動	斯基亞/葉輪	飛鏢	60fps，像素完美的 UI
反應本機	本地橋	JavaScript	龐大的 JS 生態系統
Kotlin 多平台	本地人	科特林	共享業務邏輯

2.安裝顫振

# macOS
brew install --cask flutter

# Kiểm tra
flutter doctor
flutter --version

# Tạo project mới
flutter create my_app
cd my_app
flutter run

3. 首次申請

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Xin chào Flutter!')),
      body: const Center(
        child: Text('Hello World', style: TextStyle(fontSize: 24)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

4. 項目結構

my_app/
├── lib/
│   └── main.dart
├── test/
├── android/
├── ios/
├── web/
├── pubspec.yaml      # Dependencies
└── analysis_options.yaml

下一篇： Dart 語言深入探究。