【flutter】backdropの使い方

# backdropって何？
https://material.io/components/backdrop#usage

まぁこれを見たほうが早いです。
flutterの拡張機能のページはこちらです。

https://pub.dev/packages/backdrop

簡単に説明すれば、
![Screenshot_1628844043_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588892/2f891d84-cf91-ca57-78b5-f6424acc4551.jpeg)
こうなる
![Screenshot_1628844263_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588892/823aa69c-d24d-4b2a-f50e-9c1f3be9fb7e.jpeg)

っていうやつです。
このように、狭い画面にたくさんウィジェットをおさめることができます。
実際に使ってみたいな～という方は、公式からデモページが用意されているので、アクセスしてみて下さい。

https://fluttercommunity.github.io/backdrop/demo/#/

# 使い方
基本的な使い方を説明します
## インストール
まぁここは公式のページ見ておいたほうがいいと思います。

```pubspec.yaml
dependencies:
  backdrop: ^0.6.2
```

インポート

```dart
import 'package:backdrop/backdrop.dart';
```
:::note warn
flutter v1xxを使っている人は、backdrop v0.5.xを使ってください。
:::

## とりあえず使ってみる

ScaffoldはBackdropScaffoldに置き換え、同じようにAppBarもBackdropAppBarに置き換えます。

```dart:flutter
BackdropScaffold(//Scaffoldと置き換える
  appBar: BackdropAppBar(//AppBarと置き換える。
    title: Text("Backdrop Example"),
  ),
  backLayer: Center(//backLayer（隠れるところ）におくwigdet
    child: Text("Back Layer"),
  ),
  frontLayer: Center(//frontLayer(表に出るところ)におくwigdet
    child: Text("Front Layer"),
  ),
)
```
:::note warn
普通にやると、画面遷移して出るときにいつも付いている、もどるボタンは消えてしまいます。
:::
:::note warn
backLayerのwidgetの横幅は、"double.infinity"などを使って、最大サイズにしてください。そうでないと表示がとてもおかしくなってしまいます。
:::
##もうちょい詳しく
BackdropScaffoldの使えそうなプロパティ

| プロパティ名 | 渡すデータ型 | 説明 |
|:-:|:-:|:-:|
|stickyFrontLayer | bool  |  backLayerのサイズをwidgetのサイズに合わせるか |
| revealBackLayerAtStart  |  bool | 最初にbackLayerを開いておくか  |
| maintainBackLayerState | bool  | backLayerを閉じたら、backLayerのStateも初期化するか  |
| subHeaderAlwaysActive  |  bool | backLayerをあけてもsubHeaderを見えるようにするか  |
| subHeader  |  widget |  forntLayerのヘッダーのウィジェット |
|  headerHeight |  double | backLayerを開いたときのfrontLayerの高さ  |
| frontLayerActiveFactor  | double  | backLayerが閉じているときのfrontLayerの大きさの割合（１～０）  |
|  frontLayerBackgroundColor |  Color | その名の通り、frontLayerの背景色  |
|  backLayerBackgroundColor | Color  |  その名の通り、backLayerの背景色 |
| frontLayerScrim | Color | backLayerが開いているときのfrontLayerの色 |
| backLayerScrim | Color | backLayerが閉じているときのbackLayerの色 |
| onBackLayerRevealed | Function() | backLayerが開いたときに実行されるコード |
| onBackLayerConcealed | Function() | backLayerが閉じたときに実行されるコード |
他にも普通のScaffoldのプロパティも、もちろん使えます。

BackdropAppBarの使えそうなプロパティ

| プロパティ名 | 渡すデータ型 | 説明 |
|:-:|:-:|:-:|
| automaticallyImplyLeading | bool | backLayerを開け閉めするメニューボタンを表示するかしないか（画面遷移してきた画面の場合、falseにすると、戻るボタンが表示される） |

他にも普通のAppBarのプロパティも、もちろん使えます。
## コードからbackLayerを開け閉めする方法
サンプルコード

```dart:flutter
Builder(
     builder: (context)=>
          TextButton(
            onPressed: (){
             Backdrop.of(context).fling();//backLayerを開け閉めする
             },
            child: Text("aaaa"),
             ),
            )
```
このようにBuilderの下でBackdrop.of(context).fling();を実行することでbackLayerを開け閉めすることが出来ます。
Backdrop.of(context)のメゾットなどはBuilderの下に書いてください。
Backdrop.of(context)のメゾットとかの一覧表

| 名前 | 戻り値 | 説明 |
|:-:|:-:|:-:|
|  fling() | なし  |  backLayerが開いていたら閉める。閉じていたら開く。 |
| concealBackLayer()  |  なし | backLayerを閉じる  |
|  revealBackLayer() | なし  |  backLayerを開く |
| isBackLayerConcealed  | bool  | backLayerが閉じているか  |
| isBackLayerRevealed | bool | backLayerが開いているか |
# まとめ
こんな感じにBackdropの使ってみました。
日本語のBackdropの使い方の記事があまりなかったので、お役に立てたら幸いです。
Backdropは活発に開発が進められているそうなので、どんどん進化するといいですね。
# 参考文献
https://pub.dev/packages/backdrop
https://fluttercommunity.github.io/backdrop/demo/#/