# 페이지 작성

## Widget 

Flutter에서 UI는 위젯(Widgets)으로 구성됩니다. 모든 것이 위젯이며, 이 위젯들을 조합하여 화면을 작성합니다. 화면 전환 및 페이지 작성에 필요한 위젯에 대해 이해하는 것이 중요합니다.

일반적으로, 다음과 같은 위젯이 페이지 작성에 사용됩니다

* **Scaffold**: 기본 레이아웃을 제공하며, AppBar 및 기본 배경색과 같은 기본 구성 요소를 제공합니다.
* **AppBar**: 앱 상단에 표시되는 타이틀 바 또는 액션을 설정합니다.
* **Body**: 화면의 본문 내용을 나타내는 부분입니다. 주로 ListView, Column, 또는 Container와 같은 위젯을 사용하여 구성합니다.
* **Navigator**: 화면 전환을 관리하기 위한 위젯으로, 다른 페이지로 이동하거나 이전 페이지로 돌아가는 데 사용됩니다.

## 페이지 작성 단계

### 1. MaterialApp 생성

Flutter 앱의 진입점에서 `MaterialApp`을 생성합니다. 이 위젯은 기본 MaterialApp 설정을 제공하며, 앱의 테마 및 라우팅을 관리합니다.

```dart
void main() {
  runApp(
    MaterialApp(
      home: MyHomePage(), // 앱의 첫 페이지 설정
    ),
  );
}
```

### 2. 페이지 클래스 작성

각 페이지는 Dart 클래스로 작성됩니다. 아래는 간단한 페이지 클래스의 예제입니다.

```dart
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('내 페이지'),
      ),
      body: Center(
        child: Text('안녕하세요, Flutter 페이지!'),
      ),
    );
  }
}
```

### 3. 페이지 라우팅

다른 페이지로 이동하기 위해 `Navigator`를 사용합니다. 아래는 버튼을 클릭하면 다른 페이지로 이동하는 간단한 예제입니다.

```dart
ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SecondPage()),
    );
  },
  child: Text('두 번째 페이지로 이동'),
)
```

### 4. 다른 페이지 작성

두 번째 페이지를 위한 클래스를 작성하고 이동할 때 해당 클래스를 호출합니다.

```dart
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('두 번째 페이지'),
      ),
      body: Center(
        child: Text('두 번째 페이지입니다.'),
      ),
    );
  }
}
```

Flutter를 사용하여 페이지를 작성하고 관리하는 것은 간단하고 유연한 프로세스입니다. 위젯을 효과적으로 조합하고 페이지 간 전환을 관리하여 앱의 사용자 경험을 향상시킬 수 있습니다. 페이지 작성은 Flutter 앱 개발의 기초 중 하나이며, 이를 마스터하면 다양한 화면 및 기능을 구축하는데 도움이 됩니다.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.aliothx.net/start/flutter/code/undefined-3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.