[Flutter/dart]Stackした要素を画面いっぱいに広げる
概要
FlutterでColumn内に配置した要素を画面いっぱいに広げるためにはcrossAxisAligmentプロパティをCrossAxisAligment.stretchにします。ただし、子要素がStackの場合は少し工夫が必要でした。
方法
StackのfitプロパティをStackFit.passthroughにします(1)。fitプロパティはwidgetの幅を決める方法を表しますが、StackFit.passthroughの場合は親から指定された幅を設定します。つまり、この場合はCrossAxisAligment.stretchが適用されます。
また、子要素の重なり位置を指定する場合は片方のwidgetをAlignに包みます(2)。Positionedを使うと重なり位置を数字で指定しなければいけないため、画面幅に合わせて全体サイズを広げることができません。
以上を適用したコードは以下のようになります。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('demo'),
),
body: Container(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Stack(
overflow: Overflow.visible,
fit: StackFit.passthrough, //1
children: [
Card(
child: Container(
padding: const EdgeInsets.all(8),
child: Text(
'test',
style: TextStyle(
fontSize: 16
),
),
)
),
Align( //2
alignment: Alignment.topRight,
child: Icon(Icons.brightness_1, color:
Colors.red,),
)
],
)
],
)
)
);
}

最新記事
すべて表示現象 アプリ内にAdmobを追加して、アプリを起動すると、下記のエラーが発生 java.lang.RuntimeException: Unable to get provider com.google.android.gms.ads.MobileAdsInitProvider 原因 AndroidManifestの書き方が誤っていた。 <meta-data>はactivityと同じ階層にある必要が
概要 Uriを持っていて、Urlに変換したい場合の方法で少し手惑ったので共有します 方法 String url = uri.toString(); これだけです。 最後に ページを開くだけだとUriでもUrlでもいいんですが、WebViewはUrlを要求してくるんですよね。
問題 以前、日本語を含むURLを開くためには、エンコーディングしてやる必要がある、という記事を書きました。 しかし、すでにエンコーディングされているURLを再度エンコーディングしてしまうと、別のURLになってしまいます。 つまり、URLを開く処理の前に、 ・エンコーディングが必要なURLか ・すでにエンコーディングがされているか を判定しないといけないことになります。これは中々煩雑な処理です。 発