[Flutter] Basic Widget 기본 개념 (디자인)

1. 디자인 관련 위젯

디자인 관련 위젯은 배경을 추가하거나 간격을 추가하거나 패딩을 추가하는 등 디자인적 요소를 적용할 때 사용함

---

1-1. `Container`위젯

• 말 그대로 다른 위젯을 담는데 사용
• 위젯의 높이와 너비를 지정하거나, 배경이나 테두리를 추가할 때 많이 사용
• 다른 위젯처럼 `child`파라미터 사용 가능

import 'package:flutter/material.dart';

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

// 디자인 관련 위젯
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            // 스타일 적용
            decoration: BoxDecoration(
              // 배경색 적용
              color: Colors.red,
              border: Border.all(
                width: 16.0,
                color: Colors.black,
              ),
              borderRadius: BorderRadius.circular(
                16.0,
              ),
            ),
            height: 200.0,
            width: 100.0,
          )
        ),
      ),
    );
  }
}

처음엔 전체코드를 보고 다음엔 또 수정한 코드만 보겠음

Container 위젯

 

---

1-2. `SizedBox`위젯

`SizedBox`위젯은 일반적으로 일정 크기의 공간을 공백으로 두고 싶을 때 사용됨

`Container`위젯을 사용해도 공백을 만들 수 있지만, `SizedBox`는 `const`생성자를 사용했을 때 퍼포먼스에서 이점을 얻을 수 있음.

SizedBox(
 height: 200.0,
 width: 200.0,
  
 child: Container(
  color: Colors.red,
 ),
)

SizedBox 위젯

---

1-3. `Padding`위젯

`Padding`위젯은 `child`위젯에 여백을 제공할 때 사용함. `Padding`위젯을 사용하면 `Padding`위젯의 상위 위젯과 하위 위젯 사이에 여백을 둘 수 있음.

• `Padding`위젯의 `padding`파라미터는 `EdgeInsets`라는 값을 입력해야함.
• `child`파라미터에 `Padding`을 적용하고 싶은 위젯을 입력할 수 있음.

Container(
 color: Colors.blue,
 child: Padding(
  padding: EdgeInsets.all(
    16.0,
  ),
   child: Container(
    color: Colors.red,
    width: 50.0,
    height: 50.0,
   ),
 ),
)

Padding 위젯

패딩은 적용된 위젯이 차지하는 크기 내부에서 간격이 추가됨.

---

1-4. `SafeArea`위젯

`SafeArea`위젯을 사용하면 기기별로 예외 처리를 하지않고 안전한 화면에서만 위젯을 그릴 수 있음.

SafeArea(
 top: true,
 bottom: true,
 left: true,
 right: true,
 child: Container(
  color: Colors.red,
  height: 300.0,
  width: 300.0,
 ),
)

위 코드처럼 작성하면됨. 단, 현재는 `body: Center`로 설정되서 가운데 정렬이 되어있음 이부분을 지워야만 `SafeArea`의 역할을 제대로 확인 할 수 있을 것임.

SafeArea 위젯

이런식으로 ㅇㅇ

body: SafeArea(
 // 원하는 부위만 따로 적용 가능
 top: true,
 bottom: true,
 left: true,
 right: true,
 child: Container(
  color: Colors.red,
  height: 300.0,
  width: 300.0,
 ),
),

---

https://github.com/Leedoseo/Flutter_WidgetStudy

GitHub - Leedoseo/Flutter_WidgetStudy

 

 

출처 : 코드 팩토리의 플러터 프로그래밍