[flutter] 플러터(expandable)이란?

플러터(expandable)는 플러터(Flutter) 프레임워크에서 제공하는 위젯의 하나로, 사용자가 특정한 동작을 수행할 때 화면을 확장하거나 축소할 수 있는 기능을 제공합니다. 이를 통해 사용자는 원하는 내용을 더 자세히 살펴볼 수 있습니다.

플러터(expandable)의 기능

플러터(expandable)은 다음과 같은 기능들을 제공합니다:

  1. 화면 확장/축소: 사용자가 화면을 터치하거나 버튼을 누를 때마다, 플러터(expandable) 위젯은 화면을 확장하거나 축소합니다.
  2. 자동 스크롤: 화면을 확장할 때, 플러터(expandable) 위젯은 자동으로 스크롤하여 추가적인 내용을 표시합니다.
  3. 사용자 정의 디자인: 플러터(expandable) 위젯은 사용자가 원하는 디자인으로 쉽게 커스터마이징할 수 있습니다.

플러터(expandable) 사용 예시

다음은 플러터(expandable) 위젯을 사용하여 확장 가능한 화면을 구성하는 예시 코드입니다:

import 'package:flutter/material.dart';

class ExpandableScreen extends StatefulWidget {
  @override
  _ExpandableScreenState createState() => _ExpandableScreenState();
}

class _ExpandableScreenState extends State<ExpandableScreen> {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expandable Screen'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            ListTile(
              title: Text('Expandable Item'),
              trailing: Icon(
                isExpanded ? Icons.expand_less : Icons.expand_more,
              ),
              onTap: () {
                setState(() {
                  isExpanded = !isExpanded;
                });
              },
            ),
            if (isExpanded)
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text(
                  'Additional Content',
                  style: TextStyle(fontSize: 18),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: ExpandableScreen(),
  ));
}

위 예시 코드에서는 터치 가능한 ListTile 위젯을 사용하여 “Expandable Item”을 표시하고, 터치할 경우 위젯이 확장되거나 축소되도록 구현되어 있습니다. 추가적인 내용은 isExpanded 상태에 따라 조건부 렌더링되며, 확장되었을 때는 “Additional Content”라는 텍스트가 표시됩니다.

플러터(expandable)의 활용성

플러터(expandable)은 사용자가 더 많은 내용을 살펴볼 수 있도록 화면을 확장하는 기능을 제공합니다. 이는 사용자 경험을 향상시키고, 정보의 가시성을 높일 수 있습니다. 특히, 긴 리스트나 상세 정보가 포함된 화면에서 유용하게 활용될 수 있습니다.

참고 자료