Flutterでサーバー駆動UIを実現する「stac」パッケージ入門

アプリのUIをリアルタイムに変更したい場面はありませんか？「stac」は、JSON定義で動的にUIを組み立てるServer-Driven UI（SDUI）フレームワークです。アプリの再デプロイなしで、画面構成をサーバー側から制御できます。

---

1. stacとは？

• Flutter対応のSDUIフレームワーク。
• JSON構造をFlutterウィジェットにマッピングして表示。
• Android/iOS/Web/Desktopに対応。

---

2. インストール

pubspec.yamlに追加します：

dependencies:
  stac: ^0.11.0

CLIでも追加可能：

flutter pub add stac

最新安定版は0.11.0です（2025年6月時点）。

---

3. 初期設定と基本的な使い方

main.dartの例

import 'package:flutter/material.dart';
import 'package:stac/stac.dart';

void main() async {
  await Stac.initialize();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final json = {
      "type": "text",
      "data": "Hello Stac!"
    };
    return StacApp(
      title: 'Stac Demo',
      homeBuilder: (context) => Stac.fromJson(json, context),
    );
  }
}

• Stac.initialize()で初期セットアップ。
• StacAppでラップし、Stac.fromJson(...)やStac.fromNetwork(...)で表示します。

---

4. ネット経由のUI取得

サーバー上のJSONをそのままUIとして使うには、以下のように記述します：

StacApp(
  title: 'Stac Network Demo',
  home: Stac.fromNetwork(
    StacRequest(url: 'https://example.com/ui.json', method: Method.get),
  ),
);

これにより、サーバー側から画面構成を取得し動的に描画できます。

---

5. JSON定義でのUI構成例

以下はフォーム画面のJSON例です：

{
  "type": "scaffold",
  "appBar": {
    "type": "appBar",
    "title": { "type": "text", "data": "Form Screen" }
  },
  "body": {
    "type": "singleChildScrollView",
    "child": {
      "type": "column",
      "children": [
        { "type": "textField", "keyboardType": "text" },
        { "type": "elevatedButton", "child": { "type": "text", "data": "送信" }, "onPressed": { "action": "print", "message": "clicked" } }
      ]
    }
  }
}

これにより、フォーム・ボタン・テキストが動的に構築されます。

---

6. カスタムウィジェットとアクション

• stacの柔軟性は、カスタムウィジェットやアクション実装に対応している点にもあります。
• たとえば「カウンター画面」などを独自のParserで拡張できます。([medium.com][5])

---

7. 主なメリットと注意点

メリット

• UI修正の度にアプリを再配信する必要がない。
• JSON形式でUI構成を一元管理。
• テーマ・Platformに依存せずUI制御が可能。

注意点

• JSONとFlutterウィジェットの対応関係を理解する必要がある。
• 複雑なカスタムUIはParser実装が必要。
• JSONの型にほとんど制限がないため、バリデーションなど慎重な設計が望ましい。

---

8. まとめ

特長	内容
フレームワークタイプ	SDUI
UI更新方式	JSON
対応ウィジェット	Scaffold, Text, Image, Button, Form系等
カスタマイズ性	Parser拡張で自由度高

stacを使えば、サーバー側でUIを管理でき、Flutterアプリは柔軟かつ迅速に画面を更新可能です。「アプリのUI頻繁に変わる」「複数プラットフォームで同じUI構成を指定したい」といった場面では非常に有用です。