Do_Someting

이전 글에서페이지 이동에 관련하여 2가지 글을 작성했다. 2023.06.24 - [단기 프로젝트] - Flutter PageView 위젯 - 프로젝트 1_2 Flutter PageView 위젯 - 프로젝트 1_2 오늘은 PageView 위젯에 대해 알아보도록 하자 PageView 위젯은 여러 위젯을 페이지를 통해 구분해주는 위젯이다. children 파라미터 안에 위젯들을 넣어주면, 앱에서 슬라이드를 통해 페이지 넘기듯이 ti-project-11.tistory.com 2023.06.26 - [단기 프로젝트] - Flutter NavigationBar - 프로젝트 1_2 Flutter NavigationBar - 프로젝트 1_2 저번 글에서는 페이지 간의 연결을 위해 PageView Widget을 이용했다..

이번 글에서는 저번 글에서 살펴 본 ImagePicker를 이용해 비디오를 불러오고 재생하는 앱을 만들어본다. ImagePicker에 대해선 저번 글을 살펴본다. 2023.06.30 - [단기 프로젝트] - 갤러리에서 이미지를 선택하는 flutter ImagePicker (프로젝트 1_2 ) 갤러리에서 이미지를 선택하는 flutter ImagePicker (프로젝트 1_2 ) 이번에는 갤러리에서 이미지를 선택하는 ImagePicker에 대해 알아본다. 기능은 다음과 같다. 1) 홈 화면에서 floating action button을 클릭하면 선택할 수 있는 갤러리로 넘어간다. 2) 갤러리에서 사진을 ti-project-11.tistory.com 우선 pubspce.yaml에서 video_player를 추..

이번에는 갤러리에서 이미지를 선택하는 ImagePicker에 대해 알아본다. 기능은 다음과 같다. 1) 홈 화면에서 floating action button을 클릭하면 선택할 수 있는 갤러리로 넘어간다. 2) 갤러리에서 사진을 선택하면 이미지를 띄우는 화면으로 넘어간다. 다음은 완성한 앱의 화면이다. 시작화면은 아직 이미지를 선택하지 않은 상태이다. 여기서 아래 버튼을 클릭하면 갤러리 화면으로 넘어간다. 갤러리 화면에서 사진을 클릭하면 화면에 사진이 뜬다. 이 상태에서 버튼을 다시 누르면 다른 이미지를 선택할 수 있다. 이제 앱을 만들어보도록 하자 우선 pubspec.yaml로 들어가서 dependencies 안에 image_picker를 추가해 준다. 이후에 android/app/src/main 폴더에..

저번 글에서는 페이지 간의 연결을 위해 PageView Widget을 이용했다. 이번 글에서는 TabBarView와 BottomNavigationBar 위젯을 이용해 페이지 간의 이동을 구현해 본다. 먼저 TabBarView와 BottomNavigationBar에 대해 알아본다. 1. TabBarView TabBarView는 각각의 Tab에 해당하는 화면을 지정해 주는 위젯이다. 여기서 Tab은 일종의 버튼이라고 이해하면 편하다. TabBar는 여러 개의 tab이 모여있는 위젯이다. TabBar와 tab, 그리고 TabBarView에 대한 관계를 나타내면 다음과 같다. Tab이 여러 개 모여있는 위젯을 TabBar라고 하고, 각각의 Tab은 하나의 페이지와 연결이 되어 있다. TabBarView는 Tab..

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

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

이번 글에서는 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..

이번 글에서는 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 파라미터 ..

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

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