【 flutter_neumorphic 】ニューモーフィズムでUIを実装しよう

flutter_neumorphic ？どんなパッケージなんだろう？

おしゃれなUIを作ってみたいわ！

本記事ではそんな疑問、要望にお答えします。

立体的で質感のあるデザインスタイル、ニューモーフィズムで UIを構築するのに有用なパッケージ、flutter_neumorphic の使い方を解説します。

以下のようなUI を実装することが簡単に可能です。

ぜひ本記事を読んで実装してみて下さい！

基本的な使い方

パッケージのインストール

CLI(macならターミナル)で、自分のプロジェクトのルートにて以下のコマンドを実行しパッケージをインストールします。

flutter pub add flutter_neumorphic

パッケージのインポート

UIを構築するDartファイルの上部に以下のインポート文を追加し、パッケージをインポートします。

import 'package:flutter_neumorphic/flutter_neumorphic.dart';

flutter_neumorphicには様々なボタンやTextFieldなど、さまざまなWidgetが用意されています。

どんなWidgetが用意されているかについては、以下のパッケージ紹介ページをご確認ください。

flutter_neumorphic | Flutter package

A complete, ready to use, Neumorphic ui kit for Flutter. Dark theming compatible & fully customizable.

pub.dev

本記事ではflutter_neumorphicの基本Widget 、 Neumorphic Widgetについて紹介します。

使い方は簡単で、ニューモーフィズムを実装したいContainerやSizedBox を Newmorpic Widgetで囲うだけです。

import 'package:flutter_neumorphic/flutter_neumorphic.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black12,
      body: Center(
        child: Neumorphic(
          child: const SizedBox(
            height: 100,
            width: 100,
            child: Center(
              child: Text('Hello World'),
            ),
          ),
        ),
      ),
    );
  }
}

色や深さ、光の当たり方向はstyleにNeumorphicStyleを設定することによって調整することが可能です。

色

色の調製例のコードです。 NeumorphicStyle

Neumorphic(
          style: NeumorphicStyle(
            color: Colors.green[100],
          ),
          child: const SizedBox(
            height: 100,
            width: 100,
            child: Center(
              child: Text('Hello World'),
            ),
          ),
        ),

深さ

depth プロパティに-20 ~ 20の値を設定することで、でっぱり具合（へこみ具合）を調整することができます。

以下は-20を設定した場合の例です。

Neumorphic(
          style: const NeumorphicStyle(
            depth: -20,
          ),
          child: const SizedBox(
            height: 100,
            width: 100,
            child: Center(
              child: Text('Hello World'),
            ),
          ),
        ),
      ),

光の方向

デフォルトは左上から光が当たっている形となっていますが、この光の方向をlightSourceプロパティにLigthtSourceを設定することで変更することが可能です。

以下の例では右上からに変更を行っています。

Neumorphic(
          style: const NeumorphicStyle(
            lightSource: LightSource.topRight,
          ),
          child: const SizedBox(
            height: 100,
            width: 100,
            child: Center(
              child: Text('Hello World'),
            ),
          ),
        ),

ニューモーフィズムな`Widget`をパッケージに依存せずに作りたい！

そんな人向けに、ニューモーフィズムなWidgetの作り方を紹介します。

ポイントは影の付け方です。光源が左上にあるとして、左上側は明るく、右下側は暗く影をつけると、ニューモーフィズムに見えるWidgetとなります。

実装例は以下となります。

Container(
          height: 100,
          width: 100,
          decoration: BoxDecoration(
            color: Colors.grey[300],
            borderRadius: BorderRadius.circular(20),
            boxShadow: [
              //1
              BoxShadow(
                color: Colors.grey[500]!,
                blurRadius: 15,
                offset: const Offset(5, 5),
              ),
              //2
              const BoxShadow(
                color: Colors.white,
                blurRadius: 15,
                offset: Offset(-5, -5),
              ),
            ],
          ),
          child: const Center(
            child: Text('Hello World'),
          ),
        ),