レッスン 1: Flutter と Dart の紹介

フラッター＆ダーツ: 基本から上級まで

パート 1: ダーツとフラッターの基礎

xdev.asia

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 言語の詳細。