[flutter] 버튼 클릭하여 리스트뷰 아이템 추가하기

안녕하세요,

오늘은 버튼을 클릭하여 리스트뷰에 아이템을 추가해보겠습니다. 

 

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  List<String> items = [];

  void _addText() {
    setState(() {
      items.add("아이템${items.length+1}");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('리스트뷰 아이템 추가'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    items[index],
                    style: TextStyle(fontSize: 24),
                  ),
                );
              },
            ),
          ),
        ],
      ),
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ElevatedButton(
          onPressed: _addText,
          child: Text('아이템 추가하기'),
          style: ElevatedButton.styleFrom(
            minimumSize: Size(double.infinity, 50), // 버튼을 화면 하단에 맞게 설정
          ),
        ),
      ),
    );
  }
}

 

 

시연 영상입니다.