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

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

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

## イメージ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983921/28af2979-cec1-1e4d-0000-1c0695cf09f1.png" width="400">



## 全体コード
```dart
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()内で実装してみました。

また引数として、アラートの本文とベースカラーを指定できるようにしています。
```dart
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を引数に渡すことで利用できます
```dart
MySnackBar.buildSnackBar(
  '成功しました！',
  Colors.blue,
),
```

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

- Colors.red
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983921/ce06d2b3-0baf-988f-ec46-59755382413e.png" width=300>

- Colors.orange
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983921/bea0a80b-69f3-1e5b-ad27-bcdad0588806.png" width=300>

- Colors.purple
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2983921/f922e92d-1766-3086-0ca3-4590590c48ed.png" width=300>