【Flutter】AspectRatioの使い方｜縦幅・横幅をアスペクト比(比率)で表示

2023年1月13日

こんにちは、フラメルです。

今回はウィジェットをアスペクト比(比率)で表示できるAspectRatioの使い方を紹介します。

AspectRatioの使い方

アスペクト比で表示したいウィジェットをAspectRatioでラップしaspectRatioで横幅と縦幅の比率を調整できます。

aspectRatioでは「横幅 / 縦幅」のように分数で比率を調整できます。

AspectRatio(
  aspectRatio: 5 / 2,
  child: Container(
    color: Colors.blue,
  ),
),

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: Center(
          child: AspectRatio(
            aspectRatio: 5 / 2,
            child: Container(
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

以上です。

合わせて読みたい

参考サイト

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