[flutter] 플러터 Row 위젯을 이용한 네비게이션 바 만들기

07 Dec 2023

flutter

플러터는 크로스 플랫폼 앱 개발을 위한 프레임워크로, 강력한 UI에 초점을 맞추고 있습니다. 이번 포스트에서는 플러터의 Row 위젯을 이용하여 간단한 네비게이션 바를 만들어보겠습니다.

필요한 패키지 가져오기

프로젝트를 시작하기 전에, 다음 패키지가 필요합니다:

import 'package:flutter/material.dart';

네비게이션 바 위젯 만들기

플러터에서 네비게이션 바를 만들기 위해서는 Row 위젯을 사용할 수 있습니다. Row 위젯은 가로로 정렬된 위젯들을 담을 수 있으며, 네비게이션 바의 각 항목을 가로로 배치하기에 적합합니다.

class NavigationBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          FlatButton(
            child: Text(
              '홈',
              style: TextStyle(
                fontWeight: FontWeight.bold,
              ),
            ),
            onPressed: () {
              // 홈 버튼을 클릭했을 때의 동작
            },
          ),
          FlatButton(
            child: Text(
              '프로필',
              style: TextStyle(
                fontWeight: FontWeight.bold,
              ),
            ),
            onPressed: () {
              // 프로필 버튼을 클릭했을 때의 동작
            },
          ),
          FlatButton(
            child: Text(
              '설정',
              style: TextStyle(
                fontWeight: FontWeight.bold,
              ),
            ),
            onPressed: () {
              // 설정 버튼을 클릭했을 때의 동작
            },
          ),
        ],
      ),
    );
  }
}

위 코드에서는 Row 위젯을 사용하여 홈, 프로필, 설정 세 개의 버튼을 네비게이션 바에 배치합니다. 버튼을 클릭했을 때 실행될 동작은 onPressed 콜백 함수에 정의할 수 있습니다.

사용하기

만든 네비게이션 바를 사용하기 위해서는 해당 위젯을 화면에 배치해야 합니다. 예를 들어, Scaffold 위젯의 bottomNavigationBar 옵션에 넣을 수 있습니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('네비게이션 바 예제'),
        ),
        body: Center(
          child: Text('본문'),
        ),
        bottomNavigationBar: NavigationBar(),
      ),
    );
  }
}

위 코드에서는 MaterialApp 안에 Scaffold를 사용하여 앱의 구조를 정의하고, Scaffold의 bottomNavigationBar 옵션에 NavigationBar 위젯을 넣어 네비게이션 바를 생성합니다.

결론

이번 포스트에서는 플러터의 Row 위젯을 이용하여 간단한 네비게이션 바를 만들어보았습니다. Row 위젯을 활용하여 가로로 정렬된 위젯들을 배치할 수 있으며, 네비게이션 바를 구현하는 데에 유용하게 활용할 수 있습니다.