Zenn
🌀

Flutterパッケージ「Mix」を使ってみた その1 ～ボタンを作る～

に公開
Flutter
tech

前置き

Flutterの公式チャンネルで、Mixというパッケージが紹介されていました。

https://www.youtube.com/live/c9nWTcXCl3U?si=-0cBwCbGy10Rsg8h

リスニング力が壊滅的な私は、最後まで観れなかったのですが、公式サイトのドキュメントが読みやすかったので使ってみました。

https://www.fluttermix.com/

Mixとは？

FlutterのUIのスタイリングをお手軽に行うことができるパッケージです。

例えば、FlutterでContainerに枠線を付けたいとき、すぐにとコードが浮かぶでしょうか？
通常、100*100の黒枠の正方形はこのように書きます。

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.black,
      width: 1,
      style: BorderStyle.solid,
    ),
  ),
),

…枠線を書くためだけに複雑な階層構造を暗記して書かなければなりません。
これがMixだと、こうなります。

Box(
  style: Style(
    $box.width(100),
    $box.height(100),
    $box.border(
      color: Colors.black,
      width: 1,
      style: BorderStyle.solid,
    ),
  ),
),

BoxがContainer代わりです。
$box.borderが枠線の指定部分です。書き方が簡潔になりました。
さらに、このように書くと、スタイルを変数として切り離せます。

final style = Style(
  $box.width(100),
  $box.height(100),
  $box.border(
    color: Colors.black,
    width: 1,
    style: BorderStyle.solid,
  ),
);

Box(
  style:style
),

ウィジェットと、スタイルをHTMLとCSSのような感覚で切り離すことができます。

便利だと思いませんか？
もっとその魅力を感じるために、実際にMixを使ってみましょう！！

導入方法

下記をターミナルで実行します。

Terminal
flutter pub add mix

あとは、importをMixを使いたいファイルで書いていくだけです。

import 'package:mix/mix.dart';

Mixでボタンを作ってみよう

画像のようなボタンを作ります。

水色の角が丸いボタンの画像

公式の推奨に従って、下記のようなファイル階層で作ります。

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

1. Mixのウィジェットを使って、テキストボタンを作る

まずは、ラベルと、ボタンを押下した時の処理を引数に取るシンプルなボタンを作ります。
PressableBoxは押下可能なContainer、StyledTextは、Text代わりです。

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

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

  const CustomButton({
    super.key,
    required this.label,
    required this.onPress,
  });

  @override
  Widget build(BuildContext context) {
    return PressableBox(
      onPress: onPress,
      child: StyledText(
        label,
      ),
    );
  }
}

作ったボタンを配置して、実行してみてください。

main.dart
CustomButton(
  label: 'Button',
  onPress: () {
    print('Clicked!');
  },
),

黒いButtonというテキストが表れると思います。
一見押しても反応が無いように思いますが、ログにClicked!と表示されていると思います。

2. 見た目を設定する

スタイルは、custom_button.style.dartに作ります。
Styleクラスを使ってスタイルを作ります。

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

class CustomButtonStyle {

  CustomButtonStyle();

  Style container() => Style(
        $box.borderRadius(8),                 // 角丸
        $box.padding.horizontal(32),          // 左右のパディング
        $box.padding.vertical(16),            // 上下のパディング
        $box.color(const Color(0xFF4893D2)),  // 背景色
      );

  Style label() => Style(
        $text.style.color.white(),            // 文字色
        $text.style.bold(),                   // 文字の太さ
        $text.style.fontSize(18),             // 文字の大きさ
      );
}

作ったスタイルを設定しましょう。

custom_button.dart
  @override
  Widget build(BuildContext context) {
+   final style = CustomButtonStyle();

    return PressableBox(
      onPress: onPress,
+     style: style.container(),
      child: StyledText(
        label,
+       style: style.label(),
      ),
    );
  }

これで水色のボタンができたと思います！
でもまだ押した時の反応が無くて、ボタンっぽくないですね。

3. ホバー時と押下時の見た目を作りこむ

ボタンらしくなるように、ホバーした時と押した時のスタイルを設定します。
それぞれボタンが白っぽくなるようにしようかなと思います。
ここでは、$onを使用します。

custom_button.style.dart
  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),   // 背景色を明るくする
+       ),
      );

これだけです！可愛いボタンが完成しました！

最後に

ここまで触ってみて、Mixの便利さは、マテリアルデザインに囚われず、直感的にスタイルを作りこめるところだと感じました。

ボタンの種類を切り替えたり、テーマカラーを設定したり…とできることが沢山あるみたいなので、Mixについてもっと深堀してみたいなーと思います。

また続きの記事を書くので、ぜひ見ていただけると嬉しいです！

Discussion