플러터 9

Flutter 공부하기 - Navigator 추가학습 (Initial Route 및 routes 관련)

지난 번에 공부했던 페이지 이동을 위한 Navigator에 추가적으로 InitialRoutes와 routes를 통해 여러 페이지를 동시에 관리해야할 경우에 사용하는 방법을 공부했다. 여러 페이지를 동시에 이동하기 위해서는 MaterialApp 내에서 home 을 통해서 관리하는 것이 아니라, home argument가 아닌 initialRoutes를 통해 지정해주어야 한다. MaterialApp의 Argument 중에서 home 과 initialRoutes를 동시에 지정하면 에러가 발생할 수 있으니 유의하자. initialRoute를 지정하게 되면 routes도 역시 따라와야한다. routes의 자료형은 Map이다. string과 Widget builder가 입력되어야 한다. 각 페이지 별로 '/' , ..

Flutter 공부하기 - 비동기 프로그래밍 (Future, Async, Await) 기초 및 예제 #1

다트와 플러터도 마찬가지로 비동기 프로그래밍을 지원합니다. 오히려 다른 언어보다도 더 비동기프로그래밍이 중요할 것입니다. 앱이 주 목적이므로 대부분의 코드가 서버와 통신을 주고받는 비동기일 것이기 때문입니다. 오늘은 그래서 비동기 프로그래밍을 가능하게하는 Future, Async 그리고 Await를 학습해봤습니다. 플러터에서는 비동기 프로그래밍을 위해서 기본적으로 Future 를 사용합니다. 플러터를 지원하는 다트 역시 기본적으로는 순차적으로 코드를 실행하게 됩니다. 따라서 accessData에 Duration 타입의 변수를 선언한 뒤 3초의 지연을 발생시키면 showData함수를 실행할 때 accessData 함수를 실행하고 3초 뒤 fetchData 함수를 실행하게 됩니다. 이 경우에는 컴퓨터의 자원..

Flutter 공부하기 - Navigator 위젯을 통해 화면 전환하기 #1

오늘은 Navigator 위젯을 통해 화면 전환하는 방법을 공부해봤습니다. main.dart를 통해서 첫 main_page 내에 있는 MainPage 위젯을 불러오도록 했습니다. 페이지별로 나눠서 관리하는 습관을 만들어두는게 나중에 복잡한 앱을 만드는데 있어서 도움이 될 것 같아 단순한 테스트라도 여러개의 파일로 나눠서 하도록 노력하고 있습니다. main_page.dart에서는 second_page.dart에 있는 위젯을 불러오기 때문에 import를 해줍니다. MainPage 위젯을 Stateless 위젯으로 선언해주고 간단하게 앱바와 바디 내에는 ElevatedButton 하나를 생성해둡니다. 그리고 onPressed 함수 내에 Navigator.push 를 통해 second_page 파일 내에 있는..

Flutter 공부하기 - List View 기본개념 및 예제 실습 #1

버튼을 통해서 화면에서 클릭을 하고 컨테이너를 통해서 한 화면을 구성하고 있는 앱들도 많지만 최근에 많은 앱들은 손가락을 드래그해서 화면을 제어하는 구성을 많이 사용하고 있는 것 같습니다. 구글에서 리스트뷰라고 치면 아래와 같은 이미지들이 표기가 되네요. 이런 것을은 수직 방향으로 내리는 리스트뷰 (ListView)라고 볼 수 있습니다. 그렇다면 가로로 구성할 수있는 리스트뷰 (ListView)는 없을까요? 당연히 없을리가 없죠. 아래와 같이 구성되는 가로로 드래그해서 보고싶은 내용을 확인하는 기능도 리스트뷰 (ListView)로 구현합니다. 그럼 한번 구현을 해보도록 하겠습니다. HTML 삽입 미리보기할 수 없는 소스 초심플한 코드를 사용해서 리스트뷰를 만들어 봤습니다. 그 다음으로는 가로로 스크롤을 ..

Dart 공부하기 - 클래스 - 상속 개념 그리고 구현해보기 #1

상속 역시 객체지향에서 중요한 부분을 차지하고 있습니다. 상속이 없으면 이런 저런 클래스들을 다 만들어야하고 중복되는 기능들을 반복적으로 구현해야할 것입니다. 간단히 말해서 상속은 집합관계라고 생각하시면 될 것입니다. 부분집합이 딱이겠네요. 사람이 있고, 남자가 있고, 어린 남자아이가 있다고 쳐보면 어린 남자아이는 남자가 포함하고 있고, 남자는 사람이 포함하는 관계일 것입니다. 다른 예제로 학생이 있고, 사람이 있다라고 치면 학생은 사람에 포함될 것입니다. 따라서 사람의 기본적인 특성을 하나의 클래스로 구현해둔다면 학생이나, 남자, 어린아이들과 같은 클래스를 구현할 때 사람의 클래스를 상속하면 반복되는 일이 줄어들지 않을까요? 이런 개념을 다트 코드로 한번 구현해보도록 하겠습니다. 아까전에 만들어 둔 P..

Dart 공부하기 - Class - 생성자 구현해보기 #1

클래스는 초보자에서 중급자로 넘어가기 위해서 반드시 넘어야 할 산이라고 볼 수 있을 것 같습니다. 아직도 제대로 클래스를 모르기 때문에 Dart 언어에서 클래스를 어떻게 구현하는지 공부해봤습니다. 다트언어 역시도 다른언어와 OOP 관점에서 크게 다르게 구현되지 않습니다. 우선 아래와 같이 기본적인 클래스를 구현해봤습니다. Name이라는 클래스를 만들어줬구요. 변수로 first와 last의 String 변수를 설정해놓고 생성자에 this.first, this.last를 괄호 내에 입력하여 간소하게 생성자를 구현했습니다. 그렇다면 this라는 녀석은 무엇일까요? this라는 녀석을 이해하려면 클래스와 인스턴스를 구분해줘야 하는데요. 여기서 Name은 Class라고 볼 수 있고, myname은 myname이라..

Dart 공부하기 - Collection - 리스트 (List) 설명 및 기본 메서드

다트언어의 컬렉션은 다수의 테이블을 처리할 수 있는 자료구조입니다. 하나의 데이터가 아닌 여러개의 데이터를 효율적으로 처리할 수 있는 구조라고 생각하면 편하십니다. 다트에는 아래와 같이 세 가지의 컬렉션이 존재합니다. 1) List: 데이터의 순서가 있고 중복을 허용하는 컬렉션 2) Set: 데이터의 순서가 없고 중복도 허용하지 않는 컬렉션 3) Map: 키 (Key)와 값 (Value)로 구성되어 있고 키는 중복이 안되지만 값은 중복이 되는 컬렉션 오늘은 List 에 대해서 공부해봤습니다. 기본 리스트 생성 일단 리스트를 두 개 만들어봤구요. list1은 Dynamic으로 설정해서 String, Boolean, Int 변수들을 집어 넣었습니다. 그리고 프린트를 해봤더니 리스트로 출력이 됩니다. 그 다음..

플러터 - Dart 를 학습하기위한 Dart Pad

플러터는 Dart 언어로 작동을 하게 됩니다. 다트는 구글이 멀티플랫폼 상에서 동작되도록 하는 앱을 위해 디자인된 프로그래밍 언어입니다. 2011년 10월에 공개되었고 C언어의 문법과 거의 동일하며 다른 언어들의 장점들을 많이 차용한 언어입니다. 다트언어는 플러터에서 채택한 언어이며 따라서 모바일, 데스크탑, 서버, 웹 앱 등을 개발하는데 사용될 수 있습니다. 2021년 4월 기준 최신 버전은 2.12.2라고 합니다. 자세한 내용은 나무위키링크에서 찾아볼 수 있습니다. https://namu.wiki/w/Dart(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D%20%EC%96%B8%EC%96%B4) 이러한 다트를 연습하기 위해서는 여러방법이 있는데요. VS Code를 설..

플러터 2022.04.18

플러터 - 설치 시 기본 요구사항 및 GIT 설치

플러터를 설치하기 위해서는 아래와 같은 사양이 필요합니다. 1. 8GB의 메모리에서 작동되며 선호되는 메모리 용량은 16GB 2. 50GB 하드디스크 여유공간 3. SSD이면 훨씬 좋음 4. 2GHz 이상의 CPU 위 조건은 정상적인 작동을 위해서 필요되는 것이며, iOS 앱을 만들기 위해서는 맥북이 필요합니다. 다만, 빠른 빌드를 위해서는 당연히 PC사양이 높으면 높을수록 좋습니다. 앱을 처음 개발하시는 분들께서는 Flutter 뿐만 아니라 GIT 도 설치해두시는게 좋으실 것 같습니다. GIT 링크 (아래주소참조) https://git-scm.com/download/win Git - Downloading Package Download for Windows Click here to download the..

플러터 2022.04.18