[flutter] RaisedButton을 네비게이션 창에 추가하는 방법

07 Dec 2023

flutter

네비게이션 창에 RaisedButtons을 추가하는 것은 Flutter 애플리케이션에서 사용자가 특정 작업을 수행할 수 있는 버튼을 제공하는 방법입니다. RaisedButtons은 사용자가 터치하면 반응하는 시각적인 버튼입니다.

아래는 네비게이션 창에 RaisedButton을 추가하는 방법을 안내하는 예제 코드입니다.

1. MaterialApp 생성

RaisedButton을 추가하기 전에 MaterialApp 위젯을 생성해야 합니다. MaterialApp은 Flutter 애플리케이션의 루트 위젯입니다. MaterialApp은 필수적인 설정을 포함하고 있으며, 여기서는 화면의 제목을 설정하는 예제입니다.

void main() {
  runApp(MaterialApp(
    title: "Navigation with RaisedButton",
    home: MyApp(),
  ));
}

2. 네비게이션 바 생성

RaisedButton을 추가할 화면에 Scaffold 위젯을 사용하면 편리합니다. Scaffold 위젯은 네비게이션 바와 같은 애플리케이션의 구조적 요소를 간단하게 생성할 수 있습니다. 아래 예제에서는 네비게이션 바를 생성합니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Navigation with RaisedButton"),
      ),
      body: Container(
        // 여기에 RaisedButton을 추가할 수 있습니다.
      ),
    );
  }
}

3. RaisedButton 추가

네비게이션 바 아래에 RaisedButton을 추가할 수 있습니다. 아래의 예제 코드에서는 RaisedButton을 클릭하면 “Button Clicked!”라는 메시지를 출력합니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Navigation with RaisedButton"),
      ),
      body: Container(
        child: RaisedButton(
          onPressed: () {
            print("Button Clicked!");
          },
          child: Text("Click Me!"),
        ),
      ),
    );
  }
}

결론

이제 RaisedButtton이 있는 네비게이션 창을 구성하는 방법을 배웠습니다. Flutter의 RaisedButton은 사용자와 상호작용할 수 있는 시각적인 버튼을 제공합니다. 이를 통해 사용자는 버튼을 터치하여 특정 작업을 수행할 수 있습니다.

더 많은 기능과 옵션을 사용하고자 한다면 Flutter 공식 문서를 참조하세요.