Container와 Padding으로 UI 꾸미기

1. Container 위젯

• 색상, 패팅, 마진, 테두리, 크기 등을 지정할 수 있습니다. 다목적 박스 위젯입니다.

Container 예제

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  Widget build(BuildContext) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Container & Padding'),
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            color: Colors.blueAccent,
            borderRadius: BorderRadius.circular(12),
            boxShadow: [
              BoxShadow(
                color: Colors.black26,
                offset: Offset(0, 4),
                blurRadius: 8,
              ),
            ],
          ),
          child: Center(
            child: Text(
              'Container!',
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
          ),
        ),
      ),
    );
  }
}

2. Padding 위젯

• 내부 여백을 설정할 때 사용하는 위젯입니다.

Padding 예제

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('패딩이 적용된 텍스트'),
)

3. Container + Padding 조합

• 컨데이터 안에 패딩을 주면 더 보기 좋은 레이아웃을 만들 수 있습니다.

조합 예제

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  Widget build(BuildContext) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Container & Padding'),
        ),
        body: Container(
          color: Colors.orange,
          child: Padding(
              padding: EdgeInsets.all(20),
              child: Text(
                '안쪽에 여백이 있는 컨테이너',
                style: TextStyle(fontSize: 16, color: Colors.white),
              )),
        ));
  }
}

4. 따라하기 미션

• 다양한 색상과 테두리를 적용한 ‘Container’를 만들어 보고 내부 텍스트에 ‘Padding’을 적용해보세요.
• 마진과 패팅의 차이를 실습하며 이해해보세요

예제 코드

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  Widget build(BuildContext) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Container & Padding'),
        ),
        body: Center(
          child: Container(
            margin: EdgeInsets.all(20), //바깥 여백
            padding: EdgeInsets.all(16), //안쪽 여백
            decoration: BoxDecoration(
              color: Colors.lightBlue, //배경 색상
              border: Border.all(
                color: Colors.blue, //테두리 색상
                width: 3, //테두리 두께
              ),
              borderRadius: BorderRadius.circular(12), //모서리 둥글게
            ),
            child: Text(
              'Padding & Margin 예제',
              style: TextStyle(fontSize: 18, color: Colors.white),
            ),
          ),
        ));
  }
}

다음 튜토리얼에서는 이미지와 아이콘 사용법을 알아보겠습니다.