Flutter_09.Enums and ListView

0.금일 공부 내용.

   - enum

   - ListView

   - ListView 사용시, column 주의점

 

1. Enum: 

   - 한 변수의 값을 몇가지 옵션으로 제한하는 기능으로, 선택지가 제한적일때 사용. 

 

import 'package:uuid/uuid.dart';

const uuid = Uuid();

enum Category { food, travel, leisure, work }
// enum is used to create a fixed set of allowed values, so that we have to use one of those values when creating new expense.

class Expense {
  Expense({
    required this.title,
    required this.amount,
    required this.date,
    required this.category,
  }) : id = uuid.v4();

  // in Dart, 'Initializer Lists' can be used to initialize class properties with values that are Not received as constructor function arguments
  // Basically, when this Expense class initialized, it will be assign as an initial value to ID property

  final String id;
  final String title;
  final double amount;
  final DateTime date;
  final Category category;
}

   -Category enum을 생성하고, 해당 값으로는 food, travel, leisure, work 로 한정한다. 

 

 

2. Dummy item을 생성하고, 만들어둔 class를 import 하여 해당 class로 dummy item 생성

import 'package:flutter/material.dart';
import 'package:flutter06_expense/expenses_list.dart';
import 'package:flutter06_expense/models/expense.dart';



... 생략

class _ExpensesState extends State<Expenses> {
  final List<Expense> _registeredExpenses = [
    Expense(
        title: 'Flutter Course',
        amount: 19.99,
        date: DateTime.now(),
        category: Category.work), // need to refer enum
    Expense(
        title: 'Cinema',
        amount: 15.99,
        date: DateTime.now(),
        category: Category.leisure), // need to refer enum
  ];
  
... 생략

 

 

3.  expenses.dart에서 사용할 ExpensesList를 생성 (ListView: https://api.flutter.dev/flutter/widgets/ListView-class.html)

import 'package:flutter/material.dart';
import 'package:flutter06_expense/models/expense.dart';

class ExpensesList extends StatelessWidget {
  const ExpensesList({
    super.key,
    required this.expenses,
  });

  final List<Expense> expenses;

  @override
  Widget build(BuildContext context) {
    // ListView is used when there are many items
    // builder is used to create scrollable list  only they are visible
    return ListView.builder(
      itemCount: expenses.length, // number of length
      itemBuilder: (BuildContext context, int index) {
        return Text(expenses[index].title);
      },
    );
  }
}

 

   - ListView is used on scrolling widget.

      1. 일반적인 ListView를 명시적으로 호출하고 children 전달하는 방법 - 적은 데이터에 사용시 용이함

      2. ListView.builder builder를 사용하여 동적으로 호출 - 많은 양의 데이터 리스트에 용이함 index사용가능

         : Creates a scrollable, linear array of widgets that are created on demand.

         : ListView에 사용할 List를 정해두고, itemBuilder를 사용하여 item을 itemcount에 맞춰서 ListView를 구성

 

 

 

4. expense.dart 수정

 

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        const Text('The Chart'),
        Expanded(child: ExpensesList(expenses: _registeredExpenses)) // column inside column will cause error => use expanded to avoid issue
      ],
    ),
  );
}

   

Expanded(child: ExpensesList(expenses: _registeredExpenses)) // column inside column will cause error => use expanded to avoid issue

   - Expanded 를 사용하지 않으면, column 내에 ListView를 사용하게 되는데, 이때 error 가 발생. 

   - 이러한 에러가 생기는 이유는 ListView는 부모 위젯의 높이에 따라 높이를 맞추게 되는데 ListView의 자식 내용이 적더라도 ListView는 자신이 사용할 수 있는 최대 공간을 사용하게 됩니다. Column의 높이는 무한이기 때문에 ListView의 높이도 따라 무한이 됨으로 에러가 생기게 되는 겁니다.