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 설정expenses.dart 파일로 이동해서, 추가적인 코드를 집어넣어 보자. scaffold 부분에서 appBar option을 사용하도록 하자. 이때, 주의할 점은 appBar option은 특정 widget을 매개변수로 받게되어있는데, 이때 우리는 AppBar를 사용하도록 하겠다.@overrideWidget build(BuildContext context){ return Scaffold( ap..

1. Introduction지금까지, 우리는 위의 화면을 만들었으며, 우리는 지금까지 widgets을 저장할 수 있는 폴더를 생성해서 담아두도록 하자.- lib|-models|-widgets|-expense\_item.dart|-expenses\_list.dartexpense_item의 widget class는 아래같이 정의내려 진다.import 'package:flutter/material.dart'; import 'package:expense\_tracker/models/expense.dart';class ExpenseItem extends StatelessWidget{ const ExpenseItem(this.expense,{super.key});final Expense expense;@over..

1. Defining Expenses/Expense Widget Class간략하게 StatefulWidget를 정의할 class를 만든다. 현재 step에선 부가적인 기능이 들어가기 전이라 Scaffold(앱의 뼈대를 위한 구성요소를 제공하는 Widget)에 임시 Text Widget을 집어넣는다.import 'package:flutter/material.dart';class Expenses extends StatefulWidget{ const Expenses({super.key}); @override StatecreateState(){ return _ExpensesState(); }}class _ExpensesState extends State{@overrideWidget build(Bui..

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