Flutter의 웹 스타일 위젯 사용법

Flutter의 웹 스타일 위젯 사용법

Flutter는 모바일(Android, iOS)뿐만 아니라 웹(Web) 플랫폼도 지원합니다. 하지만 웹은 모바일과 UI 패턴이 다르므로, 웹 환경에 맞는 UI를 구성하는 것이 중요합니다.

Flutter의 웹 지원을 활용하면 모바일과 웹에서 동일한 코드로 실행할 수 있지만, 보다 나은 사용자 경험을 위해 웹 스타일의 위젯을 적용하는 것이 좋습니다.

이 글에서는 Flutter 웹에서 주로 사용되는 위젯과 웹 특화 UI를 구현하는 방법을 설명합니다.

---

1. Flutter의 웹 스타일 위젯이란?

Flutter의 기본 위젯은 웹에서도 사용할 수 있지만, 웹 환경에 맞춰 최적화된 위젯을 사용하는 것이 더 좋습니다.

Flutter에서 웹 스타일 UI를 구성할 때 주로 사용되는 위젯은 다음과 같습니다.

위젯	설명
NavigationRail	웹에서 많이 사용되는 사이드바 네비게이션
DataTable	웹 기반의 테이블 데이터를 표시하는 위젯
SelectableText	사용자가 텍스트를 선택할 수 있도록 지원
MouseRegion	마우스 오버 이벤트 감지
Tooltip	아이콘이나 버튼에 설명을 표시하는 툴팁
Scrollbar	웹에서 스크롤바를 명확하게 표시
UrlLauncher	웹 페이지 내에서 URL을 열 수 있도록 지원

이제 웹 UI 구현에 유용한 Flutter 위젯을 하나씩 살펴보겠습니다.

---

2. 웹 스타일의 네비게이션 (NavigationRail)

모바일에서는 하단 탭바(BottomNavigationBar)를 많이 사용하지만, 웹에서는 사이드바 네비게이션이 더 일반적입니다. Flutter에서는 NavigationRail을 사용하여 이를 구현할 수 있습니다.

import 'package:flutter/material.dart';

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

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

class WebNavigationExample extends StatefulWidget {
  @override
  _WebNavigationExampleState createState() => _WebNavigationExampleState();
}

class _WebNavigationExampleState extends State<WebNavigationExample> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          NavigationRail(
            selectedIndex: _selectedIndex,
            onDestinationSelected: (int index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            labelType: NavigationRailLabelType.all,
            destinations: [
              NavigationRailDestination(
                icon: Icon(Icons.home),
                label: Text("홈"),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.settings),
                label: Text("설정"),
              ),
            ],
          ),
          Expanded(
            child: Center(
              child: Text("선택된 페이지: $_selectedIndex"),
            ),
          ),
        ],
      ),
    );
  }
}

위 코드는 NavigationRail을 사용하여 웹 친화적인 사이드바 네비게이션을 구현한 예제입니다.

---

3. 웹에서 텍스트 선택 가능하게 만들기 (SelectableText)

모바일에서는 텍스트 선택이 일반적으로 제한되지만, 웹에서는 사용자가 텍스트를 선택할 수 있는 기능이 필요할 수 있습니다. 이를 위해 SelectableText 위젯을 사용할 수 있습니다.

import 'package:flutter/material.dart';

class SelectableTextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("웹 텍스트 선택")),
      body: Center(
        child: SelectableText(
          "이 텍스트는 선택이 가능합니다.",
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

위 코드를 실행하면 사용자가 마우스로 텍스트를 선택할 수 있습니다.

---

4. 웹에서 마우스 이벤트 감지 (MouseRegion)

웹 환경에서는 마우스 오버(hover) 이벤트를 감지하는 기능이 필요할 수 있습니다. 이를 위해 MouseRegion 위젯을 사용할 수 있습니다.

import 'package:flutter/material.dart';

class MouseHoverExample extends StatefulWidget {
  @override
  _MouseHoverExampleState createState() => _MouseHoverExampleState();
}

class _MouseHoverExampleState extends State<MouseHoverExample> {
  String _message = "마우스를 올려보세요!";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("마우스 이벤트 감지")),
      body: Center(
        child: MouseRegion(
          onEnter: (_) => setState(() => _message = "마우스가 들어왔습니다!"),
          onExit: (_) => setState(() => _message = "마우스를 밖으로 이동했습니다."),
          child: Container(
            width: 200,
            height: 100,
            color: Colors.blue,
            alignment: Alignment.center,
            child: Text(_message, style: TextStyle(color: Colors.white)),
          ),
        ),
      ),
    );
  }
}

위 코드는 마우스를 해당 영역에 올렸을 때 메시지가 변경되는 예제입니다.

---

5. 웹에서 링크 열기 (url_launcher)

웹에서 버튼을 클릭하면 특정 웹페이지로 이동하는 기능이 필요할 수 있습니다. 이를 위해 url_launcher 패키지를 사용할 수 있습니다.

flutter pub add url_launcher

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

class UrlLauncherExample extends StatelessWidget {
  final String _url = "https://flutter.dev";

  void _launchURL() async {
    if (await canLaunch(_url)) {
      await launch(_url);
    } else {
      throw "URL을 열 수 없습니다: $_url";
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("웹에서 링크 열기")),
      body: Center(
        child: ElevatedButton(
          onPressed: _launchURL,
          child: Text("Flutter 공식 사이트 방문"),
        ),
      ),
    );
  }
}

---

결론

Flutter에서 웹 스타일 UI를 구현하는 방법은 다음과 같습니다.

• NavigationRail: 웹에서 많이 사용하는 사이드바 네비게이션
• SelectableText: 사용자가 선택 가능한 텍스트 제공
• MouseRegion: 마우스 오버 이벤트 감지
• url_launcher: 웹페이지로 이동하는 기능

이제 Flutter 웹 환경에서도 최적화된 UI를 구현하여 더 나은 사용자 경험을 제공해 보세요!