Flutter_10. Custom List & Formatting Data

0. 공부내용

   - Custom List 만들기 (Spacer 사용)

   - Icons 와 Date Format을 사용해 모델 업데이트

 

1. Custom List 만들기 

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

class ExpenseItem extends StatelessWidget {
  const ExpenseItem({super.key, required this.expense});

  final Expense expense;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 30),
        child: Column(
          children: [
            Text(expense.title),
            const SizedBox(height: 4),
            Row(
              children: [
                Text('\$${expense.amount.toStringAsFixed(2)}'), // two decimal point
                const Spacer(), // tell flutter to take all the space it can get
                Row(
                  children: [
                    Icon(categoryIcons[expense.category]),
                    const SizedBox(width: 8),
                    Text(expense.formattedDate)
                  ],
                ),
              ],
            )
          ],
        ),
      ),
    ); // used for styling
  }
}

<expense_item.dart>

   -  Space :

      -> Row / Column과 같은 Flex 공간에서 위젯과 위젯 사이의 가격을 조정하는 사용 

      -> mainAxisAlignment에 설정한 속성을 싸그리 무시

 

   - Expense_list 내용을 아래 내용으로 변경

return ListView.builder(
  itemCount: expenses.length, // number of length
  itemBuilder: (BuildContext context, int index) {
    return ExpenseItem(expense: expenses[index]);
  },
);

 

 

2 . 기존에 사용되던 expense model 변경

 

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:uuid/uuid.dart';
import 'package:intl/intl.dart';

final formatter = DateFormat.yMd();
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.

const categoryIcons = {
  Category.food: Icons.lunch_dining,
  Category.travel: Icons.flight_takeoff,
  Category.leisure: Icons.movie,
  Category.work: Icons.work
};

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;


  String get formattedDate {
    return formatter.format(date);
  }


}

   - 변경점

      -> categoryIcons obj로 생성하여 받는 값에 따라 해당되는 icon 노출

      -> formattedDate getter를 생성해, intl 이라는 3rd pary library date format 잡아준다(flutter pub add intl 로 설치 후, 사용 )

 

- 위에 작성한 expense_item 내에 아래와 같이 import 후 사용가능하다 

children: [
  Icon(categoryIcons[expense.category]),
  const SizedBox(width: 8),
  Text(expense.formattedDate)
],