Dart - ListView

ListView란?

스크롤이 가능한 리스트외 항목들을 설정할 떄 사용할 수 있다. ListView를 통해 스크롤되는 방향으로 자식 요소를 설정하여 화면에 나타나게 만들 수 있다. 스크롤이 가능한 위젯으로 가장 많이 사용된다.
scrollDiretion을 통해 list를 수평적, 수직적으로 보여줄 수 있으며, Axis.vertical은 수직적, Axis.horizontal은 수평적으로 list를 보여주도록 설정할 수 있다.

어떻게 생성할까?

1. Listview

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'ListView',
        theme: ThemeData(primaryColor: Colors.white),
        home: ListViewPractice());
  }
}

class ListViewPractice extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.lightBlueAccent,
        height: 200,
        child: ListView(  // Listview 설정
          children: <Widget>[
            ListTile(
              leading : Icon(Icons.star),
              title : Text('1st title'),
              trailing : Icon(Icons.backspace),
              onTap : () {
                print('tap1 listtile');
              }
            ),
             ListTile(
              leading : Icon(Icons.star),
              title : Text('2nd title'),
              trailing : Icon(Icons.backspace),
              onTap : () {
                print('tap2 listtile');
              }
            ),
             ListTile(
              leading : Icon(Icons.star),
              title : Text(' 3rd title'),
              trailing : Icon(Icons.backspace),
              onTap : () {
                print('tap3 listtile');
              }
            )            
          ],
        ),
      ),
    );
  }
}

실행 결과1

2. listview.Builder

ListView.builder를 사용할 때에는, itemCount와 itemBuilder를 이용해서 생성한다.
itemCount는 스크롤의 최대 길이값, 리스트에 나타낼 요소의 최대값으로 지정한다.
itemCount값보다 index값이 작은 동안 itemBuilder에 지정된 콜백 함수가 실행된다.


예시 코드를 보면 Scaffold 아래의 코드가 짧아진 것을 확인할 수 있다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
         primarySwatch: Colors.blue,
         visualDensity: VisualDensity.adaptivePlatformDensity
     ),
     home: MyHomePage(),
   );
 }
}

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 final List<String> entries = <String>['1st', '2nd', '3rd', '4th', '5th'];

 @override
 Widget build(BuildContext context) {
   return Scaffold(
       body: ListView.builder(
       // scrollDirection: Axis.horizontal, 를 통해 수직적으로 list를 보여줄 수 있다.
####             itemCount: entries.length, 
           itemBuilder: (BuildContext context, int index) {
           
             return Container(
               height: 50,
               color : Colors.lightBlueAccent,
               child: Center(child: Text(' ${entries[index]} title')),
             );
           }
       )
   );
 }
}

3. ListView.separated

위에 코드에서 builder을 separated로 바꾸고 separatorBuilder: 속성을 추가해준다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> entries = <String>['1st', '2nd', '3rd', '4th', '5th'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView.separated(
            padding: const EdgeInsets.symmetric(vertical: 30),
            itemCount: entries.length,
            separatorBuilder: (BuildContext context, int index) =>
            	const Divider(),
                
            itemBuilder: (BuildContext context, int index) {
              return Container(
                height: 50,
               
                child: Center(child: Text('Entry ${entries[index]}')),
              );
            })
       );
  }
}

listView.separated도 똑같은 결과가 나오는 것을 확인할 수 있을 것이다.

참고자료