Front-End/Flutter 5

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