sd4beatles 님의 블로그

1. Dismissible웹을 사용할때, 손가락으로 swiping해서 제거하는 경우를 많이 보았을 것이다. 이러한 기능을 우리 어플에게도 구현을 해보도록 하자. 이럴 때,쓰는 것이 바로 Dismissble이라는 클래스인데, 이는 아래와 같다."Dragging or flinging this widget in the DismissDirection causes the child to slide out of view."Dismissible({required Key key, required Widget child,...)1) Dismissible : Widget child (required)현재 우리의 어플 같은 경우엔, 지우고 싶은 item은 ExpenseItem이며, 해당되는 index의 expense를 집어..

1. Flutter 문법1.1 setState()setState()는 framework에게 현재 객체의 상태가 바뀌었다는 것을 알려주는 method이다. 그렇지만, 여기에는 정말로 주의할 점이 있는데 이는 아래와 같다."변수의 선언 위치가 정말로 중요하다! 변수의 선언 위치에 따라서 변경이 되지 않을 수 있다" *import 'package:flutter/material.dart';class MyWidget extends StatefulWidget { const MyWidget({super.key}); @override State createState() => _MyWidgetState();}class _MyWidgetState extends State { @override Widget buil..

1. TextEditingController Class이전의 방식으로 text filed의 값을 조정하는 방법은 사실 초기변수를 선언해야하고, 그리고 user가 interface를 통해서 값을 집어넣으면,이를 수정하는 함수를 선언도 했어야 했다. 그러나, 이러한 방식은 사실 상당히 귀찮다는 것을 알수가 있다. 이러한 코드라인을 간결하게 해주는 flutter에서 제공되어지는 TexEdigingController class를 대안으로 고려해볼 수 있다."If you modify the text or selection properties, the text field will be notified and will update itself appropriately."이의 공식문서 한 문장이 이 class를 잘 대..

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을 매개..

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. 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..

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..

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..

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에 아래와 ..

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..