전체 글 20

3. Udemy Flutter 강의를 통한 Project - Expense Tracker

3.1 Setting an AppBar with a Tittleuser가 자산의 expense를 추가할 수 있도록 해주는 하나의 장치를 추가하려고 한다. 이때, 자주 쓰이는 app layout이 바로 appbar이다. 이러한 기본적인 틀을 이용하여 앱의 모양을 만들도록 하자.3.1.1 appBar 설정메인 화면에서 (+) 아이콘 클릭을 하면, 새로운 창이 아래로부터 올라오면서, user가 새로운 expense 를 담을 수 있는 기능을 구현해보도록 하자.이때, 유용하게 사용하는 것이 바로 이다.expenses.dart 파일로 이동해서, 추가적인 코드를 집어넣어 보자. scaffold 부분에서 appBar option을 사용하도록 하자. 이때, 주의할 점은 appBar option은 특정 widget을 매개..

2. Udemy Flutter 강의를 통한 Project - Expense Tracker

1. Introduction지금까지, 위의 화면을 만들었으며,  widgets을 저장할 수 있는 폴더를 생성해서 담아두도록 하자.- lib|-models|-widgets|-expense\_item.dart|-expenses\_list.dart  현재까지 우리는 아래의 class를 정의내리고 살펴보았다.   그리고 이번 시간에 우리가 정의내릴 class는 바로 Expense Item이다. 자세한 설명은 아래의 내용을 참조할 것.  Expense (일반 Class)  각 Expense가 가져야할 목록들을 지정하는 클래스      - title   - amount   - date   - category    - uuidExpenses (StatefulWidget)- State class에 현재까지 user가 ..

1. Udemy Flutter 강의를 통한 Project - Expense Tracker

1. Defining Expenses/Expense Widget Class✍️ Flutter Note StatefulWidget, StatelessWidget에 관련된 내용은 "면접질문->Flutter->생명주기 편"을 볼것.- 우리는 두개의 class를 만들예정이다. 이때, 첫번째 widget은 StatefulWidget으로 상시간의 변경을 UI에 반영해 줄 수 있는 widget이다. 다른 하나는, original widget과 소통할 수 있는 state class로 __ExpensesState라고 명시한다. 또한 StatefulWidget은 State객체를 통해서 상태의 변화를 나타내는데,- createState()만들 때 나왔던, 을 로 바꾸며 , Expenses의 constructor에는 pare..

5. <Quiz APP>을 통한 Flutter Tutorial

1. Font 설정flutter에서 제공되는 기본 font 설정이 있는데, 이를 제공받기 위해선 아래와 같은 package를 설치해야한다.flutter pub add google_fonts기존에 제공되어 지는 text style에 다채로움을 주고 싶다면, Text class에 사용되는 style에 GoogleFont를 사용해보도록 하자.원하는 font_type을 구글에서 찾은 다음, 아래와 같이 Text 옵션에 있는 style에 GoogleFonts를 사용해보도록 하자. 우리의 예시는 question_screen.dart에 있는 Text seection을 일부 변경하였다.class _QuestionsScreenState extends State{ var currentQuestionIndex=0; vo..

Front-End/Flutter 2024.11.24

4. <Quiz APP>을 통한 Flutter Tutorial: Modification to Current Style and Codes

1. Introduction|-lib|- data|- questions.dart|-models|- quiz_questions.dart|- main.dart|- question_screen.dart지난시간에 정의를 내렸던 questions_screen.dart에 있는, 데이터를 가지고 온다. 즉, 우리가 지정했던 질문,questions을 담고 있는 리스트를 가지고 오면 된다.import 'package:adv_basics/data/questions.dart';class QuestionScreen extends StatefulWidget{ const QuestionScreen({super.key}); @override StatecreateState(){ return _QuestionsScreenS..

Front-End/Flutter 2024.11.21

3. <Quiz APP>을 통한 project- Data model/ Dummy Data

lib|- data|- models|- quiz_question.dart|- questions.dart1. Create QuizQuestion Class먼저 Quiz object를 만들기 위한 class를 정의하도록 하자. 우리는 예를 들어 아래와 같은 질문지와 선택지를 만들고 싶다고 하자.Q: What are the main componetns of Blance Sheet?A: - AssetRevenueOperating IncomLiabilityExpeneses위와 같은 format을 만들려면 우리는 string과 string으로 묶인 List형태가 필요한것을 알 수 있다. 이러한 형태를 class에 정의하고 싶다면, 아래와 같이 정의를 내린다. models/quiz_question.dart에 아래와 ..

Front-End/Flutter 2024.11.17

2. <Quiz APP>을 통한 Flutter Tutorial / Render Content Conditionally, Lifting State Up

1. Introuction현재까지 너무 많은 widget code가 main에 '쏠려'있는 것을 느꼈을 것이다. 그래서, 이번 lesson에선 추가적인 dart file을 만들어서 가독성을 높히는 방법을 찾아보도록 하자.-lib|-main.dart|-start_screen.dart|-question_screen.dart|-quiz.dart2. Quiz.dartmain에 MaterialApp을 담을 수 있는 class를 만들어보자. 우리는 Quiz라는 widget class를 만들려고 하며, 이 두개의 class는 아래와 같이 작성될 수 있다.import 'package:adv_basics/question_screen.dart';import 'package:flutter/material.dart';impo..

Front-End/Flutter 2024.11.17

1. <Quiz APP>을 통한 Flutter Tutorial

1. Project Settingsflutter project를 위해선, 먼저 아래와 같은 command-line을 사용해서, project-folder를 생성하도록 하자.flutter create quiz_appquiz_app folder에서, assets/images folder를 만든 후에, 원하는 메인 image파일을 저장한다.lib/main.dart에서 flutter app을 만들기 위한, 가장 중요한 파일을 불러온다.runApp()안에 widget을 불러 넣어야 하는데,import 'package:flutter/material.dart';void main(){ runApp();}1.1 Main Widget위에 언급한데로, 우리는 main() function에 widget을 집어넣어야 한다. ..

Front-End/Flutter 2024.11.15