画面いっぱいに何かを表示したい
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