Flutter에서 페이지 생성

Flutter는 모바일 앱 개발을 위한 강력한 프레임워크로, 쉽게 페이지를 만들고 관리할 수 있습니다. 이 글에서는 Flutter에서 새로운 페이지를 만들고, 이를 앱에 통합하는 방법을 단계별로 설명하겠습니다.

1. 새로운 파일 생성

먼저, 새로운 Dart 파일을 생성합니다. 이 파일은 새로 만들 페이지의 내용을 정의하는 데 사용됩니다. 예를 들어, example_page.dart라는 파일을 생성할 수 있습니다.

// example_page.dart

import 'package:flutter/material.dart';

class ExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Example Page'),
      ),
      body: Center(
        child: Text(
          'This is an example page!',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
    );
  }
}

2. 위젯 생성

새로운 파일에서 StatelessWidget 또는 StatefulWidget을 상속하여 페이지를 표현하는 위젯을 생성합니다. 위의 예제에서는 StatelessWidget을 사용하여 간단한 페이지를 만들었습니다.

• Scaffold: Flutter 앱의 기본 레이아웃 구조를 제공하는 위젯입니다.
• AppBar: 페이지 상단의 앱 바를 생성합니다.
• Center: 자식 위젯을 중앙에 배치합니다.
• Text: 간단한 텍스트를 표시합니다.

3. 라우팅 설정

이제 새로 만든 페이지를 앱의 라우터에 등록하여 앱 내에서 해당 페이지로 이동할 수 있도록 설정합니다. MaterialApp 위젯의 routes 속성에 페이지 경로와 해당 페이지 위젯을 매핑합니다.

// main.dart

import 'package:flutter/material.dart';
import 'example_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      routes: {
        '/example': (context) => ExamplePage(),
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/example');
          },
          child: Text('Go to Example Page'),
        ),
      ),
    );
  }
}

4. 앱 내비게이션

사용자가 앱 내에서 페이지를 이동할 수 있도록 버튼이나 다른 사용자 입력을 처리하여 페이지 간의 전환을 관리합니다. 위의 예제에서는 버튼을 눌렀을 때 Navigator.pushNamed 메서드를 사용하여 새로운 페이지로 이동하도록 설정했습니다.

ElevatedButton(
  onPressed: () {
    Navigator.pushNamed(context, '/example');
  },
  child: Text('Go to Example Page'),
);

결론

Flutter에서 페이지를 만드는 것은 매우 간단합니다. 새로운 파일을 생성하고, 페이지 위젯을 정의한 다음, 라우팅을 설정하여 앱 내에서 페이지 간 이동을 관리할 수 있습니다. 이를 통해 복잡한 네비게이션 구조를 가진 앱을 쉽게 만들 수 있습니다.