Flutter – SafeArea()

위젯 분리 및 호출

// main.dart

import 'package:flutter/material.dart';
import 'package:row_column/screen/home_screen.dart'; // 무조건 /lib 을 기준으로


void main() {
  runApp(
    MaterialApp(
      home: HomeScreen(),
    ),
  );
}

// lib/screen/home_screen.dart 

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.black,
        child: Column(
          children: [
            Container(
              color: Colors.red,
              width: 50.0,
              height: 50.0,
            ),
            Container(
              color: Colors.orange,
              width: 50.0,
              height: 50.0,
            ),
            Container(
              color: Colors.yellow,
              width: 50.0,
              height: 50.0,
            ),
            Container(
              color: Colors.green,
              width: 50.0,
              height: 50.0,
            ),
          ],
        ),
      ),
    );
  }
}

보면 생성한 각 사각형들이 위 상태바 및 화면을 벗어나는것을 볼 수 있다.

그래서 SafeArea() 로 감싸서 벗어나지 못하게 할 수 있다. 또 특정 영역 (하단의 경우)에만 전체화면 처럼 보이게 하고싶어서 벗어나게끔 처리도 가능함

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        bottom: false, // bottom 만 화면 벗어나는것 허용
        child: Container(
          color: Colors.black,
          child: Column(
            children: [
              Container(
                color: Colors.red,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.orange,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.yellow,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.green,
                width: 50.0,
                height: 50.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}