Flutter UI で WinForms の SplitPanel を実現する

はじめに

WinForms 表示エリアを分割して境界線をドラッグ移動で調整する機能を便利に使っていた
それ以後、Android アプリやその他ＵＩでも使いたいなと思っていた
Flutter でもそう思い split_view パッケージを使って、十分使えることを知れた

環境

• Windows 11
• Flutter 3
• Dart 2.13.0
• split_view 3.2.1

使い方

とても簡単で特に詰まるところも無く進められる

https://pub.dev/packages/split_view
split_view 3.2.1

pubspec.yaml に追記して

dependencies:
  split_view: ^3.2.1

で pub get して、import して使う

import 'package:split_view/split_view.dart';

使い方

サンプルのコードをコピペするだけで確認できる

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

SplitPanel() {
    SplitView(
        children: [
            SplitView(
                viewMode: SplitViewMode.Horizontal,
                indicator: SplitIndicator(viewMode: SplitViewMode.Horizontal),
                activeIndicator: SplitIndicator(
                    viewMode: SplitViewMode.Horizontal,
                    isActive: true,
                ),
                children: [
                    Container(
                        child: Center(child: Text("View1")),
                        color: Colors.red,
                    ),
                    Container(
                        child: Center(child: Text("View2")),
                        color: Colors.blue,
                    ),
                    Container(
                        child: Center(child: Text("View3")),
                        color: Colors.green,
                    ),
                ],
                // Horizon: [0.4490049751243781, 0.22699004975124382, 0.32400497512437804]
                onWeightChanged: (w) => print("Horizon: $w"),
            ),
            Container(
                child: Center(child: Text("View4")),
                color: Colors.purple,
            ),
            Container(
                child: Center(child: Text("View5")),
                color: Colors.yellow,
            ),
        ],
        viewMode: SplitViewMode.Vertical,
        indicator: SplitIndicator(viewMode: SplitViewMode.Vertical),
        activeIndicator: SplitIndicator(
            viewMode: SplitViewMode.Vertical,
            isActive: true,
        ),
        controller: SplitViewController(limits: [null, WeightLimit(max: 0.5)]),
        // Vertical [0.4476950354609929, 0.21631205673758863, 0.3359929078014184]
        onWeightChanged: (w) => print("Vertical $w"),
    );
}

Container(width: double.infinity, height: 400.0, child: SplitPanel(),),

これだけで機能の全体を過不足なく確認できる

後は、位置情報（分割値リスト）の保存と復元を実装できれば完了となる

まとめ

実現が簡単にできることにパッケージ設計者に感謝
久しぶりに引っかかるところなく再現できたので満足度も高く嬉しい