share facebook facebook twitter menu hatena pocket slack

2019.11.05 TUE

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

出野 皓士

WRITTEN BY 出野 皓士

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

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 〜要素サイズいっぱいに表示する〜

出野 皓士

出野 皓士

2019/02入社。Android アプリ開発がメイン。将来の記憶喪失に備えて技術記事を書く。

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。