전체 글 52

Flutter PageView 위젯

오늘은 PageView 위젯에 대해 알아보도록 하자 PageView 위젯은 여러 위젯을 페이지를 통해 구분해주는 위젯이다. children 파라미터 안에 위젯들을 넣어주면, 앱에서 슬라이드를 통해 페이지 넘기듯이 위젯들을 볼 수 있다. 예제로써는 이전 글에서 만든 카운터 앱을 좀 더 발전시킨 버전을 사용한다. 2개의 페이지로 구성되며 첫 번째 페이지는 화면에 counter app이라고 쓰여 있는 페이지이고, 두 번째 페이지는 저번 글에서 만든 카운터 페이지이다. 카운터에 대한 내용은 저번 글을 참고하자 2023.06.24 - [단기 프로젝트] - 프로젝트 1_2. Flutter StatefulWidget 프로젝트 1_2. Flutter StatefulWidget 이 글에서는 flutter의 statefu..

플러터 (flutter) 2023.06.24

Flutter Stateful 위젯 (StatefulWidget)

이 글에서는 flutter의 statefulwidget에 대해 알아본다. 지금까지는 flutter에 대해 알아보면서 StatelessWidget만을 사용해왔다. StatelessWidget은 상태가 없는 위젯으로 한 번 화면에 띄워지면 다시 바뀌지 않는 위젯이다. (즉, 단 한번만 build가 된다. 절대로 재실행되지 않는다.) 이와는 반대로 StatefulWidget은 상태를 가진다. 앱이 실행되면서 변수 값 등이 바뀌면서 상태가 바뀌면 StatefulWidget은 그에 맞게 변화한다. 상태가 바뀌어 있는 상태를 dirty 상태라고 하고 이 상태가 되면 StatefulWidget은 build()를 다시 실행한다. 그러고 나면 clean 상태가 된다. 이 상태에서 widget이 변경되거나, state가 ..

플러터 (flutter) 2023.06.24

Flutter WebView 위젯

이번 글에서는 flutter의 webview를 이용해 홈페이지를 웹 앱으로 만들어본다. 프로젝트 결과는 다음과 같이 나온다. 우선 flutter 프로젝트를 생성하고 android/app/main/res 폴더 안에 있는 AndroidManifest.xml로 들어간다. 그리고 그 안에 다음 코드를 추가해준다. ... 이 코드는 어플리케이션이 휴대폰의 인터넷에 접속할 수 있도록 허용해주는 코드이다. 다음으로 pubspec.yaml로 들어간다. 이 파일 안의 dependencies에 다음과 같이 코드를 추가시켜준다. 이 글을 쓰는 시점에서 가장 최신 버전인 4.2.2 버전을 쓴다. dependencies: flutter: sdk: flutter # The following adds the Cupertino Ic..

플러터 (flutter) 2023.06.23

Flutter와 위젯(Widget) (2)

이번 글에서는 Container 위젯과 위젯을 배치하는 방법에 대해 학습한다. 여러 위젯을 넣기 위한 테스트 코드는 다음과 같다. import 'package:flutter/material.dart'; void main() { runApp(const Example()); } class Example extends StatelessWidget{ const Example({Key? key}):super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: //이곳에 테스트 할 코드를 넣는다. ), ), ); } } Center 안에 있는 child 파라미터 ..

플러터 (flutter) 2023.06.23

Flutter와 위젯(Widget)

1. 위젯 플러터에서 모든 것은 위젯으로 구성된다. 화면에 나타나는 텍스트부터 버튼, 상태까지 모든 것을 위젯으로 구현한다. 위젯은 다른 위젯을 자식으로 받을 수 있고, 이러한 과정을 통해 일종의 위젯 트리를 만들어낸다. 위의 예제를 보면 위젯1 밑으로 3개의 위젯이 있고, 그 밑에도 위젯이 있는 것을 확인할 수 있다. 위젯 2,3,4는 위젯1의 자식 위젯이고, 위젯 5,6,7은 각각 위젯 2,3,4의 자식위젯이다. 이렇듯 flutter는 위젯이 서로 모여 프로그램이 만들어진다. 2. 여러 종류의 위젯 앞서 여러 위젯이 모여 하나의 프로그램이 만들어진다고 했다. 그런 만큼 flutter에는 많은 종류의 위젯이 있다. 지금부터는 여러 종류의 위젯에 대해 살펴보도록 한다. 위젯에 대한 내용을 공부하기 위해 ..

플러터 (flutter) 2023.06.21

Flutter 개발 환경 구축하기

저번 글까지는 flutter를 배우기 위해 필요한 dart 언어에 대해서 배워보았다. 지금부터는 배운 dart 언어를 기반으로 flutter에 대해 살펴볼 것이다. 플러터에 대해 이런저런 이야기를 하는 것 보다 바로 코드를 실습하는 것이 이해하는 데 더 도움이 될 것 같다. 먼저 플러터 개발 환경을 구축하고 다음 글에서 flutter의 위젯에 대해 배워본다. 1. Flutter 개발 환경 Flutter 개발에는 flutter SDK와 개발 환경이 필요하다. 이 곳에서는 개발 환경으로 'Android studio'를 사용한다. 우선 안드로이스 스튜디오를 설치하기 위해 다음 사이트에 들어간다. https://developer.android.com/studio Download Android Studio & A..

플러터 (flutter) 2023.06.19

Dart의 동기와 비동기 코딩

지금까지는 코드가 순서대로 진행되는 동기 프로그래밍을 알아보았다. 이제부터는 코드의 순서가 달라질 수 있는 비동기 프로그래밍에 대해 알아본다. 1. Future Future는 미래에 어떠한 일을 하거나 값을 받아올 것임을 의미한다. void main() { return_String(); //Future.delayed를 면저 실행 print("1"); print("2"); print("3"); } void return_String() { //Future.delayed 함수는 Duration을 통해 실행 시점을 제어할 수 있다. Future.delayed(Duration(seconds: 2), () { print("Future String"); }); } 실행결과를 보면 return_String 함수를 먼저..

플러터 (flutter) 2023.06.16

Dart 클래스 (2) - 프로젝트1_1

저번 글 2023.06.14 - [단기 프로젝트] - 프로젝트1_1. Dart의 기본 (3) - Class Dart Class - 프로젝트1_1 1. 클래스에 관하여 객체지향 프로그래밍은 코드를 여러 객체로 나누고 그 객체를 모아 프로그래밍을 구성한다. 여기서 객체는 하나의 역할을 수행하는 코드의 모음이라고 생각하면 된다. 클래 ti-project-11.tistory.com 이번 글에서는 저번 글에 이어서 class에 대해 좀 더 알아본다. 추상 클래스와 프라이빗 변수, 제네릭과 스태틱, 케스케이드에 대해 살펴본다. 이전 포스트에 했었던 코드를 다시 보고 시작하도록 한다. //부모 클래스 class person { String name; String major; List lecture; person(th..

플러터 (flutter) 2023.06.16

Dart Class - 프로젝트1_1

1. 클래스에 관하여 객체지향 프로그래밍은 코드를 여러 객체로 나누고 그 객체를 모아 프로그래밍을 구성한다. 여기서 객체는 하나의 역할을 수행하는 코드의 모음이라고 생각하면 된다. 클래스는 하나의 객체를 구성하는 요소를 표현한 것이다. 이렇게만 말하면 이해하기 힘드니 예시하나 들어본다. 대학에서 교수와 학생의 정보를 관리하는 프로그램을 만들려고 한다. 교수의 경우 이름, 전공, 직책, 강의하는 과목을 관리하고, 강의를 새로 등록하는 함수와 강의를 확인하는 함수를 만들려고 한다. 학생의 경우 이름, 전공, 학년, 수강 중인 수업을 관리하고, 수업을 새로 등록하는 함수와 수업을 확인하는 함수를 만든다. 이 때 우리는 교수 클래스와 학생 클래스를 만들어 사람이 들어오거나 나갈 때 큰 어려움 없이 추가할 수 있..

플러터 (flutter) 2023.06.14

Dart의 기본 (2) - 프로젝트1_1

1. 루프문 루프문은 지정된 코드를 여러 번 돌린다. 똑같은 코드를 반복해서 실행해야 할 경우 쓴다. 1.1 for void main() { for (int i = 0; i < 5; i++) { print("i : $i"); } } Dart의 for문은 다음과 같이 이루어져 있다. for( 초기화; 조건식; 연산식) { //실행할 코드 } 초기화에서는 for문 안의 조건식에 사용할 변수를 초기화시킨다. 위 예제에서는 'int i = 0' 부분에 해당한다. 조건식은 for문 안에 있는 코드를 계속 실행할 지 결정하는 코드이다. 조건이 맞다면 중괄호 안에 있는 코드를 계속 실행한다. 연산식은 한 번 실행하고 나서 초기화에서 초기화시킨 변수에 변화를 주는 부분이다. for문이 돌아가는 순서는 다음과 같다. 1..

플러터 (flutter) 2023.06.11