Zenn
🌀

Flutterパッケージ「Mix」を使ってみた その2 ～ボタンの種類を増やす～

に公開
Flutter
tech

はじめに

Mixの記事第二段！ということで、もし前回の記事を見ていない方はその1を先にご覧ください。

https://zenn.dev/cotlra/articles/flutter-package-mix-1

前回、「Mix」というFlutterのパッケージを使って、カスタマイズしたボタンを作ってみました。
今回は前回の続きでボタンの種類を増やしてみようと思います！

ボタンの種類を増やす

1つのアプリに使うボタンは1種類ではないですよね？
さらに種類を増やしてみましょう！
その1で作ったボタンをプライマリーボタンとして、セカンダリーボタンを作ります。

ファイルを追加する

custom_button.variant.dartというファイルを追加します。
ここにボタンの種類を追加します。

lib
 ├─widget
 │　├─custom_button.dart          ：ウィジェット本体
 │　├─custom_button.style.dart    ：スタイル
+│　└─custom_button.variant.dart  ：種類
 └─main.dart

ボタンの種類を定義する

custom_button.variant.dartにボタンの種類を用意します。

custom_button.variant.dart
import 'package:mix/mix.dart';

class CustomButtonType extends Variant {
  const CustomButtonType._(super.name);

  static const primary = CustomButtonType._('custom.button.primary');
  static const secondary = CustomButtonType._('custom.button.secondary');
}

種類によってスタイルを出し分ける

では、プライマリー用、セカンダリー用にスタイルを書き分けていきましょう！

custom_button.style.dart
import 'package:flutter/material.dart';
import 'package:mix/mix.dart';

class CustomButtonStyle {

+ final CustomButtonType type;

- CustomButtonStyle();
+ CustomButtonStyle(this.type);

  Style container() => Style(
        $box.borderRadius(8),
        $box.padding.horizontal(32),
        $box.padding.vertical(16),
-       $box.color(const Color(0xFF4893D2)),
        $on.hover(
          $box.color.lighten(10),
        ),
        $on.press(
          $box.color.lighten(20),
        ),
+       CustomButtonType.primary(
+         $box.color(const Color(0xFF4893d2)),
+       ),
+       CustomButtonType.secondary(
+         $box.color(const Color(0xFF48423E)),
+       ),
-     );
+     ).applyVariant(type);

  Style label() => Style(
        // 省略
      );
}

CustomButtonに種類を設定できるようにする

CustomButtonの引数を増やして、スタイルの種類を設定できるようにします。

custom_button.dart
import 'package:flutter/material.dart';
import 'package:mix/mix.dart';

import 'custom_button.style.dart';
+import 'custom_button.variant.dart';

class CustomButton extends StatelessWidget {
  final String label;
  final void Function() onPress;
+ final CustomButtonType type;

  const CustomButton({
    super.key,
    required this.label,
    required this.onPress,
+   this.type = CustomButtonType.primary,
  });

  @override
  Widget build(BuildContext context) {
-   final style = CustomButtonStyle();
+   final style = CustomButtonStyle(type);
    // …

これでセカンダリーボタンが完成しました！

セカンダリーボタンを表示してみる。

さっそく表示してみましょう！

main.dart
CustomButton(
  label: 'Button2',
  type: CustomButtonType.secondary,
  onPress: () {
    print('Clicked!2');
  },
),

こんな茶色のボタンが表示されれば完成です。

茶色のボタンの画像

最後に

このように、Mixを使えば、簡単に様々なボタンを定義することができます。
（もちろんボタン以外に沢山のものが作れますよ！）

プライマリー、セカンダリー…といった種類以外に、サイズ×種類といった掛け合わせで出しわけることもできます。
個人的には、Figmaのコンポーネントなどと相性がよさそうだなと思いました。

最後に、こちらの記事はMixの公式ドキュメントを参照しておりますので、もっとMixを知りたいという方はこちらを参照ください。

https://www.fluttermix.com/

次回は、カラーテーマを作ってみようと思います。

Discussion