Flutter의 안드로이드 스타일 위젯(Material Widgets) 사용법

Flutter의 안드로이드 스타일 위젯(Material Widgets) 사용법

Flutter는 Android와 iOS를 포함한 여러 플랫폼에서 실행할 수 있는 크로스플랫폼 프레임워크입니다. Material Design은 Google에서 만든 디자인 시스템으로, Android에서 기본 UI 스타일로 사용됩니다.

Flutter는 Android 스타일 UI를 구현하기 위해 Material Widgets을 제공합니다. 이를 활용하면 Flutter에서 Android 네이티브 UI와 유사한 사용자 경험을 만들 수 있습니다.

이 글에서는 Material 위젯의 개념과 주요 Material 위젯의 사용법을 설명합니다.

---

1. Material Widgets이란?

Material Widgets은 Android 스타일의 UI 요소를 제공하는 Flutter의 위젯 라이브러리입니다. Google의 Material Design 가이드라인을 기반으로 설계되었습니다.

대표적인 Material 위젯은 다음과 같습니다.

위젯	설명
AppBar	Material 스타일의 상단 네비게이션 바
ElevatedButton, TextButton, OutlinedButton	Material 스타일의 버튼
AlertDialog	Material 스타일의 다이얼로그
BottomNavigationBar	Material 스타일의 하단 탭바
Switch	Material 스타일의 토글 스위치
CircularProgressIndicator	Material 스타일의 로딩 인디케이터

이제 각 위젯을 사용하여 Android 스타일 UI를 구성하는 방법을 알아보겠습니다.

---

2. Material 네비게이션 바(AppBar)

Android에서 네비게이션 바는 AppBar 위젯을 사용하여 구현됩니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MaterialNavBarExample(),
    );
  }
}

class MaterialNavBarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Material 네비게이션 바"),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: Text("Material 스타일 UI"),
      ),
    );
  }
}

위 코드는 Material 스타일의 네비게이션 바(AppBar)를 추가하고, ThemeData를 사용하여 테마 색상을 설정합니다.

---

3. Material 버튼

Android 스타일의 버튼은 ElevatedButton, TextButton, OutlinedButton을 사용하여 구현할 수 있습니다.

import 'package:flutter/material.dart';

class MaterialButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Material 버튼 예제")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {},
              child: Text("ElevatedButton"),
            ),
            TextButton(
              onPressed: () {},
              child: Text("TextButton"),
            ),
            OutlinedButton(
              onPressed: () {},
              child: Text("OutlinedButton"),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드는 ElevatedButton(입체 버튼), TextButton(텍스트 버튼), OutlinedButton(외곽선 버튼)을 각각 생성하는 예제입니다.

---

4. Material 다이얼로그(AlertDialog)

Material 스타일의 다이얼로그는 AlertDialog를 사용하여 구현할 수 있습니다.

import 'package:flutter/material.dart';

class MaterialDialogExample extends StatelessWidget {
  void showMaterialDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text("Material 다이얼로그"),
        content: Text("이것은 Material 스타일 다이얼로그입니다."),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text("확인"),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Material 다이얼로그 예제")),
      body: Center(
        child: ElevatedButton(
          onPressed: () => showMaterialDialog(context),
          child: Text("다이얼로그 열기"),
        ),
      ),
    );
  }
}

위 코드는 Android 스타일의 다이얼로그를 표시하는 예제입니다.

---

5. Material 하단 탭바(BottomNavigationBar)

Android 스타일의 하단 탭바는 BottomNavigationBar를 사용하여 구현할 수 있습니다.

import 'package:flutter/material.dart';

class MaterialTabExample extends StatefulWidget {
  @override
  _MaterialTabExampleState createState() => _MaterialTabExampleState();
}

class _MaterialTabExampleState extends State<MaterialTabExample> {
  int _selectedIndex = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Material 탭바 예제")),
      body: Center(child: Text("현재 선택된 탭: $_selectedIndex")),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "홈"),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: "설정"),
        ],
      ),
    );
  }
}

위 코드는 Material 스타일의 하단 탭바를 구현하는 예제입니다.

---

결론

Flutter의 Material 위젯을 활용하면 Android 사용자들에게 익숙한 UI를 제공할 수 있습니다.

• AppBar: Material 스타일의 네비게이션 바
• ElevatedButton, TextButton: Material 스타일의 버튼
• AlertDialog: Material 스타일의 다이얼로그
• BottomNavigationBar: Material 스타일의 하단 탭바

이제 Material 위젯을 활용하여 더욱 Android 친화적인 Flutter 앱을 만들어 보세요!