Flutter：BottomSheetにBorderRadiusをつける方法

# 実現したいこと
`FAB`を選択したあとに、`BottomSheet`を表示させ、加えて上部左右に`BorderRadius`をつけること。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/695133/735c3de8-a01f-b745-4aff-00e9fb3f89a1.png)


# 方法
まずは、`FloatingActionButton`を選択したら`BottomSheet`を表示するコードを書きます。

```dart
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var listItem = ["on"];

  void displayBottomSheet(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
            height: 100,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(20.0),
                  topLeft: Radius.circular(20.0))),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Center(
                    child: Text("ボトムシートです"),
                  ),
                ],
              ),
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text('ホーム'),
      ),
      body: ListView.builder(
        itemCount: listItem.length,
        itemBuilder: (BuildContext context, int index) {
          return Card(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8.0)),
            margin: EdgeInsets.only(
                left: 20.0, top: 24.0, right: 20.0, bottom: 0.0),
            child: Column(
              children: <Widget>[
                ClipRRect(
                  child: Image.network(
                      'https://images.unsplash.com/photo-1523554888454-84137e72c3ce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'),
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8.0),
                      topRight: Radius.circular(8.0)),
                ),
                ListTile(
                  title: Text('福岡', style: TextStyle(fontSize: 20.0)),
                  subtitle: Text('2020.8.22'),
                  contentPadding: EdgeInsets.symmetric(horizontal: 16.0),
                ),
              ],
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          displayBottomSheet(context);
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

```

すると、以下のような見た目になると思います。
あれ...`BorderRadius`をつけているのに、なぜ反映されないんだろうと疑問をもつはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/695133/baf6e14e-7ec8-0c9c-2c84-b79b927e5edc.png)


順番に解決していきます。
まずは、`MaterialApp`に`canvasColor: Colors.transparent`を設定します。
デフォルトでは`canvasColor`が設定されているので、それを透明にする必要があります。

```dart
import 'package:art_memo/screens/home.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'コレクション';

    return MaterialApp(
      theme: ThemeData(
        canvasColor: Colors.transparent,
      ),
      home: Home(),
    );
  }
}
```

すると、次はFABを選択したあとの画面に何も表示されなくなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/695133/1e023175-10c6-7a68-63e8-e9ed31e6384d.png)


何も表示されないのは、`BottomSheet`の`BoxDecoration`に色をつけていなからです。
なので、`color: Colors.white` を付けることでBottomSheetが可視化されます。

```dart
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var listItem = ["on"];

  void displayBottomSheet(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
            height: 100,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(20.0),
                  topLeft: Radius.circular(20.0))),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Center(
                    child: Text("ボトムシートです"),
                  ),
                ],
              ),
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text('ホーム'),
      ),
      body: ListView.builder(
        itemCount: listItem.length,
        itemBuilder: (BuildContext context, int index) {
          return Card(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8.0)),
            margin: EdgeInsets.only(
                left: 20.0, top: 24.0, right: 20.0, bottom: 0.0),
            child: Column(
              children: <Widget>[
                ClipRRect(
                  child: Image.network(
                      'https://images.unsplash.com/photo-1523554888454-84137e72c3ce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'),
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8.0),
                      topRight: Radius.circular(8.0)),
                ),
                ListTile(
                  title: Text('福岡', style: TextStyle(fontSize: 20.0)),
                  subtitle: Text('2020.8.22'),
                  contentPadding: EdgeInsets.symmetric(horizontal: 16.0),
                ),
              ],
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          displayBottomSheet(context);
        },
        child: Icon(Icons.add),
      ),
    );
  }
}
```

これで最初に意図していた見え方になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/695133/723a520a-8f33-ba1b-0e3d-3debfc9d2600.png)


# 参考
- https://stackoverflow.com/questions/50376200/how-to-create-a-modal-bottomsheet-with-circular-corners-in-flutter
- https://www.youtube.com/watch?v=yMQEdFuVRIk