플러터 강좌

7.2 앱 페이지 기본 구조 만들기

플러터는 현대적인 UI 프레임워크로서, 멋진 앱을 개발하는 데 필요한 다양한 도구와 라이브러리를 제공합니다. 이번 강좌에서는 플러터로 앱 페이지의 기본 구조를 만드는 방법에 대해 자세히 설명하겠습니다. 강좌는 다음과 같은 단계로 진행됩니다:

플러터 설치 및 설정
새 프로젝트 생성
기본적인 페이지 구조 설계
상태 관리 기초 이해
간단한 UI 컴포넌트 추가

1. 플러터 설치 및 설정

플러터를 설치하기 전에, 먼저 개발 환경을 마련해야 합니다. 다음은 플러터를 설치하기 위한 기본 단계입니다:

플러터 SDK 다운로드: Flutter Install Guide
Flutter SDK를 원하는 디렉토리에 압축 해제하고, 해당 경로를 시스템 PATH에 추가합니다.
IDE 설치: Visual Studio Code 또는 Android Studio를 설치합니다.
플러터와 Dart 플러그인을 설치합니다.
프로젝트의 요구 사양에 맞게 Android 또는 iOS 개발 환경을 설정합니다.

2. 새 프로젝트 생성

플러터 SDK가 설치되었다면, 다음으로 새로운 플러터 프로젝트를 생성합니다. 터미널에서 다음 명령어를 실행해 보세요:

flutter create my_app

이 명령어는 ‘my_app’이라는 이름의 새로운 프로젝트를 생성합니다. 프로젝트 디렉토리로 이동하여:

cd my_app

이제 프로젝트를 열어보겠습니다. IDE에서 lib/main.dart 파일을 찾아 열어주세요. 기본적으로 생성된 코드를 보게 될 텐데, 이것이 우리의 기본 앱 구조입니다.

3. 기본적인 페이지 구조 설계

이제 기본적인 앱 페이지 구조를 설계하겠습니다. 우리의 목표는 간단한 UI를 가지고 기본 레이아웃을 설정하는 것입니다. 이를 위해 StatelessWidget 클래스를 사용하여 기본 페이지를 구성할 것입니다.

import 'package:flutter/material.dart';

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

    class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            return MaterialApp(
                title: '플러터 기본 구조',
                theme: ThemeData(
                    primarySwatch: Colors.blue,
                ),
                home: HomePage(),
            );
        }
    }

    class HomePage extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
            return Scaffold(
                appBar: AppBar(
                    title: Text('홈'),
                ),
                body: Center(
                    child: Text(
                        '환영합니다!',
                        style: TextStyle(fontSize: 24),
                    ),
                ),
            );
        }
    }

위 코드는 간단한 플러터 앱을 생성합니다. 여기서 주요 구성 요소는 다음과 같습니다:

MaterialApp: 앱의 루트 위젯으로서, 기본적인 앱 구성을 담당합니다.
Scaffold: 앱의 기본 구조를 구성하는 속성(앱바, 본문, 플로팅 액션 버튼 등)을 제공하는 위젯입니다.
Text: 화면에 문자열을 표시하는 위젯입니다.

4. 상태 관리 기초 이해

앱의 상태 관리란 사용자 인터랙션이나 네트워크 요청 등으로 인해 변할 수 있는 데이터를 관리하는 프로세스입니다. 플러터는 상태 관리에 대한 다양한 접근 방식을 제공합니다. 가장 기본적인 방법은 StatefulWidget을 이용하는 것입니다.

class HomePage extends StatefulWidget {
        @override
        _HomePageState createState() => _HomePageState();
    }

    class _HomePageState extends State {
        int _counter = 0;

        void _incrementCounter() {
            setState(() {
                _counter++;
            });
        }

        @override
        Widget build(BuildContext context) {
            return Scaffold(
                appBar: AppBar(
                    title: Text('홈'),
                ),
                body: Center(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                            Text(
                                '버튼이 눌린 횟수:',
                            ),
                            Text(
                                '$_counter',
                                style: Theme.of(context).textTheme.headline4,
                            ),
                        ],
                    ),
                ),
                floatingActionButton: FloatingActionButton(
                    onPressed: _incrementCounter,
                    tooltip: 'Increment',
                    child: Icon(Icons.add),
                ),
            );
        }
    }

위의 코드는 버튼을 눌렀을 때 카운터가 증가하는 기본적인 상태 관리 예시입니다. 여기서는 setState 메서드를 사용하여 상태를 업데이트합니다.

5. 간단한 UI 컴포넌트 추가

이제 몇 가지 UI 컴포넌트를 추가하여 앱을 더 풍성하게 만들어 보겠습니다. 예를 들어 버튼, 이미지, 리스트 등을 추가할 수 있습니다. 아래는 추가적인 UI 컴포넌트를 포함한 예시 코드입니다:

class HomePage extends StatefulWidget {
        @override
        _HomePageState createState() => _HomePageState();
    }

    class _HomePageState extends State {
        @override
        Widget build(BuildContext context) {
            return Scaffold(
                appBar: AppBar(
                    title: Text('홈'),
                ),
                body: Center(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                            Image.network(
                              'https://example.com/image.png',
                              height: 100,
                              width: 100,
                            ),
                            SizedBox(height: 20),
                            ElevatedButton(
                                onPressed: () {
                                    // 버튼 클릭 시 실행될 코드
                                },
                                child: Text('버튼 클릭하기'),
                            ),
                        ],
                    ),
                ),
            );
        }
    }

이 코드에서 Image.network 위젯을 사용하여 이미지를 가져오고, ElevatedButton을 사용하여 버튼을 추가했습니다. 각 UI 요소들의 디자인과 배치는 플러터의 Column 레이아웃 위젯을 통해 관리됩니다.

결론

이번 강좌를 통해 플러터로 기본 앱 페이지 구조를 만드는 방법을 배웠습니다. 플러터는 강력한 UI 도구를 제공하며, 이를 통해 다양한 앱을 신속하게 개발할 수 있습니다. 계속해서 더 복잡한 레이아웃과 상태 관리를 배우면서 여러분의 플러터 개발 실력을 향상시키길 바랍니다. 다음 강좌에서는 네비게이션과 라우팅에 대해 다루겠습니다.