[Flutter] 7. Flutter의 "내비게이션 및 라우팅"

Flutter 학습: 내비게이션 및 라우팅

Flutter에서는 다양한 방법으로 화면 간 내비게이션을 구현할 수 있습니다. 이번 글에서는 기본 내비게이션, 명명된 라우트, 그리고 탭 내비게이션에 대해 알아보겠습니다.

---

1. 기본 내비게이션: Navigator, push, pop

Flutter에서 화면 간 이동은 Navigator 위젯을 사용하여 구현할 수 있습니다. Navigator는 화면의 스택을 관리하며, push와 pop 메서드를 사용하여 화면을 추가하거나 제거할 수 있습니다.

 

기본 내비게이션 구현:

1. 첫 번째 화면:

[dart]

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FirstScreen(),
    );
  }
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Back to First Screen'),
        ),
      ),
    );
  }
}

 

위의 예제에서 FirstScreen에서 버튼을 눌러 SecondScreen으로 이동하고, SecondScreen에서 버튼을 눌러 이전 화면으로 돌아옵니다. Navigator.push 메서드는 새로운 화면을 스택에 추가하고, Navigator.pop 메서드는 현재 화면을 스택에서 제거합니다.

---

2. 명명된 라우트: named routes 설정 및 사용

명명된 라우트는 라우트 이름을 사용하여 화면 간 이동을 구현하는 방법입니다. 이를 통해 내비게이션을 더욱 체계적으로 관리할 수 있습니다.

 

명명된 라우트 설정 및 사용:

1. main.dart 파일 수정:

[dart]

import 'package:flutter/material.dart';

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

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

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

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Back to First Screen'),
        ),
      ),
    );
  }
}

 

위의 예제에서 MaterialApp의 routes 매핑을 사용하여 명명된 라우트를 설정합니다. Navigator.pushNamed 메서드를 사용하여 명명된 라우트로 이동할 수 있습니다.

---

3. 탭 내비게이션: BottomNavigationBar, TabBar, TabBarView

탭 내비게이션을 사용하면 한 화면에서 여러 화면 간에 쉽게 전환할 수 있습니다. Flutter에서는 BottomNavigationBar, TabBar, TabBarView 위젯을 사용하여 탭 내비게이션을 구현할 수 있습니다.

 

BottomNavigationBar:

1. BottomNavigationBar 사용:

[dart]

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BottomNavScreen(),
    );
  }
}

class BottomNavScreen extends StatefulWidget {
  @override
  _BottomNavScreenState createState() => _BottomNavScreenState();
}

class _BottomNavScreenState extends State<BottomNavScreen> {
  int _selectedIndex = 0;

  static List<Widget> _widgetOptions = <Widget>[
    Text('Home Page'),
    Text('Search Page'),
    Text('Profile Page'),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar Example'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

 

위의 예제에서 BottomNavigationBar는 하단에 위치하며, 아이콘과 텍스트를 사용하여 탭을 정의합니다. _onItemTapped 메서드를 사용하여 탭을 전환할 때 상태를 업데이트합니다.

 

 

TabBar 및 TabBarView:

1. TabBar와 TabBarView 사용:

[dart]

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TabBarScreen(),
    );
  }
}

class TabBarScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('TabBar Example'),
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.home), text: 'Home'),
              Tab(icon: Icon(Icons.search), text: 'Search'),
              Tab(icon: Icon(Icons.person), text: 'Profile'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Center(child: Text('Home Page')),
            Center(child: Text('Search Page')),
            Center(child: Text('Profile Page')),
          ],
        ),
      ),
    );
  }
}

 

위의 예제에서 DefaultTabController를 사용하여 탭을 관리합니다. AppBar의 bottom 속성에 TabBar를 추가하고, body 속성에 TabBarView를 추가하여 탭과 화면을 연결합니다.

---

이 글에서는 Flutter의 내비게이션 및 라우팅에 대해 알아보았습니다. 기본 내비게이션을 위해 Navigator, push, pop 메서드를 사용하고, 명명된 라우트를 사용하여 내비게이션을 체계적으로 관리하며, BottomNavigationBar와 TabBar를 사용하여 탭 내비게이션을 구현할 수 있습니다. 이러한 기술을 활용하여 복잡한 내비게이션 구조를 가진 애플리케이션을 쉽게 개발할 수 있습니다. Happy Coding!