ContainerとColumnとRowを使って、コントロールパネル風に画面を組んでみました。
左上にクローズボタン、中央にメインコンテンツ、下部に操作用のボタンがいくつか並ぶような構成です。
以下はサンプルコード全体になります。
import 'package:flutter/material.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar( title: const Text('サンプル'), centerTitle: true, backgroundColor: Colors.green, ), body: Container( color: Colors.green.shade200, padding: const EdgeInsets.all(20.0), child: Container( decoration: BoxDecoration( color: const Color(0x00000000), border: Border.all( color: Colors.green, width: 10.0, ), borderRadius: BorderRadius.circular(32.0), ), child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Padding( padding: const EdgeInsets.only(top: 10.0, right: 10.0), child: Row( mainAxisAlignment: MainAxisAlignment.end, children: const [ Icon(Icons.close, size: 60.0), ], ), ), Column( children: const [ Text( 'Happy', style: TextStyle(fontSize: 60.0), ), Text( 'Coding !!', style: TextStyle(fontSize: 60.0), ), ], ), Padding( padding: const EdgeInsets.only(bottom: 20.0), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: const [ Icon( Icons.pause, size: 60.0, ), SizedBox( width: 20.0, ), Icon( Icons.check, size: 60.0, ), SizedBox( width: 20.0, ), Icon( Icons.stop, size: 60.0, ), ], ), ) ], ), ), )), ); }}
ポイントは31行目の以下のコードです。
今回、30行目から始まるColumnの中にRowが三つあります。
これがあることで、上部、中央、下部のRow同士の間に均等にスペースを入れてくれます。
端末によって、画面の高さが変わりますが、この構成ならあまり変な形にはならないでしょう。
mainAxisAlignment: MainAxisAlignment.spaceBetween,
*「Run」を押すと実行できます。