Flutter UI 디자인 패턴

Flutter는 직관적이고 강력한 UI 구성 도구를 제공하며, 이를 활용해 다양한 디자인 패턴을 구현할 수 있습니다.
이 글에서는 Flutter에서 자주 사용되는 UI 디자인 패턴과 구현 예제를 소개합니다.

---

1. Material Design

1.1 Material Design 개요

Material Design은 Google이 정의한 디자인 언어로, Flutter는 이를 기본적으로 지원합니다. Flutter의 Material 위젯은 Material Design 스타일의 앱을 쉽게 구축할 수 있도록 도와줍니다.

1.2 주요 위젯

• Scaffold: 화면 레이아웃의 기본 구조를 제공.
• AppBar: 화면 상단의 앱바.
• FloatingActionButton: 화면에 떠 있는 버튼.
• Drawer: 왼쪽에서 슬라이드되는 네비게이션 메뉴.

1.3 예제 코드

import 'package:flutter/material.dart';

class MaterialDesignExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material Design Example'),
        ),
        body: Center(
          child: Text('Hello, Material Design!'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

---

2. Cupertino Design

2.1 Cupertino Design 개요

Cupertino Design은 iOS 스타일의 디자인 언어로, Flutter는 이를 구현하기 위한 Cupertino 위젯 세트를 제공합니다.

2.2 주요 위젯

• CupertinoPageScaffold: iOS 스타일의 화면 구조.
• CupertinoNavigationBar: iOS 스타일의 네비게이션 바.
• CupertinoButton: iOS 스타일의 버튼.
• CupertinoActivityIndicator: iOS 스타일의 로딩 스피너.

2.3 예제 코드

import 'package:flutter/cupertino.dart';

class CupertinoDesignExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Cupertino Design Example'),
        ),
        child: Center(
          child: CupertinoButton(
            child: Text('Click Me'),
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

---

3. 커스텀 위젯 디자인 패턴

Flutter는 커스텀 위젯을 쉽게 정의할 수 있어 재사용성과 일관성을 높이는 데 유리합니다.

3.1 커스텀 위젯 구현

반복적으로 사용되는 UI 요소를 커스텀 위젯으로 만들어 효율성을 높입니다.

import 'package:flutter/material.dart';

class CustomButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;

  CustomButton({required this.label, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        textStyle: TextStyle(fontSize: 18),
      ),
      child: Text(label),
    );
  }
}

class CustomWidgetExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Widget Example'),
        ),
        body: Center(
          child: CustomButton(
            label: 'Press Me',
            onPressed: () {
              print('Button Pressed');
            },
          ),
        ),
      ),
    );
  }
}

---

4. 반응형 디자인 패턴

Flutter는 다양한 화면 크기에 적응하는 반응형 디자인을 구현하기 쉽습니다.

4.1 MediaQuery를 사용한 반응형 UI

화면 크기에 따라 위젯의 크기와 레이아웃을 조정합니다.

import 'package:flutter/material.dart';

class ResponsiveExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(title: Text('Responsive Example')),
      body: Center(
        child: Container(
          width: screenWidth * 0.8,
          height: 200,
          color: Colors.blue,
          child: Center(
            child: Text(
              'Responsive Box',
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          ),
        ),
      ),
    );
  }
}

4.2 LayoutBuilder를 사용한 반응형 UI

부모 위젯의 제약 조건에 따라 동적으로 레이아웃을 변경합니다.

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return Text('Tablet Layout');
    } else {
      return Text('Mobile Layout');
    }
  },
)

---

5. 결론

Flutter는 Material Design과 Cupertino Design을 기본으로 제공하며, 커스텀 위젯과 반응형 디자인 패턴을 통해 유연하고 강력한 UI를 구현할 수 있습니다. 이 글에서 소개한 패턴들을 활용하여 일관성 있고 사용성 높은 앱을 개발해보세요. 다음 글에서는 고급 애니메이션 패턴에 대해 다룰 예정입니다.

---

참고 자료

• Flutter 공식 문서: https://flutter.dev/docs/development/ui
• Material Design 가이드: https://material.io/design
• Cupertino Design 가이드: https://developer.apple.com/design/resources/