Flutter 위젯 ExpansionTile

목차

1. ExpansionTile이란
2. ExpansionTile 사용 이유
3. ExpansionTile 사용하기
4. ExpansionTile 속성

 

1. ExpansionTile이란

• 타일을 확장하거나 축소하여 자식을 표시하거나 숨기는 확장 화살표 아이콘이 있는 단일 행 ListTile 이다.

 

 

2. ExpansionTile 사용 이유

• 선택된 값의 요약을 타일의 바로 밑에 표출되어야 하거나 선택할 값을 전부다 보여줄 필요가 없어서 생략이 가능할 때 사용한다.

 

3. ExpansionTile 사용하기

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

    void main() {
      runApp(new ExpansionTileSample());
    }

    class ExpansionTileSample extends StatefulWidget {
      @override
      ExpansionTileSampleState createState() => new ExpansionTileSampleState();
    }

    class ExpansionTileSampleState extends State {
      String foos = 'One';
      int _key;

      _collapse() {
        int newKey;
        do {
          _key = new Random().nextInt(10000);
        } while(newKey == _key);
      }

      @override
      void initState() {
        super.initState();
        _collapse();
      }

      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          home: new Scaffold(
            appBar: new AppBar(
              title: const Text('ExpansionTile'),
            ),
            body: new ExpansionTile(
                key: new Key(_key.toString()),
                initiallyExpanded: false,
                title: new Text(this.foos),
                backgroundColor: Theme
                    .of(context)
                    .accentColor
                    .withOpacity(0.025),
                children: [
                  new ListTile(
                    title: const Text('One'),
                    onTap: () {
                      setState(() {
                        this.foos = 'One';
                        _collapse();
                      });
                    },
                  ),
                  new ListTile(
                    title: const Text('Two'),
                    onTap: () {
                      setState(() {
                        this.foos = 'Two';
                        _collapse();
                      });
                    },
                  ),
                  new ListTile(
                    title: const Text('Three'),
                    onTap: () {
                      setState(() {
                        this.foos = 'Three';
                        _collapse();
                      });
                    },
                  ),
                ]
            ),
          ),
        );
      }
    }

 

 

4. ExpansionTile 속성

1. title : 기본적으로 표시할 제목
2. backgroundcolor : 바탕색을 지정
3. children : ExpansionTile 아래 버튼 클릭시 보여줄 자식 위젯을 추가할 수 있음.
4. childrenPadding : 하위 속성으로 나타나는 위젯의 안 쪽 여백을 지정