[2023.11.24] 플러터(flutter) 순한 맛 강좌 20 | Container Widget

<< 소스 코드 >>

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Snack Bar',
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      home: MyPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue, //Scaffold 영역 배경색 지정(블루)
      body: SafeArea( //SafeArea 지정 (화면 상단 시계, 실행 앱, 배터리 표시 영역)
        child: Container(
          //Container 영역은 가능한 최대한 크기의 영역으로 설정됨.
          color: Colors.red,  //Container 영역 배경색 지정(레드) => 전체가 레드 색상
          child: Text('Hello'), //child 지정 시 child 영역까지 레드 색상
          width: 100, //Container 영역 사이즈 지정
          height: 100,  //Container 영역 사이즈 지정
          //margin: EdgeInsets.all(20.0), //Container 위젯의 모든 영역 여백 지정
          //margin은 스크린의 가장자리 기준 -> 위젯의 바깥쪽
          margin: EdgeInsets.symmetric( //Container 위젯의 지정 영역만큼 여백 지정
            vertical: 80, 
            horizontal: 20
          ),
          //padding은 Container가 가진 요소가 가장자리에서 여백을 가짐 -> 위젯의 안쪽
          padding: EdgeInsets.all(40.0),
        ),
      ),
    );
  }
}

 

 

<< 출력 화면 >>