[Flutter] 4주차 스터디_UI 구성하기

1. widget

1 ) Scaffold widget

Flutter의 Scaffold 위젯은 앱의 기본 구조와 레이아웃을 정의하는 데 사용된다. Scaffold는 Flutter 앱에서 화면의 기본 골격을 제공하여, 앱 바(AppBar), 바닥 내비게이션(Bottom Navigation), 플로팅 액션 버튼(Floating Action Button), 드로어(Drawer) 등의 일반적인 UI 요소를 쉽게 추가할 수 있게한다. 또한, Scaffold는 앱의 다양한 위젯과 레이아웃을 통합하는 컨테이너 역할을 한다. 

Scaffold(
  appBar: AppBar(
    title: Text('Scaffold Example'),
  ),
  body: Center(
    child: Text('Hello, Scaffold!'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  drawer: Drawer(
    child: ListView(
      children: <Widget>[
        DrawerHeader(
          child: Text('Drawer Header'),
        ),
        ListTile(
          title: Text('Item 1'),
          onTap: () {},
        ),
      ],
    ),
  ),
);

 

 2)  Header의 구성 - 레이아웃 위젯

Column

Column은 자식 위젯들을 수직으로 나열한다. 즉, 화면의 위쪽에서 아래쪽으로 위젯을 쌓는 방식이다. 일반적으로 수직 방향으로 여러 개의 위젯을 배치할 때 사용되된다. (일반적으로 수직 방향으로 구현하는 application이 많으므로 레이아웃을 처음 구성할때 Column을 사용하게 된다.)

주요 속성

• mainAxisAlignment: 주 축이 수직 방향이기 때문에, 정렬 방향은 수직을 기준으로 한다.
• crossAxisAlignment:주 축이 수직 방향이기 때문에, 정렬되는 방향은 cross되는 수평방향이다.

Row

Row는 자식 위젯들을 수평으로 나열한다. 즉, 화면의 왼쪽에서 오른쪽으로 위젯을 배치하는 방식이다. 가로 방향으로 여러 개의 위젯을 배치할 때 사용한다.

적용 예시) *row도 아래와 동일한 코드로 작성할 수 있다. 

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
);

Row( mainAxisAlignment: MainAxisAlignment.end) 

→ 자식 위젯들을 수평축(가로 방향)의 끝에 정렬하는 방식을 적용한 예시 

 

[요약]

• Row의 MainaxisAlignment : 수평방향
  • Row의 CrossAxis: 세로방향
• Column의 MainaxisAlignment : 수직방향
  • Column의 CrossAxis: 가로방향

 

3)  SizedBox (빈 공간 생성)

SizedBox 위젯은 Flutter에서 고정된 크기의 상자를 생성하는 데 사용된다. 이 위젯은 주로 특정 크기의 공간을 만들거나 위젯의 크기를 제한하고자 할 때 사용된다. SizedBox는 가로와 세로 크기를 지정할 수 있으며, 이를 통해 위젯 간의 여백을 만들거나 레이아웃을 조정하는 데 유용하다.

주요 속성

• width: SizedBox의 가로 크기를 지정 /  null로 설정하면 부모 위젯의 가로 크기를 따른다.
• height: SizedBox의 세로 크기를 지정 / null로 설정하면 부모 위젯의 세로 크기를 따른다.
• child: SizedBox 내부에 들어갈 자식 위젯을 지정 가능 / *자식 위젯이 없는 경우, SizedBox는 단순히 크기만을 가진 빈 상자가 된다.

SizedBox(
  height: 20.0, // 세로 방향으로 20픽셀의 빈 공간을 만듭니다.
);

 

기타 _ color 표현 방법

• hexcode : backgroundcolor(Color(0xff181818))
• RGB :ColorfromRGBO(R, G, B, Opacity)

 

4 ) ‘escaping the $'

위와 같은 UI를 구성할 때, text('$ 5 194 382')로 입력하면 될까?

dart 언어에서는 ‘$변수명’을 구문으로 사용하기 때문에 escaping이 필요하다. 

• ’\$5 194 482'  달러 표시 앞에 역슬래시(\) 기호를 넣어주면 ‘따옴표 안의 모든 문자가 문자열로 인식 된다.

 

 

2. Developers Tools

1. "디버깅 중(Debugging in Progress)" 우측 상단의 메뉴바의 돋보기를 클릭하면 widget Tree를 볼 수 있다.
2. Widget Tree의 우측 상단에 위치한 다음과 같은 아이콘을 클릭하면 구성한 UI의 가이드 라인을 확인할 수 있다.

 

 

3. VScode Settings

vscode에서 파란줄이 뜨는 이유

파란줄에 마우스 호버하면 경고문이 뜬다. 

 내용은  “constant constructors는 const를 사용하는 것을 추천 한다. “ 와 같다. Dart언어는 Constant(상수) 개념을 지원한다. 메모리 자원의 효율성을 위해 const 타입을 명시하도록 유도하는 일종의 경고문인 셈이다.  

하지만 일일이 파란 줄의 경고문을 모두 const로 바꿔주기에는 시간적 제약과 const와 var타입의 구분의 어려움이 따른다. 따라서 vscode의 command palette > preferences: Open User Settings(JSON)을 열어 다음과 같이 입력하면 파란줄의 경고문이 더이상 뜨지 않는다. 

 

코드에 가이드라인 추가하기

여러가지 위젯을 사용하다보면 위젯을 감싸는 괄호의 끝과 끝이 어딘지 모호할 때가 많다. 위의 이미지와 같이 가이드라인을 추가하면 가독성이 좋아진다. 

 

 

"editor.codeActionsOnSave": {
        "source.fixAll": true
    },
-> Vscode에서 자체적으로 const를 생성해준다. (파란줄 삭제)

   "dart.previewFlutterUiGuides": true, (코드의 가이드라인 추가)

 

위젯을 구성하였는데 상위 위젯으로 포함시키고 싶은 경우

위젯을 생성하다 보면 가끔 Padding이나 다른 위젯으로 감싸야 할 때가 있다. 이런 상황에서 괄호의 끝과 끝을 찾는 것은 번거로운 일이다. 이때 VSCode에서는 위젯을 클릭한 후 노란 전구 아이콘을 클릭하고, 리본 메뉴에서 'Wrap with ~'을 선택하면 자동으로 해당 위젯으로 감싸준다.

 

 

 

4. 리팩토링

main.dart에서 하드코딩한 코드를 기반으로 위젯 클래스 만들기button

1.  프로퍼티 선언

final String text;
final Color bgcolor;
final Color textColor;

 

2. 생성자

const Button({
  super.key,
  required this.text,
  required this.bgcolor,
  required this.textColor,
});

생성자는 Button을 만들 때 필요한 매개변수를 받는다.

→ super.key를 사용하여 Flutter에서 자동으로 관리하는 key를 부모 StatelessWidget에 전달

 

3. body

@override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: bgcolor, //매개변수로 받을 값
        borderRadius: BorderRadius.circular(45),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(
          vertical: 15,
          horizontal: 40,
        ),
        child: Text(
          text, //매개변수로 받을 값
          style: TextStyle(
            fontSize: 18,
            color: textColor, //매개변수로 받을 값
          ),
        ),
      ),
    );
  }

**주의: 매개변수로 받을값을 const 타입으로 선언하게 되면 오류가 발생한다. 

 

 

 

 

 

 

---

참고

Flutter 로 웹툰 앱 만들기 – 노마드 코더 Nomad Coders