Flutter ちょっと Tips 〜要素サイズいっぱいに表示する〜

画面いっぱいに何かを表示したい

Container の constraints: BoxConstrains.expand() で、expand メソッドに何も渡さなければ要素のサイズいっぱいに表示してくれる。
この手の実装としては必要最低限だけど、取っ掛かりとしてここから考えると良さそうな感じ。

 return Container(
      constraints: BoxConstraints.expand(),
      child: 【表示したいもの】
    );

例

とりあえず動かしたい人向け
コピペすれば動く

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: Text(_title)),
        body: ImageWidget(),
      ),
    );
  }
}

class ImageWidget extends StatelessWidget {
  ImageWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints.expand(),
      child: Image.network(
          "http://gatherer.wizards.com/Handlers/Image.ashx?multiverseid=369577&type=card",
          fit: BoxFit.contain),
    );
  }
}

fit: BoxFit.containのところが、「画面サイズに合わせて画像が全部表示されるギリギリの大きさまで拡大する」の意味みたい。

公式ドキュメント

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

BoxConstraints.expand constructor
https://api.flutter.dev/flutter/rendering/BoxConstraints/BoxConstraints.expand.html

Image.network
https://api.flutter.dev/flutter/widgets/Image/Image.network.html

BoxFit enum
https://api.flutter.dev/flutter/painting/BoxFit-class.html

元記事はこちら

「Flutter ちょっと Tips 〜要素サイズいっぱいに表示する〜」