Reactive Mind Map / 반응형 마인드맵 #

A highly customizable and interactive mind map package for Flutter with multiple layouts, dynamic sizing, and rich styling options.

Flutter용 다중 레이아웃, 동적 크기 조절, 다양한 스타일링 옵션을 제공하는 고도로 커스터마이징 가능한 인터랙티브 마인드맵 패키지입니다.

Screenshots / 스크린샷 #

Multiple layouts and customization options / 다양한 레이아웃과 커스터마이징 옵션

Demo / 데모 #

Interactive expand/collapse and smooth animations / 인터랙티브 확장/축소 및 부드러운 애니메이션

Features / 특징 #

🎨 완전한 커스터마이징 / Complete Customization

• 노드 모양 선택 (둥근 사각형, 원형, 다이아몬드, 육각형 등) / Node shapes (rounded rectangle, circle, diamond, hexagon, etc.)
• 색상, 텍스트 스타일, 그림자 효과 커스터마이징 / Colors, text styles, shadow effects customization
• 동적 노드 크기 조절 / Dynamic node sizing
• 연결선 스타일과 애니메이션 설정 / Connection line styles and animation settings

🎯 다양한 레이아웃 / Multiple Layouts

• 오른쪽/왼쪽/위/아래 방향 레이아웃 / Right/Left/Top/Bottom direction layouts
• 원형(Radial) 레이아웃 / Radial layout
• 좌우/상하 분할 레이아웃 / Horizontal/Vertical split layouts

⚡ 부드러운 애니메이션 / Smooth Animations

• 노드 확장/축소 애니메이션 / Node expand/collapse animations
• 커스터마이징 가능한 애니메이션 곡선과 지속시간 / Customizable animation curves and duration
• 하드웨어 가속 트랜지션 / Hardware-accelerated transitions

🖱️ 풍부한 인터랙션 / Rich Interactions

• 탭, 길게 누르기, 더블 탭 이벤트 / Tap, long press, double tap events
• 확대/축소, 팬 기능 / Pan & zoom functionality
• 노드 확장/축소 상태 추적 / Node expand/collapse state tracking

Installation / 설치 #

Add this to your package's pubspec.yaml file: pubspec.yaml 파일에 다음을 추가하세요:

dependencies:
  reactive_mind_map: ^1.0.0

Then run / 그다음 실행하세요:

flutter pub get

Quick Start / 빠른 시작 #

import 'package:flutter/material.dart';
import 'package:reactive_mind_map/reactive_mind_map.dart';

class MyMindMap extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final mindMapData = MindMapData(
      id: 'root',
      title: 'My Project',
      children: [
        MindMapData(id: '1', title: 'Planning'),
        MindMapData(id: '2', title: 'Development'),
        MindMapData(id: '3', title: 'Testing'),
      ],
    );

    return Scaffold(
      body: MindMapWidget(
        data: mindMapData,
        style: MindMapStyle(
          layout: MindMapLayout.right,
          nodeShape: NodeShape.roundedRectangle,
        ),
        onNodeTap: (node) => print('Tapped: ${node.title}'),
      ),
    );
  }
}

Advanced Usage / 고급 사용법 #

Custom Styling / 커스텀 스타일링 #

final customStyle = MindMapStyle(
  layout: MindMapLayout.radial,
  nodeShape: NodeShape.circle,
  enableAutoSizing: true,
  connectionColor: Colors.blue,
  animationDuration: Duration(milliseconds: 600),
  defaultNodeColors: [Colors.blue, Colors.green, Colors.orange],
);

Event Handling / 이벤트 처리 #

MindMapWidget(
  data: myData,
  onNodeTap: (node) => print('Node tapped: ${node.title}'),
  onNodeLongPress: (node) => _showNodeOptions(node),
  onNodeExpandChanged: (node, isExpanded) => 
    print('${node.title} ${isExpanded ? 'expanded' : 'collapsed'}'),
);

Available Options / 사용 가능한 옵션 #

Layouts / 레이아웃 #

Node Shapes / 노드 모양 #

Performance / 성능 #

• 최적화된 렌더링 / Optimized rendering with custom painters
• 동적 간격 계산 / Smart spacing based on content
• 메모리 효율적 / Minimal widget tree overhead
• 부드러운 애니메이션 / Hardware-accelerated animations

License / 라이선스 #

This project is licensed under the MIT License - see the LICENSE file for details.

이 프로젝트는 MIT 라이선스 하에 있습니다 - 자세한 내용은 LICENSE 파일을 참조하세요.

Contributing / 기여 #

Contributions are welcome! Please feel free to submit a Pull Request.

기여를 환영합니다! 언제든지 Pull Request를 제출해 주세요.

Issues / 이슈 #

If you encounter any issues or have feature requests, please file them in the GitHub Issues section.

이슈가 발생하거나 기능 요청이 있으시면 GitHub Issues 섹션에 등록해 주세요.

변경 이력 #

최신 변경사항은 CHANGELOG.md를 확인하세요.