Flutter

[Flutter Material Design] 할 일 목록 앱

dev.trams 2023. 7. 1. 09:38
반응형

이번 포스트에서는 Flutter의 Material Design에 대해 공부하고 Material Design을 활용한 간단한 할 일 목록 앱을 만들어보겠습니다.

이 앱은 할 일을 추가하고 완료 여부를 표시하는 기능을 갖추고 있습니다. Material Design에 대해 간략하게 설명하고 예제 앱의 자세한 코드와 함께 앱의 구조와 디자인을 설명하도록 하겠습니다.

 

Material Design은 구글에서 제공하는 디자인 시스템으로, Flutter를 통해 멋진 UI를 구축할 수 있습니다. Material Design은 사용자 경험을 강조하며, 간결하고 일관된 UI를 제공합니다.

1. 디자인 원칙
   • 어떤 기기에서든 일관성 있는 경험을 제공합니다.
   • 사용자에게 물리적으로 이해하기 쉬운 인터페이스를 제공합니다.
   • 표면과 깊이를 활용하여 그림자와 움직임을 통해 시각적인 계층 구조를 제공합니다.
   • 컬러와 타이포그래피, 아이콘 등을 활용하여 정보 전달을 강화합니다.


2. 컴포넌트와 위젯
   • Material Design은 다양한 컴포넌트와 위젯을 제공하여 일관된 UI를 구현할 수 있습니다.
   • AppBar, Button, Card, Dialog, Drawer, Snackbar 등의 위젯을 활용할 수 있습니다.

 

3. 테마와 색상
   • Material Design은 테마와 색상을 통해 일관된 디자인을 구축합니다.
   • primaryColor, accentColor 등의 속성을 설정하여 앱의 색상을 조정할 수 있습니다.

 

4. 머티리얼 모션
   • Material Design은 애니메이션과 모션을 활용하여 부드러운 사용자 경험을 제공합니다.
   • 모션은 사용자의 동작에 반응하여 움직임을 부여하고, 화면 전환을 자연스럽게 처리합니다.


이와 같이 Material Design은 간결하면서도 사용자 경험에 초점을 둔 디자인 시스템입니다. 위젯과 컴포넌트, 테마와 색상, 그리고 머티리얼 모션을 통해 일관된 UI를 구현할 수 있습니다. Flutter의 Material Design을 활용하여 앱을 개발하면 사용자들에게 일관된 UI와 편안한 사용자 경험을 제공할 수 있습니다.

반응형


예제 앱: Todo List

material design 예제 실행화면

import 'package:flutter/material.dart';

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

class TodoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '할 일 목록',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: TodoListScreen(),
    );
  }
}

class TodoListScreen extends StatefulWidget {
  @override
  _TodoListScreenState createState() => _TodoListScreenState();
}

class _TodoListScreenState extends State<TodoListScreen> {
  List<String> todos = [];

  void addTodo() {
    setState(() {
      todos.add('새로운 할 일');
    });
  }

  void toggleTodo(int index) {
    setState(() {
      todos[index] = todos[index].startsWith('✅ ') ? todos[index].substring(2) : '✅ ${todos[index]}';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('할 일 목록'),
      ),
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(todos[index]),
            onTap: () {
              toggleTodo(index);
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          addTodo();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

위 예제 코드는 Material Design을 활용한 할 일 목록 앱을 구현한 것입니다. 앱의 구조는 TodoApp과 TodoListScreen 두 개의 위젯으로 구성되어 있습니다.

TodoApp은 MaterialApp을 포함하며, 앱의 기본 테마 설정과 할 일 목록 화면(TodoListScreen)을 홈으로 지정합니다.

TodoListScreen은 StatefulWidget을 상속하여 상태를 관리합니다. todos라는 문자열 목록을 관리하며, addTodo() 함수로 새로운 할 일을 추가하고, toggleTodo() 함수로 할 일의 완료 여부를 토글합니다.

TodoListScreen의 build() 메서드에서는 Scaffold를 사용하여 앱의 구조를 정의합니다. AppBar를 상단에 추가하고, 할 일 목록을 표시하기 위해 ListView.builder를 사용합니다. 각 할 일은 ListTile로 표시되며, 탭 이벤트를 통해 완료 여부를 토글할 수 있습니다. 또한, 할 일을 추가하기 위한 FloatingActionButton도 추가되어 있습니다.

이 예제를 실행하면 "할 일 목록"이라는 제목을 가진 AppBar와 빈 목록이 표시되는 화면이 나타납니다. 할 일을 추가하면 목록에 항목이 추가되고, 할 일을 탭하면 완료 여부가 토글됩니다. FloatingActionButton을 통해 새로운 할 일을 추가할 수 있습니다.

반응형