[Day4] UI Layouts in Flutte 1 - Flutter for SwiftUI Developers 번역

[Day4] UI Layouts in Flutte 1 - Flutter for SwiftUI Developers 번역

 

Layouts in Flutter [1]


[요점]
1.위젯은 UI를 빌드하는 데 사용되는 클래스입니다.
2.위젯은 레이아웃과 UI 요소 모두에 사용됩니다.
3.간단한 위젯을 구성하여 복잡한 위젯을 빌드할 수 있습니다.


Flutter 레이아웃 메커니즘의 핵심은 위젯입니다. Flutter에서는 거의 모든 것이 위젯이며, 심지어 레이아웃 모델도 위젯입니다. Flutter 앱에서 볼 수 있는 이미지, 아이콘, 텍스트는 모두 위젯입니다.

하지만 눈에 보이는 위젯을 arrange(배열), constrain(제약) 및 배치를 담당하는 Row, Columns 및 grid와 같이 눈에 보이지 않는 것들도 위젯입니다.

위젯을 구성하여 레이아웃을 만들면 더 복잡한 위젯을 만들 수 있습니다.


예를 들어 아래 첫 번째 스크린샷은 3개의 아이콘과 각 아이콘 아래에 레이블이 있는 것을 보여줍니다:

다음은 이 UI의 위젯 트리 다이어그램입니다:

대부분은 예상한것 처럼 보이지만 Container(분홍색으로 표시됨)에 대해 궁금할 수 있습니다.

Container는 하위 위젯을 사용자 정의(customize)할 수 있는 위젯 클래스입니다. 패딩, 여백, 테두리, 배경색 등을 추가하고 싶을때 Container를 사용합니다.

이 예시에서는 각 텍스트 위젯을 Container에 배치하여 여백을 추가했습니다. 또한 전체 Row을 Container에 배치하여 Row 주위에 패딩을 추가합니다.

이 예제의 나머지 UI는 속성(property)으로 제어됩니다. 색상 속성을 사용하여 아이콘의 색상을 설정합니다.

Text.style 속성을 사용하여 글꼴, 색상, 굵기 등을 설정합니다. Columns과 rows에는 자식의 세로 또는 가로 정렬 방식과 자식이 차지할 공간을 지정할 수 있는 속성이 있습니다.


#Lay out a widget

Flutter에서 하나의 위젯을 어떻게 배치하나요? 이 섹션에서는 간단한 위젯을 만들고 표시하는 방법을 보여줍니다. 또한 간단한 Hello World 앱의 전체 코드도 보여줍니다.

Flutter에서는 몇 단계만 거치면 텍스트, 아이콘 또는 이미지를 화면에 표시할 수 있습니다.

1.Select a layout widget

위젯을 정렬하거나 제한하는 방식에 따라 다양한 레이아웃 위젯 중에서 선택합니다.
(일반적으로 선택된 위젯의 특성은 포함된 하위 위젯에 전달됨. )

이 예에서는 콘텐츠를 가로 및 세로로 중앙에 배치하는  Center 위젯을 사용합니다.


2. Create a visible widget

- 텍스트 위젯 만들기

Text('Hello World'),

- 이미지 위젯 만들기

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

- 아이콘위젯 만들기

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

3. Add the visible widget to the layout widget

플러터에서 모든 레이아웃 위젯(all layout widgets) 에는 아래 속성중 반드시 하나의 속성이 있습니다.

- child 속성(property) : Center 또는 Container 위젯 같이 단일 자식을 취합니다

- children 속성(property) : Row, Column, ListView, 또는 Stack과 같이 자식 위젯의 List를 취한다.

Text 위젯을 Center 위젯에 추가합니다:

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

 

4. Add the layout widget to the page

Flutter 앱은 그 자체로 위젯이며, 대부분의 위젯에는 build() 메서드가 있습니다. 앱의 build() 메서드에서 위젯을 인스턴스화하여 반환하면 위젯이 표시됩니다.


4-1.Material apps

Material app의 경우 기본 배너, 배경색을 제공하고 스낵바, 하단 시트를 추가할 수 있는 API를 제공하는 스캐폴드 위젯( Scaffold widget)을 사용할 수 있습니다.

그런 다음 home속성의  body속성에 Center 위젯을 직접 추가할 수 있습니다.

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

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

참고: 머티리얼 라이브러리는 머티리얼 디자인 원칙을 따르는 위젯을 구현합니다.
UI를 디자인할 때 표준 위젯 라이브러리의 위젯만 사용하거나 머티리얼 라이브러리의 위젯을 사용할 수 있습니다.
두 라이브러리의 위젯을 혼합하거나 기존 위젯을 사용자 지정하거나 사용자 지정 위젯 세트를 직접 만들 수 있습니다.


4-2.Non-Material apps

Material app이 아닌 앱의 경우 앱의 build() 메서드에 Center 위젯을 추가할 수 있습니다:

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

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

기본적으로 머티리얼이 아닌 앱에는 앱바, 제목 또는 배경색이 포함되지 않습니다.

머티리얼이 아닌 앱에서 이러한 기능을 사용하려면 직접 빌드해야 합니다. 이 앱은 배경색을 흰색으로 변경하고 텍스트를 짙은 회색으로 변경하여 머티리얼 앱을 모방합니다.

그게 다입니다! 앱을 실행하면 Hello World가 표시됩니다.

머티리얼앱
https://github.com/flutter/website/tree/main/examples/layout/base

논 머티리얼앱
https://github.com/flutter/website/tree/main/examples/layout/non_material

 

 

글 출처

https://docs.flutter.dev/ui/layout