Overview.
ListView 와 비슷하지만 다른 ListTile 에 대해 알아보자
- ListTile 란?
- 한번 써보장!!
0. 문서
https://api.flutter.dev/flutter/material/ListTile-class.html
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");
},
);
}
}
'flutter & dart' 카테고리의 다른 글
flutter & dart - 버튼 활성화와 비활성화 AbsorbPointer (0) | 2024.04.01 |
---|---|
flutter & dart - 도형을 만드는 ClipRRect , ClipOval , ClipPath (0) | 2024.04.01 |
flutter & dart - RichText (0) | 2024.04.01 |
flutter & dart - ListView.builder (0) | 2024.03.21 |
flutter & dart - TextEditingController (0) | 2024.03.21 |