ListView.builder

ListView.builder

 

itemCount : item의 항목 개수를 입력

itembuilder : item에 따른 action을 위한 function 구현

 

SizedBox(
    height: 200.0,
    child: ListView.builder(
      // shrinkWrap: true,
      itemCount: 10,
      itemBuilder: (BuildContext context, int idx) {
        if (_filterController.text.isEmpty) {
          _filteredInt = 0;
        } else {
          _filteredInt = int.parse(_filterController.text);
        }

        if (idx == _filteredInt) {
          return Container();
        } else {
          return Text("\t\t\t$idx listed");
        }
      },
    ),
  ),

 

 

번호를 입력받아 filtering 하여 출력하도록 구성함

 

TextField(
    controller: _filterController,
    decoration: const InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(10)),
      ),
      labelText: "Filter number",
    ),
    onChanged: (_) {
      setState(() {
        if (_filterController.text.isEmpty) {
          _filteredInt = 0;
        } else {
          _filteredInt = int.parse(_filterController.text);
        }
      });
    },
  ),

 

아래는 전체 code block

 

import 'package:flutter/material.dart';

List<String> nameList = ["Seoul", "Paris", "NewYork"];
final _filterController = TextEditingController();
int _filteredInt = 0;

class ListViewBuilderScreen extends StatefulWidget {
  const ListViewBuilderScreen({super.key});

  @override
  State<ListViewBuilderScreen> createState() => _ListViewBuilderScreenState();
}

class _ListViewBuilderScreenState extends State<ListViewBuilderScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ListView builder Demo"),
      ),
      body: Column(
        children: [
          const SizedBox(height: 10),
          TextField(
            controller: _filterController,
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
              labelText: "Filter number",
            ),
            onChanged: (_) {
              setState(() {
                if (_filterController.text.isEmpty) {
                  _filteredInt = 0;
                } else {
                  _filteredInt = int.parse(_filterController.text);
                }
              });
            },
          ),
          const SizedBox(height: 10),
          SizedBox(
            height: 200.0,
            child: ListView.builder(
              // shrinkWrap: true,
              itemCount: 10,
              itemBuilder: (BuildContext context, int idx) {
                if (_filterController.text.isEmpty) {
                  _filteredInt = 0;
                } else {
                  _filteredInt = int.parse(_filterController.text);
                }

                if (idx == _filteredInt) {
                  return Container();
                } else {
                  return Text("\t\t\t$idx listed");
                }
              },
            ),
          ),
        ],
      ),
    );
  }
}

 

 

 

 

https://github.com/louiey-dev/flutter_my_utils/blob/main/lib/screen/listview_builder.dart