Flutter Layout #1

본 글은 아래 링크를 참고 및 번역 하여 작성하였습니다.

Layouts in Flutter

Learn how Flutter's layout mechanism works and how to build a layout.

flutter.dev

Flutter의 레아아웃 메커니즘은 위젯입니다.

Flutter에서는 모든것이 위젯이며, 레이아웃 모델도 위젯입니다.

앱에서 볼 수 있는 이미지, 아이콘, 텍스트 등 뿐만아니라 잘 보이지 않는 행, 열, 그리드( 보이는 위젯들을 정렬하는)

같은 정보들도 모두 위젯입니다.

더 복잡한 위젯을 작성하기 위해 위젯을 구성하여 레이아웃을 생성해보겠습니다

위의 이미지는 어떤 구조로 이루어져 있을까요?

예상한 대로 나왔겠지만, 붉은 색으로 칠해진 Container는 무엇일까요?

Container는 하위 위젯을 사용자 정의 할 수 있는 클래스입니다.

이 Container로 padding, margin, border, background-color를 추가할 수 있습니다.

상단의 예제에서 Container 는 여백 추가를 위해 배치 되었고, Row는 Container 주위에 padding을 추가하기 위해 배치됩니다 .

이 예제에서 나머지 속성들은 모두 UI 속성으로 제어됩니다. Icon의 색상을 바꾼다던지,

Text.style 로 글꼴, 색상, 무게 등을 설정할 수 있습니다.

각 Colunmn 과 Row에는 하위 위젯들을 가로 혹은 세로로 정렬할 수 있는 속성과

해당 위젯이 차지하는 공간을 지정 할 수있는 속성이 있습니다.

위젯 배치

싱글 위젯을 배치하려면 Flutter는 어떻게 해야할까요?

Flutter에서는 간단한 몇단계만 거치면 됩니다.

2. 표시되는 위젯 생성

Text 위젯은

Text("Hello World!")

Image 위젯은

Image.asset(
  'images/lake.jpg',
  fit: BoxFit.cover,
),

Icon 위젯은

Icon(
  Icons.star,
  color: Colors.red[500],
),

이처럼 생성합니다.

3. 표시되는 위젯을 레이아웃 위젯에 추가

모든 레이아웃 위젯에는 다음 중 하나를 따릅니다.

단일 위젯을 가져오는 경우, child 속성을 사용합니다 - Center, Container
위젯 리스트들을 가져오는 경우, children 속성을 사용합니다 - Row, Column, ListView, Stack

Text 위젯에 Center 위젯을 추가하면,

Center(
  child: Text('Hello World'),
),

4. 페이지에 레이아웃 위젯 추가

Flutter 앱은 그 자체가 위젯입니다. 그리고 대부분의 위젯들은 build() 메소드를 가지고 있습니다.

앱 빌드로 위젯을 인스턴스화 하고 반환하면, 화면에 위젯이 보여집니다

Material Apps

구글 기본 디자인인 Material design을 사용하려면, Scaffold 위젯을 사용합니다.

이 위젯은 기본 배너, 배경색 뿐만아니라 drawer, snack bar, bottom sheets 들을 추가하는 API를 가지고있습니다.

이제 home page의 body 속성에 Center 위젯을 추가할 수 있습니다

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter layout demo'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Non-Material apps

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.white),
      child: Center(
        child: Text(
          'Hello World',
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 32,
            color: Colors.black87,
          ),
        ),
      ),
    );
  }
}

Material design을 사용하지 않아도, build() 메소드에 Center 위젯을 추가할 수 있습니다.

기본적으로, Non-Material app에는 AppBar, title, 배경색이 포함되어 있지 않습니다.

이 앱에서 이 기능들을 사용하려면 직접 구축해야합니다.

위 예제는 배경을 흰색으로, 텍스트는 짙은 회색으로 변경하여, 위 Material 앱을 따라했습니다.

이제 앱에서는 Hello World! 가 보일겁니다!

Resten