[Flutter] ListView (2) ListView.Builder

📌  이번 글은

Bulider를 사용하여 ListView 를 만드는 방법입니다.

 

 

ListView 1탄, 기본형 (with. List<Widget>) 보러 가기.

[Flutter] ListView (1) 기본형 (with. LIst<Widget>)

 

ListView

• 가장 일반적으로 사용되는 스크롤 위젯.
• 스크롤 방향으로 자식을 차례로 표시.

 

기본 class 정의

• 먼저 ListView 생성을 위해 필요한 기본 class 정의를 하겠습니다 :)

 

ListData 정의

• ListView에서 사용될 Data Class.
• 저는 추후에 List내에 관심 on/off 기능을 넣을거에요! 그래서 on/of에 변화할 Icon을 클래스화 시켰습니다.

// (c) InterestIcon - 관심 on/off 아이콘 반환.
class InterestIcon extends StatelessWidget {
  InterestIcon(this._isInterest);

  final bool _isInterest;

  @override
  Widget build(BuildContext context) {
    if (_isInterest) {
      return const Icon(Icons.star);
    } else {
      return const Icon(Icons.star_border);
    }
  }
}

// (c) ListData - ListView Data Class
class ListData {
  final int count;
  final String title;
  final bool isInterest;

  ListData(this.count, this.title, this.isInterest);
}

ListTail 정의

• ListView 자식에 넣어줄 ListTail 위젯을 정의.
• ListTail 위젯은 정해진 규칙(?)이 있어, 추가 커스텀이 필요할 경우 다른 위젯들을 사용하여 커스텀 위젯을 만들면 좋을 것 같습니다.

// (c) DemoListTile - ListView Tile 위젯 반환.
class DemoListTile extends StatelessWidget {
  DemoListTile(this._data);

  final ListData _data;

  @override
  Widget build(BuildContext context) {
    // (w) ListTile 기본형.
    return ListTile(
      title: Text(_data.title),
      subtitle: Text("조회수 ${_data.count}"),
      trailing: InterestIcon(_data.isInterest),
    );
  }
}

 

 

ListView.builder

• ListView를 구성하는 옵션 중 하나의 방법.
• 화면에 실제로 보이는 자식에 대해서만 builder가 호출.
• 많은(또는 무한) 자식이 있는 ListView에 적합.

// (c) BuilderListPage - builder 를 이용한 ListView 페이지.
class BuilderListPage extends StatefulWidget {
  const BuilderListPage({Key? key}) : super(key: key);

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

class _BuilderListPageState extends State<BuilderListPage> {
  // (v) datas - ListView 정적 데이터 배열.
  final List<ListData> datas = [
    ListData(134, 'Swift', true),
    ListData(67, 'Kotlin', false),
    ListData(64, 'Objective-c', true),
    ListData(56, 'Flutter', false),
    ListData(167, 'JAVA', false),
    ListData(234, 'Python', true),
    ListData(32, 'PHP', false),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Builder ListView Page'),
      ),
      body: SafeArea(
        // ListView.builder - ListView Data 연결.
        child: ListView.builder(
          itemCount: datas.length,
          itemBuilder: (BuildContext context, int index) {
            return DemoListTile(datas[index]);
          },
        ),
      ),
    );
  }
}

 

예제에서는 자식의 넣어줄 데이터를 임의의 배열을 정의하여 사용했지만, builder를 사용하는 방법은 DB에서 데이터를 가져올 때 유용할 것 같아요. ❛ε ❛♪

그래서 저는 builder ListView의 경우에는 StatefulWidget을 사용하여 구현했습니다! (Refresh와 같은 행위로 값이 변할 수 있다고 생각했어요.) 

StatelessWidget vs StatefulWidget 포스팅

[Flutter] StatelessWidget vs StatefulWidget

 

빌드 화면

 

 

 

🐱 전체 소스 프로젝트 바로가기 🐱

GitHub - SuniDev/flutter_list_demo: Flutter List Sample Project