728x90
Flutter 검색 결과
8 개의 검색 결과가 있습니다.
mobile

vscode를 이용한 flutter 작성

flutter sdk 설치 및 프로젝트 생성/실행 노트북을 갈아엎고, 미국에 오고, 한동안 코딩에 손을 못 대다가 다시 시작하게 되면서 이번엔 (flutter에 조금 익숙해졌다고, 그리고 chatgpt를 믿고) vscode를 ide로 사용해서 flutter 코드를 작성해보기로 했다. Flutter 공식 페이지에서 sdk 3.10.1을 다운받아서 시작했다. 그리고 한주 지난 지금 이미 sdk 3.10.2 버전이 릴리즈 되어있다. 해당 압축파일을 특정 폴더에 풀어놓고 (나의 경우엔 c:\src\flutter_3.10) 프로젝트 폴더를 생성할 위치에서 아래 명령어를 입력하면 프로젝트 폴더가 생성된다. $ c:/src/flutter_3.10/bin/flutter create mobile 이후 Run → Star..

2023. 5. 30. 11:27
mobile

[flutter] if문 사용법, 퀴즈 결과 보여주기

0. 들어가기 -. if 문을 이용한 body 표현 예제 -. 퀴즈 예제에서 클릭한 답 저장 및 최종 점수 출력 예제 1. if 문 사용 -. body에선 삼항연산자를 이용해서 if문 사용이 가능하다. -. 아래와 같이, 퀴즈 목록 (dndAlignment) 의 수를 초과하면 "quiz finished"가 출력되도록 앱을 수정했다. body: dndAlignment.length < questionIndex ? const Text("quiz finished") : Column( ... ) -. 결과 출력을 위한 Widget을 만들어서 넣자. 동일한 출력이 나온다. main.dart import './result.dart'; ... body: dndAlignment.length < questionIndex ..

2022. 9. 25. 23:07
mobile

[flutter] json object + map (2)

0. 들어가기 -. 앞 포스트 대비 퀴즈 목록의 형태를 바꿨다. 작업하다보니 이래야 할거같더라.. -. map 함수를 이용해서 다수의 widget을 추가해본다. 1. json object 구조 변경 -. DnD 성향 테스트를 예시로, 퀴즈 답변을 기존의 json 구조에서 list로 변경했다. 출처링크 -. 코드로 바로 보자. "answers" key 내부를 {"답변번호": "답변내용"} 의 dict 형식에서 -> [{"answerNum": "답변번호", "answerText": "답변내용"}]의 List 형식으로 변경함. 기존 형식 Map dndAlignment = { "1": { "question": "Family elders are expressing disapproval of you to the r..

2022. 8. 14. 14:10
mobile

[flutter] json object + map

0. 들어가기 -. flutter에서 json object를 사용해본다. -. map 함수를 이용해서 다수의 widget을 추가해본다. 1. json object를 이용한 퀴즈 출력 -. json 형태로 이루어진 퀴즈를 작성해보자. DnD 성향 테스트를 예시로 작성해봤다. 출처링크 1) json object 선언 -. 파이썬의 dict 형에 너무 익숙해져서 js에서 json을 사용하려니 매우 힘들었다. Map으로 구조를 만들어가면서 선언해야 한다.. //dnd Alignment object 선언 Map dndAlignment = { "1": { "question": "Family elders are expressing disapproval of you to the rest of the family. Do..

2022. 8. 13. 20:36
mobile

[flutter] widget 모듈화 + 스타일링

0. 들어가기 -. 플러터 widget을 모듈화 해서 간편하게 이용해 본다. -. 모듈화 된 김에 조금 더 이쁘게(복잡하게) 꾸미고 여러번 사용해 보자. 1. widget 모듈화 -. 앞에서 만들었던 question 위젯을 모듈화해보자. Vue랑 비슷하게 하면 되는거같다. -. 우선 text로 출력하던 부분만 먼저 Question 모듈로 변경. import 'package:flutter/material.dart'; class Question extends StatelessWidget { String question; Question(this.question); @override Widget build(BuildContext context) { // TODO: implement build return Te..

2022. 8. 8. 22:21
mobile

[flutter] flutter 위젯(widget)

0. 들어가기 -. 고정된 화면 표현을 하기 위한 stateless 위젯 사용방법. 1. Hello World -. 어느 언어나 그렇듯, 시작은 Hello World! 로. -. Flutter는 화면의 각 구성요소가 widget으로 이루어져 있댄다. home에 Text widget을 넣어 텍스트 표현을 할 수 있다. import 'package:flutter/material.dart'; // flutter 기본 라이브러리 void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { Widget build(BuildContext context) { return MaterialApp(home:Text('Hello World!'),); // T..

2022. 6. 26. 11:40