Fluttor
Flutter에서 페이지 생성
청춘고양이
2024. 6. 24. 13:13
반응형
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에서 페이지를 만드는 것은 매우 간단합니다. 새로운 파일을 생성하고, 페이지 위젯을 정의한 다음, 라우팅을 설정하여 앱 내에서 페이지 간 이동을 관리할 수 있습니다. 이를 통해 복잡한 네비게이션 구조를 가진 앱을 쉽게 만들 수 있습니다.
반응형