アイマナ – ITを学ぼう

【Flutter】SafeArea サンプルコード【入門】

Flutter

SafeAreaを使うことで、デバイスの形によってアプリのコンテンツが見切れたりするのを防いでくれます。レイアウトの調整はSafeAreaがやってくれます。

今回はSafeAreaを使っていないパターンと使ったパターン、それぞれ紹介します。
　

目次

動作イメージ

SafeAreaを使っていないダメなパターン

　

最後の１行が見切れてしまっている。

SafeAreaを使ったパターン

　

最後の行が隠れていない。
SafeAreaがデバイスの形に応じたレイアウト調整をやってくれる。

サンプルコード

SafeAreaを使っていないダメなパターン

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Sample Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(itemBuilder: (BuildContext context, int index) {
        return Text(
          "This text is unsafe.",
          style: TextStyle(
            fontSize: 30,
          ),
        );
      }),
    );
  }
}

SafeAreaを使ったパターン

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Sample Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: ListView.builder(itemBuilder: (BuildContext context, int index) {
          return Text(
            "This text is safe.",
            style: TextStyle(
              fontSize: 30,
            ),
          );
        }),
      ),
    );
  }
}

説明

SafeAreaの実装部分は以下の通りです。

      SafeArea(
        child: ListView.builder(itemBuilder: (BuildContext context, int index) {
          return Text(
            "This text is safe.",
            style: TextStyle(
              fontSize: 30,
            ),
          );
        }),
      )

使い方は簡単です。表示したいwidgetをSafeAreaでラップするだけです。

今回の場合はListViewをSafeAreaでラップしています。

関連記事

◆ 「Widget of the Week」の日本語翻訳版
【日本語版】【Flutter】Widget of the Week – #1 SafeArea【要約】