この章では、3Dモデルの表示領域に角丸、背景色、操作案内を追加します。

3Dモデルの操作機能は前章で完成しましたが、利用者が操作方法を知らなければ、モデルが動かせることに気づかない可能性があります。そこで、3Dビューアーの上に案内を重ね、見た目と使いやすさを整えます。

9.1 ClipRRectで表示領域の角を丸くする

ClipRRectは、子Widgetを角丸の形に切り抜くWidgetです。

ClipRRect(
  borderRadius: BorderRadius.circular(28),
  child: Flutter3DViewer(
    controller: _controller,
    src: ModelSource.modelUrl,
    enableTouch: true,
    activeGestureInterceptor: true,
  ),
)

BorderRadius.circular(28)では、四隅へ半径28の丸みを設定しています。

背景だけを角丸にしても、内側の3Dビューアーが角からはみ出すことがあります。ClipRRectで表示領域全体を囲むことで、3Dビューアーを含むすべての子Widgetが同じ形に切り抜かれます。

9.2 ColoredBoxで背景色を設定する

3Dモデルの読み込み前や、モデルの背景が透明な場合に備えて、表示領域へ背景色を設定します。

ColoredBox(
  color: const Color(0xFFE8E8E5),
  child: Flutter3DViewer(
    controller: _controller,
    src: ModelSource.modelUrl,
    enableTouch: true,
    activeGestureInterceptor: true,
  ),
)

ColoredBoxは、指定した色で子Widgetの背景を塗ります。

今回は画面全体の背景より少し濃いグレーを使い、3Dモデルの表示領域が分かるようにします。

9.3 StackでWidgetを重ねる

操作案内は、3Dビューアーの下ではなく、ビューアー上の下端へ重ねて表示します。このように複数のWidgetを重ねる場合はStackを使用します。

Stack(
  fit: StackFit.expand,
  children: [
    Flutter3DViewer(
      controller: _controller,
      src: ModelSource.modelUrl,
      enableTouch: true,
      activeGestureInterceptor: true,
    ),
    const Text('操作案内'),
  ],
)

childrenの先頭にあるWidgetが奥側に表示され、後に書いたWidgetほど手前に表示されます。

StackFit.expandを指定すると、Stackの子Widgetが利用可能な領域いっぱいに広がります。これにより、3Dビューアーが表示領域全体を使用します。

9.4 Positionedで操作案内の位置を決める

Stackの中では、Positionedを使ってWidgetの位置を指定できます。

const Positioned(
  left: 16,
  right: 16,
  bottom: 16,
  child: Text('1本指で回転・2本指で拡大縮小'),
)