Flutter 위젯 ExpansionTile

목차

1. ExpansionTile이란
2. ExpansionTile 사용 이유
3. ExpansionTile 사용하기
4. ExpansionTile 속성
5. ExpansionTile의 선택시 Title 색상변경하기

 

1. ExpansionTile이란

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

 

2. ExpansionTile 사용 이유

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

 

3. ExpansionTile 사용하기

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Column(
            children: const [
              ExpansionTile(
                title: Text(
                  '애국가 1절'
                ),
                children: [
                  Text('동해 물과 백두산이\n 마르고 닳도록\n 하느님이 보우하사\n 우리나라 만세')
                ],
              ),
              ExpansionTile(
                title: Text(
                    '애국가 2절'
                ),
                children: [
                  Text('남산 위에 저 소나무\n철갑을 두른 듯\n바람 서리 불변함은\n우리 기상일세')
                ],
              ),
              ExpansionTile(
                title: Text(
                    '애국가 3절'
                ),
                children: [
                  Text('가을 하늘 공활한데\n높고 구름 없이\n밝은 달은 우리 가슴\n일편단심일세')
                ],
              ),
              ExpansionTile(
                title: Text(
                    '애국가 4절'
                ),
                children: [
                  Text('이 기상과 이 맘으로\n충성을 다하여\n괴로우나 즐거우나\n나라 사랑하세')
                ],
              ),
            ],
          )
        )
      )
    );
  }
}

 

4. ExpansionTile 속성

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

 

 

5. ExpansionTile 해당 Tile 선택시 선택된 타일의 Title 색상변경하기

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Theme(
            data: Theme.of(context).copyWith(
              colorScheme: const ColorScheme.light(
                primary: Colors.amberAccent,
              ),
            ),
            child: Column(
              children: const [
                ExpansionTile(
                  title: Text(
                    '애국가 1절'
                  ),
                  children: [
                    Text('동해 물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세')
                  ],
                ),
                ExpansionTile(
                  title: Text(
                      '애국가 2절'
                  ),
                  children: [
                    Text('남산 위에 저 소나무 철갑을 두른 듯 바람 서리 불변함은 우리 기상일세')
                  ],
                ),
                ExpansionTile(
                  title: Text(
                      '애국가 3절'
                  ),
                  children: [
                    Text('가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세')
                  ],
                ),
                ExpansionTile(
                  title: Text(
                      '애국가 4절'
                  ),
                  children: [
                    Text('이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세')
                  ],
                ),
              ],
            ),
          )
        )
      )
    );
  }
}

- ExpansionTile을 가진 Column 상위에 Theme 위젯을 적용후 data 항목에 colorSheme의 primary 속성에 선택 시 변경할 색상을 넣어주면 된다.