リリース・改善中
Framework · 2017年公開
Flutter は Google が開発したオープンソースの UI フレームワークで、Dart で書いた一つのコードからモバイル・Web・デスクトップのアプリを作れます。
Flutter は Google が開発したオープンソースの UI フレームワークで、2017 年に初めて公開されました。一つのコードベースから Android、iOS、Web、Windows、macOS、Linux 向けのアプリを作れます。アプリは Google の Dart 言語で書きます。Dart は Java や TypeScript に近い構文を持つオブジェクト指向言語で、null 安全性と async/await を備え、Dart SDK は Flutter に同梱されています。
Flutter は各プラットフォームのネイティブ UI 部品を使わず、独自のレンダリングエンジンですべてのピクセルを描画します。そのため、どのプラットフォームでも同じ見た目と動作になり、独自デザインやアニメーションも自由に実装できます。リリースビルドでは Dart コードが事前にマシンコードへコンパイルされ、開発中はホットリロードによってアプリの状態を保ったまま変更をすぐに反映できます。複数のプラットフォームに同時にリリースするモバイルアプリで特によく使われています。
始めるには、Flutter SDK をインストールして flutter doctor で環境を確認し、flutter create が生成するカウンターアプリを書き換えながらウィジェットの考え方を身につけるのがおすすめです。公式の codelab と Dart 言語ガイドを併せて読むと、ウィジェットの組み合わせ方、状態管理、レイアウトを順を追って学べます。パッケージは pub.dev で探し、flutter pub add で追加します。
同じ Dart コードから Android、iOS、Web、Windows、macOS、Linux のアプリをビルドし、必要なときだけプラットフォーム固有のコードを加えます。
テキスト、余白、レイアウト、画面全体までウィジェットで表し、小さなウィジェットを組み合わせて複雑な画面を作ります。
アプリの状態を保ったまま、変更したコードが 1 秒ほどで実行中のアプリに反映されます。
独自エンジンがすべてのピクセルを描画し、リリースビルドは事前にマシンコードへコンパイルされて滑らかに動作します。
VS Code に Flutter 拡張機能を入れて SDK を自動でダウンロードするか、docs.flutter.dev から OS 別の SDK をダウンロードして展開し、bin フォルダーを PATH に追加します。Dart SDK も含まれています。
flutter doctor で Android Studio、Xcode、Chrome、Visual Studio など、対象プラットフォームごとのツールがそろっているかを確認します。作りたいプラットフォームのツールだけあれば十分です。
flutter doctorflutter create でプロジェクトを作り、接続した端末やエミュレーター、ブラウザーで実行します。実行中にコードを保存すると、ホットリロードですぐに反映されます。
flutter create hello_app && cd hello_app && flutter runFlutter アプリはすべて lib/main.dart の main 関数から始まり、runApp に渡したウィジェットが画面全体になります。MaterialApp は Material Design アプリの骨組み、Scaffold は一画面の基本レイアウトで、Center と Text で中央に文字を表示します。flutter create が生成した main.dart をこのコードに置き換え、flutter run で実行してみましょう。
lib/main.dart
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(
home: Scaffold(
body: Center(child: Text('Hello, world!')),
),
),
);
}
flutter create hello_app && cd hello_app && flutter runインストールから Flutter の中心となる考え方まで、6 章で順を追って学びます。
Flutter について質問し、経験を共有し、意見を交わす場所です。
まだディスカッションはありません。最初の話題を始めましょう。
コメント 0件
ログイン · ログインするとコメントできます。
最初のコメントを書いてみましょう。