こんにちは、フラメルです。
今回はウィジェットをアスペクト比(比率)で表示できる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,
            ),
          ),
        ),
      ),
    );
  }
}以上です。
合わせて読みたい
					あわせて読みたい
					
			
						【Flutter】Padding|余白を外側に作る
						こんにちは、フラメルです。 今回はPaddingを使用して余白を作る方法を紹介します。 余白を外側に作る方法 Paddingあり Paddingなし ウィジェットの外側に余白を作るに…					
				
					あわせて読みたい
					
			
						【Flutter】EdgeInsets|上下左右の余白を調整
						こんにちは、フラメルです。 今回はPaddingなど余白調整をする際に使用されるEdgeInsetsの使い方について紹介します。 EdgeInsets.all|全サイドに同幅の余白を作る Edg…					
				
