flutter & dart - ListTile 위젯

Overview. 

ListView 와 비슷하지만 다른 ListTile 에 대해 알아보자

1. ListTile  란?
2. 한번 써보장!!

 

0. 문서

https://api.flutter.dev/flutter/material/ListTile-class.html

ListTile class - material library - Dart API

 

1. ListTile

위와 알 수 있듯이 타일과 같은 리스트를 생성이 가능하다!!! (알람 같은거 만들때 좋을 것 같다.)

 

 

한마디로 보면 leading(아이콘) 부분과 onTap(클릭 시) 과 같은 아이들을 쓸 수 있고 또 여러 프로퍼티? 가 있나보다.

위와 같은 구성은 밑과 같이 플러터 문서에서 잘 작성 해 주었다.

import 'package:flutter/material.dart';

/// Flutter code sample for [ListTile].

void main() => runApp(const ListTileApp());

class ListTileApp extends StatelessWidget {
  const ListTileApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const ListTileExample(),
    );
  }
}

class ListTileExample extends StatelessWidget {
  const ListTileExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ListTile Sample')),
      body: ListView(
        children: const <Widget>[
          Card(child: ListTile(title: Text('One-line ListTile'))),
          Card(
            child: ListTile(
              leading: FlutterLogo(),
              title: Text('One-line with leading widget'),
            ),
          ),
          Card(
            child: ListTile(
              title: Text('One-line with trailing widget'),
              trailing: Icon(Icons.more_vert),
            ),
          ),
          Card(
            child: ListTile(
              leading: FlutterLogo(),
              title: Text('One-line with both widgets'),
              trailing: Icon(Icons.more_vert),
            ),
          ),
          Card(
            child: ListTile(
              title: Text('One-line dense ListTile'),
              dense: true,
            ),
          ),
          Card(
            child: ListTile(
              leading: FlutterLogo(size: 56.0),
              title: Text('Two-line ListTile'),
              subtitle: Text('Here is a second line'),
              trailing: Icon(Icons.more_vert),
            ),
          ),
          Card(
            child: ListTile(
              leading: FlutterLogo(size: 72.0),
              title: Text('Three-line ListTile'),
              subtitle:
                  Text('A sufficiently long subtitle warrants three lines.'),
              trailing: Icon(Icons.more_vert),
              isThreeLine: true,
            ),
          ),
        ],
      ),
    );
  }
}

 

2. 한번 써보장!!

밑과 같이 구성해보고 클릭도 가능하도록 만들었다. 물론 구린건 덤이다.

문서에 여러 방식들이 있으니 사용해보는 것도 나쁘지 않을 듯 싶다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _ListViewHome(),
    );
  }
}

class _Home extends StatefulWidget {
  const _Home({super.key});

  @override
  State<_Home> createState() => _HomeState();
}

class _HomeState extends State<_Home> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.blue,
              ),
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.red,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _ListViewHome extends StatelessWidget {
  const _ListViewHome({super.key});

  @override
  Widget build(BuildContext context) {
    final colorCodes = [600 , 500 , 400 , 300 , 200];
    final data = ['가','나','다','라','마'];
    return SafeArea(
      child: Scaffold(
        body: ListView.builder(
          itemCount: 5,
          itemBuilder: (BuildContext context , int index) {
            return buildColumn(colorCodes, index, data);
          },
        ),
      ),
    );
  }

  ListTile buildColumn(List<int> colorCodes, int index, List<String> data) {
    return ListTile(
      title: Text("제목"),
      subtitle: Text("부제목"),
      leading: Icon(Icons.accessibility_sharp),
      onTap: () {
        print("눌러짐 $index");

      },
    );
  }
}