[flutter] 스택드 위젯을 사용하여 프로젝트 관리 앱 구성하기

15 Dec 2023

flutter

개발자들은 종종 여러 프로젝트를 동시에 관리해야 합니다. 효율적인 프로젝트 관리를 돕기 위해 Flutter에서 스택드(Stacked) 위젯을 활용하는 방법에 대해 알아보겠습니다.

스택드 위젯 개요

스택드(Stacked) 위젯은 여러 위젯을 겹쳐서 표시할 때 사용됩니다. 이를 통해 위젯을 쌓아서 화면에 나타낼 수 있습니다. 스택드 위젯은 일반적으로 Z축을 사용하여 위젯의 겹침 순서를 결정합니다.

프로젝트 관리 앱 디자인

프로젝트 관리 앱을 디자인할 때, 각 프로젝트에 대한 정보를 나타내는 카드와 해당 카드를 누르면 상세 정보를 표시하는 화면으로 구성할 수 있습니다.

아래는 간단한 코드 예시입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Project Management App',
      home: ProjectList(),
    );
  }
}

class ProjectList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Projects'),
      ),
      body: ListView(
        children: <Widget>[
          ProjectCard(name: 'Project A'),
          ProjectCard(name: 'Project B'),
          ProjectCard(name: 'Project C'),
        ],
      ),
    );
  }
}

class ProjectCard extends StatelessWidget {
  final String name;

  ProjectCard({required this.name});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        title: Text(name),
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => ProjectDetail(name: name)),
          );
        },
      ),
    );
  }
}

class ProjectDetail extends StatelessWidget {
  final String name;

  ProjectDetail({required this.name});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(name),
      ),
      body: Center(
        child: Text('Detail of $name'),
      ),
    );
  }
}

위의 예시에서 ProjectList 위젯은 각 프로젝트를 나타내는 ProjectCard 위젯을 리스트 형태로 표시합니다. ProjectCard 위젯을 누르면 해당 프로젝트의 상세 정보를 나타내는 ProjectDetail 위젯이 나타납니다.

이제 이를 스택드 위젯으로 변경하여 보다 효과적으로 표현해 보겠습니다.

class StackedProjectList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Projects'),
      ),
      body: Stack(
        children: <Widget>[
          ProjectCard(name: 'Project A'),
          Positioned(
            top: 100,
            left: 100,
            child: ProjectCard(name: 'Project B'),
          ),
          Positioned(
            top: 200,
            left: 200,
            child: ProjectCard(name: 'Project C'),
          ),
        ],
      ),
    );
  }
}

위의 예시에서 Stack 위젯을 사용하여 ProjectCard 위젯을 겹치게 표현하였습니다. Positioned 위젯을 이용하여 각 카드의 위치를 조절할 수 있습니다.

이제 스택드(Stacked) 위젯을 사용하여 여러 위젯을 쌓아 프로젝트 관리 앱을 더 흥미롭게 디자인할 수 있게 되었습니다.

프로젝트 관리 앱 및 기타 Flutter 앱 개발에 스택드(Stacked) 위젯을 적극 활용하여 효율적이고 흥미로운 사용자 경험을 제공할 수 있습니다.

스택드 위젯 개요

프로젝트 관리 앱 디자인

참고 자료