今日もFlutter記事毎日投稿がんばっていきます！

正方形を作成して横に並べる方法を紹介します。

正方形の横幅は端末の画面の横幅によって変化するものなので、サイズを固定値にすることができません。

そこで、画面サイズを『MediaQuery』で取得して正方形の縦幅を指定する方法もありますが、『AspectRatio』を使うともっと簡単に記述できるので紹介したいと思います。

『MediaQuery』の使い方が知りたい方はこちらの記事も参考にしてみてください。

『AspectRatio』でaspectRatioを 1.0 に指定すると縦横比が 1:1 となり、正方形を作成することができます。

AspectRatio(
   aspectRatio: 1.0,
   child: Container(color: Colors.yellow,)
)

コードの全文も貼っておきますので、ぜひ参考にしてください。

import 'package:flutter/material.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     title: 'Hatchout',
     theme: ThemeData(
       primarySwatch: Colors.blue,
       visualDensity: VisualDensity.adaptivePlatformDensity,
     ),
     home: TopPage(),
   );
 }
}

class TopPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('正方形を並べる'),
       centerTitle: true,
     ),
     body: Row( // 正方形を横に並べる
       children: [
         Expanded(
           child: AspectRatio(
               aspectRatio: 1.0,
               child: Container(color: Colors.green,)
           ),
         ),
         Expanded(
           child: AspectRatio(
               aspectRatio: 1.0,
               child: Container(color: Colors.yellow,)
           ),
         ),
         Expanded(
           child: AspectRatio(
               aspectRatio: 1.0,
               child: Container(color: Colors.red,)
           ),
         ),
       ],
     ),
   );
 }
}