본문 바로가기

코딩강의/expense_tracker(플러터-유데미)

 (12)
129. Adding Chart Widgets 1. 카테고리 별 총 금액을 구했으니, 이제 차트로 보여줘보자. - expenses.dart body: Column( children: [ Chart(expenses: _registeredExpenses), Expanded(child: mainContent), ], ), 1) Chart 위젯 추가 -chart.dart import 'package:expense_tracker/wigets/chart/chart_bar.dart'; import 'package:flutter/material.dart'; import 'package:expense_tracker/models/expense.dart'; class Chart extends StatelessWidget { const Chart({super.key, r..
~128. Adding Alternative Constructor Functions & Filtering Lists 1. 같은 카테고리에 있는 비용들을 합쳐보자 model에 해당 로직들을 추가해보자 - expense.dart (models 폴더) import 'package:flutter/material.dart'; import 'package:uuid/uuid.dart'; import 'package:intl/intl.dart'; final formatter = DateFormat.yMd(); const uuid = Uuid(); enum Category { food, travel, leisure, work } const categoryIcons = { Category.food: Icons.lunch_dining, Category.travel: Icons.flight_takeoff, Category.leisure: ..
126. Adding Dark Mode 1. 다크모드 추가 시스템에서 다크모드로 변경 할 시, 앱에서도 변경되도록 세팅해보자. - main.dart import 'package:flutter/material.dart'; import 'package:expense_tracker/wigets/expenses.dart'; var kColorScheme = ColorScheme.fromSeed( seedColor: const Color.fromARGB(255, 96, 59, 181), ); var kDarkColorScheme = ColorScheme.fromSeed( brightness: Brightness.dark, seedColor: const Color.fromARGB(255, 5, 99, 125), ); void main() { runApp..
~125. Using Theme Data in Widgets 1. 테마 지정하기 - 앱 전체에 반영할 테마를 세팅해보자. 기본 개념은, useMeterial3 테마를 기반으로 내가 하나씩 더 얹히는 느낌. 2. 세팅된 테마를 위젯에 적용시켜보자. - 자동적용 되는게 있고, 내가 위젯을 만들었을 때 테마에서 만든걸 가지고 올수도 있다. - main.dart import 'package:flutter/material.dart'; import 'package:expense_tracker/wigets/expenses.dart'; var kColorScheme = ColorScheme.fromSeed(seedColor: const Color.fromARGB(255, 96, 59, 181)); void main() { runApp( MaterialApp( theme: The..
121. Showing & Managing "Snackbars" 1. 리스트에 값이 없으면 text를 띄워주고, 있으면 리스트 값을 띄워주자. 2. 스낵바를 사용해서 삭제된 위젯을 다시 바로 살려보자. - expenses.dart import 'package:expense_tracker/wigets/expenses_list/expenses_list.dart'; import 'package:expense_tracker/wigets/new_expense.dart'; import 'package:flutter/material.dart'; import 'package:expense_tracker/models/expense.dart'; class Expenses extends StatefulWidget { const Expenses({super.key}); @override ..
120. Using the Dismissible Widget for Dismissing List Items 1. 리스트아이템에서 스와이프해서 항목을 삭제해보자. - expenses_list.dart import 'package:expense_tracker/wigets/expenses_list/expense_item.dart'; import 'package:flutter/material.dart'; import 'package:expense_tracker/models/expense.dart'; class ExpensesList extends StatelessWidget { const ExpensesList( {super.key, required this.expenses, required this.onRemoveExpense}); final List expenses; final void Function(Expen..
~119. Creating a Fullscreen Modal 1. 연산자 활용과 inputdata 유효성 검사를 사용해보자. 연산자 활용은 js와 동일하고, 유효성 검사는 매뉴얼하게 작성해야 되는 부분이 있다. 2. 입력된 값을 화면에 연동 시켜 보여주고 값이 입력완료 되면 모달창을 바로 닫아주자 이전에 배운 함수를 넘겨주는걸 사용하면 되고, Navigator.pop()을 사용하면 된다. 3. 모달창을 키보드에 가려지지 않게 크게 해보자. - new_expense.dart import 'package:flutter/material.dart'; import 'package:expense_tracker/models/expense.dart'; class NewExpense extends StatefulWidget { const NewExpense({super.key, ..
115. Adding a Dropdown Button 1. DropdownButton을 추가해보자. - new_expense.dart import 'package:flutter/material.dart'; import 'package:expense_tracker/models/expense.dart'; class NewExpense extends StatefulWidget { const NewExpense({super.key}); @override State createState() { return _NewExpenseState(); } } class _NewExpenseState extends State { final _titleController = TextEditingController(); final _amountController = TextEdit..
~114. Working with "Futures" for Handling Data from the Future 1. 모달을 닫는 방법, 한줄에 입력 칸 2개 만들기, DatePicker를 사용해보자. - new_expense.dart import 'package:expense_tracker/models/expense.dart'; import 'package:flutter/material.dart'; class NewExpense extends StatefulWidget { const NewExpense({super.key}); @override State createState() => _NewExpenseState(); } class _NewExpenseState extends State { final _titleController = TextEditingController(); final _amountContr..
~111. Exercise Solution 1. Textinput을 만들어보자. - new_expense.dart import 'package:flutter/material.dart'; class NewExpense extends StatefulWidget { const NewExpense({super.key}); @override State createState() => _NewExpenseState(); } class _NewExpenseState extends State { final _titleController = TextEditingController(); final _amountController = TextEditingController(); @override void dispose() { _titleController.dispos..

티스토리툴바