[Linux/Flutter] 플러터 리스트 박스 생성 및 아이템 추가 예제(ListView.builder)

 

목차

1. 리눅스 Flutter GestureDetector 활용 텍스트 클릭 이벤트 처리 예제 이전 포스팅 링크 및 설명
2. 리눅스 Flutter ElevatedButton 활용 버튼 생성 예제 이전 포스팅 링크 및 설명
3. 리눅스 Flutter StatelessWidget 상태 없는 뷰에서 간단한 Text 위젯 출력 예제 이전 포스팅 링크 및 설명
4. 리눅스 Flutter 리스트 박스 생성 예제(ListView.builder)
5. 리눅스 Flutter 버튼 클릭시 리스트 박스에 아이템 추가 예제(ElevatedButton onPressed)

 

 

 

 

 

 

 

 

 

리눅스 Flutter GestureDetector 활용 텍스트 클릭 이벤트 처리 예제 이전 포스팅 링크 및 설명

이전 포스팅에서는 리눅스 Flutter 앱에서 텍스트 클릭 이벤트를 처리하는 방법을 다뤘습니다. GestureDetector를 활용하여 텍스트 위젯에 클릭 이벤트를 추가하는 방법과 이를 구현하는 예제를 상세히 설명했습니다. 이전 포스트를 참고하시면 텍스트 클릭 이벤트 처리에 대한 자세한 예시를 확인하실 수 있습니다. 특히 버튼 클릭 이벤트 처리 방법은 아는데 Text 위젯 클릭 이벤트 처리 방식은 아직 모르셨다면 아래의 포스팅을 참고하여 학습해주세요.

 

2024.01.26 - [Flutter] - [Linux/Flutter] 플러터 텍스트 클릭시 색상 변경 예제(GestureDetector)

[Linux/Flutter] 플러터 텍스트 클릭시 색상 변경 예제(GestureDetector)

 

 

 

 

 

 

 

리눅스 Flutter ElevatedButton 활용 버튼 생성 예제 이전 포스팅 링크 및 설명

다음으로 이전 포스팅에서는 리눅스 Flutter 앱에서 버튼을 생성하는 방법을 다루었습니다. ElevatedButton 위젯을 활용하여 버튼을 생성하고 버튼에 클릭 이벤트를 추가하는 방법을 자세히 설명했습니다. 이전 포스트를 참고하시면 버튼 생성 및 클릭 이벤트 처리에 대한 예시를 자세히 확인하실 수 있습니다. 오늘 예제에서도 버튼 이벤트를 포함하고 있습니다. ElevatedButton으로 클릭 이벤트 처리 방식이 궁금하시다면 아래 링크를 참고해주세요.

 

2024.01.25 - [Flutter] - [Linux/Flutter] 플러터 버튼 UI 추가 및 클릭 이벤트 예제(ElevatedButton)

[Linux/Flutter] 플러터 버튼 UI 추가 및 클릭 이벤트 예제(Flutter Click Event)

 

 

 

 

 

 

 

리눅스 Flutter StatelessWidget 상태 없는 뷰에서 간단한 Text 위젯 출력 예제 이전 포스팅 링크 및 설명

마지막으로 이전 포스팅에서는 리눅스 Flutter 앱에서 상태가 없는 뷰에서 간단한 Text 위젯을 출력하는 예제를 다뤘습니다. StatelessWidget을 활용하여 상태가 없는 뷰를 생성하고, Text 위젯을 사용하여 텍스트를 출력하는 방법을 상세히 설명했습니다. 이전 포스트를 참고하시면 상태 없는 뷰에서 Text 위젯을 출력하는 예시를 자세히 확인하실 수 있습니다. 특히 StatelessWidget은 상태 변화를 줄 수 없기때문에 버튼 클릭 등에서 처리하는 setState 함수 호출이 불가능합니다. StatelessWidget 예제가 궁금하시다면 아래 링크를 참고해주세요.

 

2024.01.24 - [Flutter] - [Linux/Flutter] 플러터 Hello World 출력 간단 앱 만들기 예제(StatelessWidget 및 Text 문자열 생성)

[Linux/Flutter] 플러터 Hello World 출력 간단 앱 만들기 예제(StatelessWidget 및 Text 문자열 생성)

 

 

 

 

 

 

 

리눅스 Flutter 리스트 박스 생성 예제(ListView.builder)

아래는 리눅스 Flutter 앱에서 리스트 박스를 생성하는 예제입니다. 리스트 박스는 여러 아이템을 표시하고 스크롤할 수 있는 UI 입니다. 플러터에서는 ListView.builder를 사용하여 이러한 리스트 박스와 버튼, 클릭 이벤트 등을 만들 수 있습니다. 이 예제를 활용하여 아래 예제에서는 아이템을 동적 추가해보도록 하겠습니다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  List<String> _items = []; // List 선언

  @override
  Widget build(BuildContext context) {
    _items.add('hello 1');
    _items.add('hello 2');
    _items.add('hello 3');
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter List Box'),
        ),
        body: Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: _items.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_items[index]),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

Flutter ListBox에 3개의 문자열 아이템이 추가된 모습

 

 

 

 

 

 

리눅스 Flutter 버튼 클릭시 리스트 박스에 아이템 추가 예제(ElevatedButton onPressed)

아래는 리눅스 Flutter 앱에서 버튼을 클릭할 때 리스트 박스에 아이템을 추가하는 예제입니다. 버튼을 클릭하면 리스트 박스에 새로운 아이템이 추가되는 기능을 구현할 수 있습니다. ElevatedButton 버튼에서 onPressed 이벤트를 통해 ListBox가 가리키고 있는 List 아이템에 문자열을 추가합니다. 또한 상태를 계속 변화하기 때문에 StatefulWidget을 사용하여 구성해야합니다. 위 예제에서는 StatelessWidget 이기 때문에 동적으로 아이템을 추가하여도 화면이 변경되지 않습니다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<String> _items = []; // 리스트 박스 아이템

  void _addItem() {
    // 버튼 클릭 시 리스트 박스에 아이템 추가
    setState(() {
      _items.add('새로운 아이템');
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter 리스트 박스 예제'),
        ),
        body: Column(
          children: [
            ElevatedButton(
              onPressed: _addItem, // 버튼 클릭시 아이템 추가 함수 호출
              child: Text('아이템 추가'),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: _items.length, // _items 리스트의 길이로 itemCount 업데이트
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(_items[index]),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

Flutter에서 버튼을 클릭할 때 마다 setState를 통해 리스트 박스 아이템을 추가하고 새로고침 한다.