Flutter ListTitle 사용법 (feat.Divider)

ListTitle이란 ListView와 자주 쓰이며 제목과 부제목을 가진 리스트 중 하나를 생각하면 된다

예를 들면 카톡 친구목록에서 이름과 대화명이 있다.

거기에 이름이 조금더 크고 대화명이 조금 더 작다 그렇게 하나의 묶음을 편하게 쓸 수 있도록 한 것이 ListTitle이다

이름은 title이라 하고 대화명은 subTitle이라고 생각하면 편하다

추가해서 leading이라는 옵션도 있는데 AppBar에서 처럼 로고를 넣듯이 ListTitle에는 프로필 사진을 생각하면 된다

 

1. 기본코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

 

practice_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/sreen/index_screen1.dart';
import 'package:flutter_practice/sreen/index_screen2.dart';
import 'package:flutter_practice/sreen/index_screen3.dart';

class PracticePage extends StatefulWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  State<PracticePage> createState() => _PracticePageState();
}

class _PracticePageState extends State<PracticePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [],
      ),
    );
  }
}

ListTitle은 ListView와 자주 쓰이기때문에 이렇게 기본코드로 해놨다

 

 

2. ListTitle

ListTitle을 사용해볼 차례다. 일단 메신저 친구목록처럼 한번 만들어 보자

 

2-1. leading

우선 프로필을 만들어 보겠다. 메신저의 친구목록은 맨왼쪽에 둥근 원의 프로필사진이 있다

ListTile(
  leading: CircleAvatar(
    backgroundImage: AssetImage("assets/flutter.png"),
  ),
)

leading에 둥근 이미지를 사용하기 위하여 CircleAvatar를 사용하였고 그 안에 백그라운드 이미지를 넣어 주었다

위의 코드를 실행해보면 아래와 같다

 

왼쪽에 작은 둥근 이미지가 생긴 것을 확인할 수 있다

 

2-2. title

이번에는 닉네임을 작성해 볼 차례다. 닉네임은 보통 둥근 프로필사진의 오른쪽에 놓여 있다

딱히 스타일을 건들 필요 없이 간단하게 작성하면 된다

title 하나만 추가하면 된다

 

2-3. subTitle

그리고 메신저에는 대화명도 있었다. 그 대화명은 이름바로 밑에 있는데, 그걸 한번 만들어 보려고 한다

스타일은 여전히 안만지고 간단하게 할 수 있다

딱 한줄만 넣어주면 된다. 그리고 실행을 시켜보면 아래와 같이 나온다

이렇게 메신저의 프로필 사진과 이름, 대화명을 구현할 수 있었다

 

3. Divider

여기까지 만들었는데 뭔가 허전하다. 만약 이 코드를 몇 번 더 작성해서 5개의 리스트를 만들었지만 위아래가 구분이 안 갈 것이다

예를 들면 아래와 같이 말이다

그렇기 때문에 살짝 선을 그어줘야 친구관계가 성립이 된다

선을 그을려면 Divider라는 것을 사용하면 된다 HTML에서는 hr같은 느낌이다

선도한 줄만 넣어주면 된다

아래를 잘보면 선이 그어져 있는 것을 확인할 수 있다