[Flutter / 기본] ListView

ListView 는 가장 일반적으로 사용되는 스크롤 위젯이며,

child는 ListView 의 내용을 채우는데 사용된다.

• ListView : 일반적인 ListView를 명시적으로 호출하고 children을 전달하는 방법
• ListView.builder : builder를 사용하여 동적으로 item을 추가하는 방법
• ListView.separated : ListView.builder에서 item을 좀 더 명확하게 구분해서 보여주는 방법

1. ListView

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Expanded(
          child: ListView(
            padding: const EdgeInsets.all(8),
            children: <Widget>[
              Container(
                height: 50,
                color: Colors.amber[100],
                child:const Center(child: Text('stage 1')),
              ),
              Container(
                height: 50,
                color: Colors.amber[50],
                child:const Center(child: Text('stage 2')),
              ),
            ]),
          ),
      ]),
    ),  
  );
}

위의 예제는 Expanded로 감싸지 않으면, 오류가 난다.

ListView가 가질 수 있는 공간을 알수 없기 때문에 남는 공간을

Expanded에게 준다는 뜻을 명시적으로 해두어야 한다.

Expanded에 대해서는 차후 좀 더 알아보도록 한다.

 

2. ListView.builder

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            margin: EdgeInsets.all(30),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              border: Border.all(
                  color: Colors.blue,
                  width:2
              )
            ),
            height: MediaQuery.of(context).size.height*0.8,
            child: ListView.builder(
              itemCount: _foundBleUARTDevices.length,
              itemBuilder: (BuildContext context, int index) => Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(16.0),
                ),
                elevation: 4.0,
                child: ListTile(
                  dense: true,
                  enabled: !(!_connected && _scanning),
                  trailing: GestureDetector(
                    behavior: HitTestBehavior.translucent,
                    onTap: () {
                      //(!_connected && _scanning) || (!_scanning && _connected)? (){}: onConnectDevice(index);
                    },
                    child: Container(
                      width: 48,
                      height: 48,
                      padding: const EdgeInsets.symmetric(vertical: 4.0),
                      alignment: Alignment.center,
                      child: const Icon(Icons.add_link),
                    ),
                  ),
                  subtitle: Text(_foundBleUARTDevices[index].id),
                  title: Text("${_foundBleUARTDevices[index].name}",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: Colors.black)),
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

2022.07.07 - [Flutter/기능 구현] - [Flutter / BLE] 기능 구현 - SCAN 에서 사용된 ListView.builder의 예이다.

itemBuilder를 사용하여 item을 itemCount에 맞춰서 ListView를 구성하면 된다.

BLE Device Scan과 같이 BLE Device(item)가 검색될 때마다 호출하여 리스트를 추가한다.

 

3. ListView.separated

child: ListView.separated(
  separatorBuilder: (BuildContext context, int index) => const Divider(
    height: 10,
    color: Colors.blue,
  ),
  itemCount: _foundBleUARTDevices.length,
  itemBuilder: (BuildContext context, int index) => Card(
      shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16.0),
    ),
    elevation: 4.0,
    child: ListTile(
      dense: true,
      enabled: !(!_connected && _scanning),
      trailing: GestureDetector(
        behavior: HitTestBehavior.translucent,
        onTap: () {
          //(!_connected && _scanning) || (!_scanning && _connected)? (){}: onConnectDevice(index);
        },
        child: Container(
          width: 48,
          height: 48,
          padding: const EdgeInsets.symmetric(vertical: 4.0),
          alignment: Alignment.center,
          child: const Icon(Icons.add_link),
        ),
      ),
      subtitle: Text(_foundBleUARTDevices[index].id),
      title: Text("${_foundBleUARTDevices[index].name}",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: Colors.black)),
    ),
  ),
),

ListView.separated는 ListView.builder에 구분선이 추가된 것이다.

사용법은 ListView.builder와 동일하며, 추가적으로 separatorBuilder 속성이 추가되어

구분선에 대한 정의를 해준다.