[Flutter] ListView Divider(구분선) 생성하기

보톤 리스트뷰 생성할 때 아래처럼 ListView.Builder를 사용한다.

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> mainList = ['Cold', 'Poll', 'Beam', 'Greek', 'Song', 'Tight', 'Run', 'Count'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TEST'),
      ),
      body: ListView.builder(
          itemCount: mainList.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              onTap: (){},
              title: Container(
                  alignment: Alignment.centerLeft,
                  height: 50,
                  child: Text(mainList[index], textAlign: TextAlign.start,),
                ),
            );
          })
    );
  }

 

mainList에 아이템들을 List<String> 형식으로 만들어놨다.

위의 코드를 실행하면 아래와 같이 리스트가 생성된다.

 

 

그런데 리스트 아이템들을 구분하는 선이 있는 것이 보기가 편하다. 구분선을 넣어 보자.

 

첫번째 방법은 리스트 아이템을 추가한 Container 아래에 Divider를 추가해주는 방법이다.

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> mainList = ['Cold', 'Poll', 'Beam', 'Greek', 'Song', 'Tight', 'Run', 'Count'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TEST'),
      ),
      body: ListView.builder(
          itemCount: mainList.length,
          itemBuilder: (BuildContext context, int index) {
            return InkWell(
              onTap: (){},
                child: Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(left: 10.0),
                      child: Container(
                        alignment: Alignment.centerLeft,
                        height: 50,
                        child: Text(mainList[index], textAlign: TextAlign.start,),
                      ),
                    ),
                    Divider(),
                  ],
                )
            );
          })
    );
  }
}

 

위 코드를 실행하면 아래와 같이 구분선이 표시가 된다. 이렇게 사용해도 좋지만 클릭이벤트가 실행되면 클릭 영역이 구분선까지 포함된다.

외관상 이쁜지 모르겠다..

 

두번째 방법은 ListView.separeated를 사용하는 방법이다.

 

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> mainList = [
    'Cold',
    'Poll',
    'Beam',
    'Greek',
    'Song',
    'Tight',
    'Run',
    'Count'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('TEST'),
        ),
        body: ListView.separated(
            itemCount: mainList.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                onTap: () {},
                title: Container(
                  alignment: Alignment.centerLeft,
                  height: 50,
                  child: Text(
                    mainList[index],
                    textAlign: TextAlign.start,
                  ),
                ),
              );
            }, separatorBuilder: (BuildContext context, int index) { return Divider(thickness: 1); },));
  }

위에선 InkWell을 썼었는데 ListTile을 사용하면 훨씬 편하다. 그리고 ListTile엔 Padding이 조금 들어가 있는 거 같다.

위와 같이 코드를 적고 실행해보면, 아래와 같이 구분선이 표시된다.

 

 

 

아래는 ListView.separated를 사용한 전체 소스이다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> mainList = [
    'Cold',
    'Poll',
    'Beam',
    'Greek',
    'Song',
    'Tight',
    'Run',
    'Count'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('TEST'),
        ),
        body: ListView.separated(
            itemCount: mainList.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                onTap: () {},
                title: Container(
                  alignment: Alignment.centerLeft,
                  height: 50,
                  child: Text(
                    mainList[index],
                    textAlign: TextAlign.start,
                  ),
                ),
              );
            }, separatorBuilder: (BuildContext context, int index) { return Divider(thickness: 1); },));
  }
}