📱

Flutter で モーダルの左上に閉じるボタンを設置する

2 min read

はじめに

modal_close

Flutterでモーダルの左上に閉じるボタンを設置したかったが、コピペして動くようなサンプルが自分の調べた範囲内で見つけられなかったので、自分なりに実装したものをまとめました。

少し力づくなところがあるので、もっとうまい方法があるよ、という方は教えていただけると幸いです。

Flutterでモーダルの左上に閉じるボタンを設置する

端的に言うと、 Stack で実現できました。

Stack はFlutterに標準で備わるWidgetで、Widget同士を重な合わせて表示したい場合に使用します。

https://api.flutter.dev/flutter/widgets/Stack-class.html

HTML/CSSで言う、position:absolute + z-index に近いことが実現出来ます。

Stackには子要素としてWidgetのリストを指定でき、リストのインデックスが大きいものほど手前に表示されます。

原点からの位置は、子要素のContainerの marginpadding などで指定します。

下はサンプルとなる、Flutterコードです。

このサンプルでは、EdgeInsets.only で top, left ,right等を指定していますが、Flutterでの描画を確認しつつ、ピクセル単位で微調整をしています。

ModalOverlay(Container(
child: Stack(
  children: <Widget>[
    Container(
      margin: const EdgeInsets.only(top: 50, left: 50, right: 50),
      decoration: BoxDecoration(
	color: Colors.white,
	borderRadius: BorderRadius.circular(20),
      ),
      child: Container(
	child: Column(
	mainAxisSize: MainAxisSize.min,
	mainAxisAlignment: MainAxisAlignment.start,
	children: <Widget>[
	  Container(
	      alignment: Alignment.topLeft,
	      margin: const EdgeInsets.only(top: 30, left: 30),
	      child: Text("年間走行距離",
		  style: TextStyle(
		    fontSize: 20.0,
		    fontWeight: FontWeight.bold,
		    locale: Locale("ja", "JP"),
		  ))),
	],
      )),
    ),
    Container(
     alignment: Alignment.topLeft,
     margin: const EdgeInsets.only(top: 35, left: 15),
     child: RawMaterialButton(
       child: Icon(const IconData(0xe16a, fontFamily: 'MaterialIcons'), color: Colors.white),
       fillColor: Colors.blue,
       onPressed: () {
       },
       padding: EdgeInsets.all(0),
       shape: CircleBorder(),
       )),
  ],
),
))

もっとうまくやれる方法もあると思いますが、一旦この方法でモーダルの閉じるボタンを実装しました。

もうちょっとスマートにやれる方法をご存じの方は教えていただけると幸いです。

Discussion

ログインするとコメントできます