世界最大級のオンライン学習サービス「Udemy(ユーデミー)」とは?

【Flutter】SafeAreaの使い方|画面からはみ出る要素を内部に留める

こんにちは、フラメルです。

今回はデバイスによってスクリーン画面からはみ出てしまう要素を画面内部に留める方法を紹介します。

目次

画面からはみ出る要素を内部に留める方法

SafeAreaあり
SafeAreaなし

スクリーン画面内に要素を留めるにはSafeAreaで画面内に留めたいウィジェットをラップします。

下記コードではColumnの要素ががスクリーンの外にはみ出ないようにしています。

SafeArea(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      Container(
        width: 150,
        height: 150,
        color: Colors.red,
      ),
      Container(
        width: 150,
        height: 150,
        color: Colors.yellow,
      ),
      Container(
        width: 150,
        height: 150,
        color: Colors.blue,
      ),
    ],
  ),
),

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                width: 150,
                height: 150,
                color: Colors.red,
              ),
              Container(
                width: 150,
                height: 150,
                color: Colors.yellow,
              ),
              Container(
                width: 150,
                height: 150,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上です。

目次