📱

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

2021/09/04に公開

Flutter

tech

はじめに

modal_close

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

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

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

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

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

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

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

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

下はサンプルとなる、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(),
       )),
  ],
),
))

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

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

はじめに

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

Discussion