[flutter] RaisedButton으로 다른 페이지 또는 화면으로 이동

07 Dec 2023

flutter

Flutter는 Google에서 개발한 모바일 앱 개발 프레임워크로, 플랫폼 간(안드로이드 및 iOS) 앱을 개발하는 데 사용됩니다. RaisedButton은 Flutter에서 버튼 위젯을 생성하는 데 사용되며, 다른 페이지 또는 화면으로 이동하는 기능을 구현하기에 적합합니다.

다른 페이지로 이동하기 위해서는 MaterialApp 위젯을 사용하여 앱 전체에서 라우팅을 관리해야 합니다.

아래는 RaisedButton을 사용하여 다른 페이지로 이동하는 예제입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      routes: {
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter RaisedButton'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

위의 코드에서는 routes 매개변수를 사용하여 페이지 경로를 설정합니다. ‘/second’ 경로는 두 번째 페이지(SecondPage)를 가리키도록 지정되어 있습니다.

RaisedButton의 onPressed 속성은 버튼이 클릭된 경우 실행될 코드를 작성하는 곳입니다. 여기서 Navigator.pushNamed(context, '/second') 코드는 ‘/second’ 경로로 이동하는 명령을 수행합니다.

이제 RaisedButton을 터치하면 앱은 두 번째 페이지로 이동합니다. 이렇게 간단한 방법으로 Flutter에서 RaisedButton을 사용하여 다른 페이지나 화면으로 이동하는 것이 가능합니다.

더 자세한 내용은 Flutter 공식 문서를 참조하시기 바랍니다.