こんにちは、フラメルです。
今回はウィジェットをアスペクト比(比率)で表示できる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｜全サイドに同幅の余白を作る】…