[Widget]Container,Column,Rowを使ったパネル画面のサンプル

動作環境: Flutter 2.8.1 Dart 2.15.1
LINEでこのページを共有するTwitterでこのページを共有するこのページをはてなブックマークに追加

ContainerとColumnとRowを使って、コントロールパネル風に画面を組んでみました。
左上にクローズボタン、中央にメインコンテンツ、下部に操作用のボタンがいくつか並ぶような構成です。

以下はサンプルコード全体になります。

lib/main.dart
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」を押すと実行できます。