【Flutter】Aurora UIを実装する

2021年頃からトレンドになっている「Aurora UI」というUIデザインを、Flutterを使って実装してみたいと思います。

実装したもの

実装方法

Aurora UIは、

背景を用意する
背景をぼかす

ことで作成できるので、こちらの手順に沿って実装していきます。

背景を用意する

今回は下記のような円を複数重ね合わせた背景を用意します。

import 'dart:ui';

import 'package:flutter/material.dart';

class CircleParameter {
  CircleParameter({
    this.left = 0,
    this.top = 0,
    required this.color,
    required this.diameter,
  });

  final double left;
  final double top;
  final Color color;
  final double diameter;
}

class AuroraContainer extends StatelessWidget {
  const AuroraContainer({
    Key? key,
    this.width = double.infinity,
    this.height = double.infinity,
    this.baseColor = Colors.white,
    this.circleParameters = const [],
  }) : super(key: key);

  final double width;
  final double height;
  final Color baseColor;

  final List<CircleParameter> circleParameters;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: height,
      color: baseColor,
      child: Stack(
        children: [
          ...circleParameters.map(
            (CircleParameter p) {
              return _circle(
                left: p.left - p.diameter / 2,
                top: p.top - p.diameter / 2,
                color: p.color,
                diameter: p.diameter,
              );
            },
          ),
        ],
      ),
    );
  }

  Widget _circle({
    required double left,
    required double top,
    required Color color,
    required double diameter,
  }) {
    return Positioned(
      left: left,
      top: top,
      child: ClipOval(
        child: Container(
          width: diameter,
          height: diameter,
          color: color,
        ),
      ),
    );
  }
}

使い方の例

AuroraContainer(
  baseColor: Colors.white,
  circleParameters: [
    CircleParameter(
      left: 0,
      top: 100,
      color: Colors.purple,
      diameter: 800,
    ),
    CircleParameter(
      left: 0,
      top: MediaQuery.of(context).size.height,
      color: Colors.purpleAccent,
      diameter: 800,
    ),
    CircleParameter(
      left: MediaQuery.of(context).size.width + 100,
      top: MediaQuery.of(context).size.height / 2 + 100,
      color: Colors.deepPurpleAccent,
      diameter: 700,
    ),
  ],
)

背景をぼかす

BackdropFilterを利用すると、背景をぼかすことができます。

https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html

aurora_container.dartのStackのchildlenの最後に以下を下記のようなフィルターを追加すると、背景をぼかすことができます。

ClipRRect(
  child: BackdropFilter(
    filter: filter ?? ImageFilter.blur(
      sigmaX: 50,
      sigmaY: 50,
    ),
    child: Container(
      color: filterColor ?? Colors.white.withOpacity(0),
    ),
  ),
)

全体像

class AuroraContainerSamplePage extends StatelessWidget {
  const AuroraContainerSamplePage({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AuroraContainer(
      baseColor: Colors.white,
      filter: ImageFilter.blur(
        sigmaX: 75,
        sigmaY: 75,
      ),
      circleParameters: [
        CircleParameter(
          left: 0,
          top: 100,
          color: Colors.purple,
          diameter: 800,
        ),
        CircleParameter(
          left: 0,
          top: MediaQuery.of(context).size.height,
          color: Colors.purpleAccent,
          diameter: 800,
        ),
        CircleParameter(
          left: MediaQuery.of(context).size.width + 100,
          top: MediaQuery.of(context).size.height / 2 + 100,
          color: Colors.deepPurpleAccent,
          diameter: 700,
        ),
      ],
    );
  }
}

class CircleParameter {
  CircleParameter({
    this.left = 0,
    this.top = 0,
    required this.color,
    required this.diameter,
  });

  final double left;
  final double top;
  final Color color;
  final double diameter;
}

class AuroraContainer extends StatelessWidget {
  const AuroraContainer({
    Key? key,
    this.width = double.infinity,
    this.height = double.infinity,
    this.baseColor = Colors.white,
    this.filter,
    this.filterColor,
    this.circleParameters = const [],
  }) : super(key: key);

  final double width;
  final double height;
  final Color baseColor;

  final ImageFilter? filter;
  final Color? filterColor;
  final List<CircleParameter> circleParameters;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: height,
      color: baseColor,
      child: Stack(
        children: [
          ...circleParameters.map(
            (CircleParameter p) {
              return _circle(
                left: p.left - p.diameter / 2,
                top: p.top - p.diameter / 2,
                color: p.color,
                diameter: p.diameter,
              );
            },
          ),
          ClipRRect(
            child: BackdropFilter(
              filter: filter ??
                  ImageFilter.blur(
                    sigmaX: 50,
                    sigmaY: 50,
                  ),
              child: Container(
                color: filterColor ?? Colors.white.withOpacity(0),
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget _circle({
    required double left,
    required double top,
    required Color color,
    required double diameter,
  }) {
    return Positioned(
      left: left,
      top: top,
      child: ClipOval(
        child: Container(
          width: diameter,
          height: diameter,
          color: color,
        ),
      ),
    );
  }
}

参考

https://goworkship.com/magazine/2021-trend-aurora-ui/#Aurora_UI