Flutter 와 Material 디자인 활용

Flutter에서 Material 앱을 생성하려면 MaterialApp을 사용하여 기본 Material 테마와 스타일을 설정합니다. 그 위에 다양한 위젯들을 추가하여 화면을 구성합니다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Design Sample',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Material Design'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Hello, Material Design!',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text('Click Me'),
            ),
            SizedBox(height: 20),
            Icon(
              Icons.thumb_up,
              color: Colors.blue,
              size: 50,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    );
  }
}

 

• MaterialApp: Material Design을 적용하기 위해 사용하는 앱 위젯입니다. theme 속성을 통해 앱 전체에 일관된 스타일을 설정할 수 있습니다.
• Scaffold: Material Design의 화면 구조를 잡아주는 위젯으로, 앱 바, 바디, 플로팅 버튼 등을 쉽게 배치할 수 있습니다.
• AppBar: 상단에 표시되는 앱 바로, 타이틀이나 액션 버튼을 배치할 수 있습니다.
• Column: 여러 위젯을 수직으로 배치하는 레이아웃 위젯입니다.
• Text: 텍스트 표시를 위한 위젯입니다. TextStyle을 통해 폰트 크기와 색상 등을 지정할 수 있습니다.
• ElevatedButton: Material 디자인 스타일의 버튼으로, 클릭 이벤트를 지정할 수 있습니다.
• Icon: 아이콘을 표시하는 위젯으로, 다양한 Material 아이콘을 쉽게 사용할 수 있습니다.
• FloatingActionButton: 화면의 한쪽 모서리에 위치하는 동그란 버튼으로, 주로 빠른 작업 실행에 사용됩니다.

추가 설명

• ThemeData: primarySwatch, accentColor, textTheme 등을 설정하여 앱 전반의 일관된 색상과 텍스트 스타일을 지정합니다.
• Scaffold의 floatingActionButton: onPressed 이벤트를 지정하여 클릭 시 동작을 추가할 수 있습니다.

 

Material Design 특징

Material Design을 통해 Flutter는 일관된 스타일과 상호작용 요소를 제공하여 앱을 깔끔하고 직관적으로 만듭니다. 또한 Flutter는 커스터마이징이 용이해 Material Design 기본 스타일을 유지하면서도 개성 있는 UI를 쉽게 만들 수 있습니다.

이 기본 예제를 확장하여 더 복잡한 Material Design 컴포넌트, 예를 들어 Card, BottomNavigationBar, Drawer 등을 사용해보면 더 다양하게 활용할 수 있습니다.