HTML 같은 마크다운 언어나 안드로이드 개발 시 사용되는 XML로 페이지를 명시하는 경우에는 화면에 표시될 UI의 위치를 어느정도 예측하고 명시할 수 있다. 그러나 플러터의 레이아웃은 "Constraints Go Down" 이라는 원칙을 따르기에 위젯이 위치할 위치를 직접 명시해 주어야만 한다. #Constraints Go DownConstraints Go Down 이란? 플러터에서 자식 위젯의 크기는 부모 위젯에 의해서 결정되며, 자식 위젯의 크기가 결정되면 부모 위젯에게 자식의 크기를 명시해 주어야 하는 원칙. 다음 코드는 Container Widget의 위치 제약을 별도로 명시해주지 않았기에 좌측 상단에 배치된다.import 'package:bloggingtest/firstPage.dart';im..
#1 Navigator를 이용해 페이지 전환하기Navigator는 Stack 구조로 동작합니다.예를들어 firstPage.dart 파일에서 sceondPage.dart 파일로 화면을 전환할 경우 firstPage 위에 secondPage가 쌓이는 구조입니다.다음은 firstPage 위에 secondPage를 push 하는 부분입니다.builder 파라미터의 반환부에 추가할 페이지 클래스 인스턴스를 할당해 주면 됩니다. Navigator.of(context).push( MaterialPageRoute( builder: (BuildContext context) { return SecondPage..
SingleChildScrollView 위젯을 이용해 오버플로우 방지 TextField Widget 이란 텍스트 정보를 입력받고자 할 때 사용하는 텍스트 입력 위젯이다. TextField Widget 클릭시 시뮬레이터 하단에서 키보드 자판이 올라오게 되는데, 이 때 올라오는 키보드 자판은 화면 절반의 크기를 차지하게 된다. 이 때 텍스트 필드 위젯을 사용하는 스크린 내부의 위젯들이 전체 화면 절반 이상의 크기를 차지하고 있다면 다음과 같이 OverFlow 현상이 발생하여 화면 잘림 에러를 발생시키게 된다. 해결 방안은 간단한데, 페이지를 스크롤 가능하도록 SingleChildScrollView Widget으로 감싸 주는 것이다. 그러면 다음과 같이 화면이 스크롤 가능 하도록 변경되어, 키보드 자판이 올라..
Android Studio에서 처음으로 가상 환경 에뮬레이터를 실행하면 다음과 같이 Device Manager Tap 에 고정되어 출력됩니다. 이번 포스팅 에서는 에뮬레이터를 Device Manager Tab에서 분리하는 방법과, 안드로이드 스튜디오를 클릭해도 에뮬레이터가 화면에서 뒤로 사라지는 현상을 방지하기 위한 방법에 대해서 소개해 드리도록 하겠습니다. #1 에뮬레이터 분리하기 File → Settings... 혹은 Ctrl + Alt + S 단축키를 클릭합니다. Settings 화면이 출력되면, Emulator 탭을 클릭한 뒤, Launch in a tool Window 항목의 체크를 해제하고 Apply를 눌러 줍니다. Android Studio를 재부팅 해 주시면 에뮬레이터가 분리된 것을 확인할..
웹 상에서 프로그래밍을 도와주는 온라인 IDE는 다양하게 존재한다. Visual Studio, Android Studio, Eclipse 등과 같이 확실한 로컬 환경 기반 IDE를 사용하지 않고 굳이 왜 온라인 IDE를 사용하는 이유는 군대와 같이 로컬 IDE를 사용하지 못하는 환경이거나, 복잡한 설치 없이 가볍게 소스코드를 돌려보고 싶다는 등 다양한 사정이 있을 것이다. 한국에서 개발한 대표적인 온라인 IDE로 구름IDE가 존재한다. 구름IDE는 온라인 상에서 간단한 코드를 돌려 보거나 웹 프로젝트를 하기에는 매우 강력한 툴이다. https://novlog.tistory.com/entry/%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EA%B5%AC%EB%A6%84IDE-%EC%8..