PDA는 Personal Digital Assistant, 즉 개인정보단말기를 의미한다. 당시에는 Handheld PC라는 HPC로도 많이 불렸던 것 같다. HP에서 나온 제품들이 대거 히트를 쳤고 그에 따라서 CDMA 칩을 내장한 PDA Phone이라는 형태를 국내 벤쳐들이 개발을 하기 시작했다. 내가 가지고 있는 PDA는 텔레웍스라는 곳에서 만든 것이고 개발시료이다. 왜냐하면 당시에 내가 근무했던 곳이기 때문이다. 기업부설연구소 소장이 내 직함이었던 것으로 기억을 한다. 거의 20여년 동안 잠자고 있던 놈을 깨워 전원을 넣어봤다. 모델명 TELEO와 Windows Embedded라는 시작 화면을 보여준다. 이 Windows Embedded는 기사를 찾아보니 WinCE 3.0 이었다. 참 제약이 많은 ..

Layout 지금까지 잘 따라왔고, 여기까지 도달을 하셨다면 이해가 안가는 부분이 꽤 많으셨을 것입니다. 자세한 설명도 없이 동작하는 앱을 다 따라서 왔기 때문에 얻은 것도 있겠지만 어렵다는 생각을 많이 했을 것입니다. 다시 기초로 돌아와 레이아웃을 살펴보면서 조금 더 플러터를 이해해 보도록 하겠습니다. 플러터에서 앱의 레이아웃을 결정짓는 것은 위젯들입니다. 플러터의 모든 것은 위젯이라고 해도 틀린말은 아닐 것입니다. 위젯들은 UI를 만드는데 사용되는 클래스이며, UI 요소와 레이아웃을 구성되는데 사용이 되고 간단한 위젯들이 모여서 복잡한 위젯들을 만들기도 합니다. 플러터로 만든 앱들에서 볼 수 있는 이미지들, 아이콘들 그리고 텍스트들은 모두 위젯입니다. 또한 눈에 보이지 않는 위젯들도 있습니다. 행, ..

VS코드에서 GitHub 사용하기 스텝 1에서 만들었던 startup_namer의 소스코드를 GitHub에 올려보도록 하겠습니다. GitHub에 접속을 하고 다음과 같이 새 레포지토리를 만듭니다. 레포지토리를 생성하고 나면 화면이 전환됩니다. 그리고 다음 그림과 같이 주소를 복사해 둡니다. 다음은 VS코드에서 좌측의 Source Control을 클릭합니다. 다음의 창이 뜨면 “Initialize Repository”를 선택합니다. 자동으로 등록이 필요한 파일들이 리스팅 되고 마우스 커서의 오른쪽을 보면 총 68개의 파일이 있음을 알려줍니다. 다음의 그림과 같이 +를 눌러서 파일을 추가합니다. 그러면 각 파일들 우측에 U로 표시되었던 것들이 A로 변경이 됩니다. 파일 리스트의 상단에 있는 칸에 GitHub..

새로운 페이지 추가 onTap을 통해서 리스트 중에서 _saved에 저장된 것들이 있습니다. 저장된 리스트들을 보여주기 위한 새로운 페이지를 만들어 보려고 합니다. 플러터에서는 페이지 혹은 앱의 스크린을 Route라고 부릅니다. 그래서 여기서는 현재의 Route에서 _saved에 저장된 리스트를 보여주는 새로운 Route를 만듭니다. 새로운 Route를 만들기 위해서는 우선 해야할 작업이 있습니다. 새로운 Route를 불러주는 아이콘이 필요합니다. 통상적으로 이런 아이콘은 AppBar에 들어갑니다. class _RandomWordsState extends State { final List _suggestions = []; final _saved = Set(); final TextStyle _biggerF..

리스트에 아이콘 추가하기 이번에는 지금까지 만든 리스트 맨 오른쪽에 하트 모양의 아이콘을 추가할 것입니다. 그리고 리스트를 클릭해 선택을 하면 아이콘 모양을 바꿔보도록 하겠습니다. 선택된 리스트를 클릭하면 아이콘을 원래대로 복귀시킵니다. 그 뿐만 아니라 선택이 된 리스트들만 따로 보여주는 페이지를 만들어 보도록 하겠습니다. 앞의 그림에서 본 바와 같이 우리는 리스트에 하트 아이콘(Favorite)을 달고 선택이 되면 빨간색 하트로 변경을 하고 저장된 리스트를 Saved Suggestion라는 별도의 창에 보이도록 만들어 보겠습니다. _RandomWordsState 클래스에 에 선택이 된 항목들을 저장하기 위한 _saved를 선언해 줍니다. class _RandomWordsState extends Stat..

리스트 뷰 지금까지 StatelessWidget을 사용해서 MyApp을 만들었고 그 안에 StatefulWidget을 이용해서 Text 위젯에 무작위 단어가 출력되는 코드를 만들었습니다. 이 코드를 이용해서 무작위 단어들을 리스트에 넣는 것을 구현해 보도록 하겠습니다. 만들었던 _RandomWordsState 클래스 내에 단어가 들어갈 변수를 만들어 줍니다. 그리고 폰트가 작아 잘 보이지 않아 폰트를 크게 만들기 위해서 폰트 스타일을 저장을 할 변수도 함께 클래스 맨 위에 선언을 해 줍니다. class _RandomWordsState extends State { final List _suggestions = []; final TextStyle _biggerFont = const TextStyle(font..

Stateful과 Stateless 위젯에 대해서는 앞서서 간단하게 어떤 차이가 있는지를 살펴본 바 있습니.다 Stateless는 변경이 안되고 Stateful은 상태가 변하면 화면에 보여지는 내용도 바뀐다고 간단하게 설명할 수 있겠습니다. 지금까지 우리는 간단하지만 Stateless 위젯을 사용한 앱들을 바 왔었는데 기본적으로 요구하는 함수는 build 였습니다. 그런데 Stateful 위젯에서는 State를 확장한 클래스가 필요합니다. 그리고 이 클래스에 build 함수가 들어갑니다. 즉, State가 변경되면 build 함수가 호출되면서 화면이 다시 그려지게 됩니다. Stateful 위젯을 만들기 위해서 VS코드의 main.dart 파일 맨 아래로 갑니다. 그리고 stful을 타이핑합니다. 그러면 ..

english_words라는 외부 패키지를 사용해 보도록 하겠습니다. 가장 간단한 외부 패키지 중의 하나로 5000개의 많은 영어 단어를 가지고 있어 호출을 하면 무작위로 영어 단어를 보내 주는 패키지입니다. 외부 패키지는 플러터에서 제공하지 않는 기능 중에서 이미 많은 사용자에게 검증된 패키지를 이용함으로써 개발 시간을 단축하고자 함입니다. 외부 패키지를 사용하기 위해서는 외부 패키지 이름과 버전을 pubspec.yaml에 추가를 해 줘야 합니다. 다음과 같이 cupertino_icons 아랫줄에 english_workds: ^3.1.5를 추가해 줍니다. 추가를 하고 저장을 하면 자동으로 english_words 패키지를 설치해 줍니다. dependencies: flutter: sdk: flutter ..

프로젝트 생성 VS코드에서 View → Command Palette를 열고 Flutter : New Project를 입력해 선택을 하고 프로젝트 이름 startup_namer를 입력합니다. 폴더 선택창이 나타나면 프로젝트가 생성될 폴더를 선택하고 “Select a folder to create the project in” 버튼을 클릭해 프로젝트를 만듭니다. VS코드 우측 하단을 보면 iOS용 그리고 안드로이드용 프로젝트를 생성하고 있는 것을 볼 수 있습니다. 그리고 잠시 후에 프로젝트가 생성이 된 것을 확인을 할 수 있습니다. 제대로 생성이 되었는지를 그리고 우리가 만든 개발환경이 제대로 되어 있는지 다시 한번 확인을 하기 위해서 안드로이드 에뮬레이터에서 실행을 시켜봅시다. 프로젝트가 다 생성이 되었다면..

우리가 만들 첫 프로그램은? 이번 스텝에서는 첫 번째로 플러터 앱을 만들기 위해서 코딩을 시작할 것이며, 플러터에서 제공하지 않고 외부에서 만든 외부 패키지를 이용해 볼 것입니다. 그리고 프로그램의 상태를 변경하는 Statefull 위젯을 배워 볼 것이고 마지막으로 이 프로그램에는 무한정 스크롤을 할 수 있는 ListView 위젯도 구현을 할 것입니다. 그리고 핫 리로리드라는 기능도 경험을 할 텐데, 이것은 처음 개발을 시작할 때 컴파일을 한번 해 주면 개발자가 코드를 변경할 때마다 에뮬레이터나 실제 폰에 이미 실행을 해 놓은 애플리케이션에 자동으로 변경 사항이 반영 되는 것을 말하는 것입니다. 다음에 있는 그림이 우리가 만들 애플리케이션입니다. 안드로이드와 아이폰에서 동일하게 실행되는 화면을 보여주는 ..