【flutter】SnackBarをBootstrap風デザインで実装

勉強がてら、flutterのsnackbarをbootstrap風なデザインで実装してみました

SnackBarの基礎的な部分は以下リンクの、公式チュートリアルを見ています
https://docs.flutter.dev/cookbook/design/snackbars

イメージ

全体コード

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: SnackBarSamplePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('snackbar sample!')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              MySnackBar.buildSnackBar(
                '成功しました！',
                Colors.blue,
              ),
            );
          },
          child: const Text('SnackBarを表示する'),
        ),
      ),
    );
  }
}

class MySnackBar {
  static SnackBar buildSnackBar(String content, MaterialColor baseColor) {
    return SnackBar(
      behavior: SnackBarBehavior.floating,
      backgroundColor: baseColor[100],
      shape: RoundedRectangleBorder(
        side: BorderSide(color: baseColor),
        borderRadius: const BorderRadius.all(Radius.circular(5.0)),
      ),
      content: Text(
        content,
        style: TextStyle(color: baseColor[900]),
      ),
      action: SnackBarAction(
        textColor: baseColor[900],
        label: 'OK',
        onPressed: () {},
      ),
    );
  }
}

コード説明

SnackBarは共通ウィジェットとして利用できるように、MySnackBarクラスへ分離し、
staticメソッドのbuildSnackBar()内で実装してみました。

また引数として、アラートの本文とベースカラーを指定できるようにしています。

class MySnackBar {
  static SnackBar buildSnackBar(String content, MaterialColor baseColor) {
    return SnackBar(
      // ここの指定でSnackbarを浮かせる
      behavior: SnackBarBehavior.floating,
      // 背景色をbaseColor[100]に指定
      backgroundColor: baseColor[100],
      // 角丸の色付き線
      shape: RoundedRectangleBorder(
        side: BorderSide(color: baseColor),
        borderRadius: const BorderRadius.all(Radius.circular(5.0)),
      ),
      // 本文、文字色をbaseColor[900]に指定
      content: Text(
        content,
        style: TextStyle(color: baseColor[900]),
      ),
      // 右のOKボタン、文字色は本文と同じ
      action: SnackBarAction(
        textColor: baseColor[900],
        label: 'OK',
        onPressed: () {},
      ),
    );
  }
}

呼び出し側
MySnackBar.buildSnackBar()を呼び出し、contentとbaseColorを引数に渡すことで利用できます

MySnackBar.buildSnackBar(
  '成功しました！',
  Colors.blue,
),

最後に

flutterで用意されている他の色も一部試してみました
https://api.flutter.dev/flutter/material/Colors-class.html

• Colors.red

• Colors.orange

• Colors.purple