소소한 행복을 꿈꾸는 일상

MediaQuery를 사용하여 특정 width 이상일 경우 배경색 변경 반응형 레이아웃 Vesrion 1은 앞에서 작성한 MediaQuery 를 이용하여 배경색을 변경 해보는 것이다. MediaQuery 사용법을 모르시는 분은 앞에서 MediaQuery 개념 및 사용법을 확인하시기 바랍니다. class MyPage extends StatefulWidget { const MyPage({Key? key}) : super(key: key); @override State createState() => _MyPageState(); } class _MyPageState extends State { @override Widget build(BuildContext context) { /* * MediaQuery(미디어..

MediaQuery(미디어쿼리) 개념 MediaQuery(미디어쿼리)는 디바이스의 스크린 사이즈 맞게 앱의 스크린 사이즈가 조절이 되어야 할 때 사용하는 것으로 디바이스의 사이즈를 알아낼 수 있고 사용자가 원하는 레이아웃으로 빌드를 할 수 있다. MediaQuery(미디어쿼리) 사용법 class MyPage extends StatefulWidget { const MyPage({Key? key}) : super(key: key); @override State createState() => _MyPageState(); } class _MyPageState extends State { @override Widget build(BuildContext context) { return Scaffold( backgr..

Flutter SDK 설치 1. Flutter 사이드 접속(https://flutter.dev/) 2. Get started 클릭 3. 각자 OS에 맞게 선택(저는 Windows 라서..... macOS는 제가 macBook을 구매하면 추가할게요...) 4. flutter zip 파일 다운로드 및 압축해제(압축 해제는 Program Files를 제외한 나머지 곳에서 진행해야 합니다.) 이렇게 flutter SDK를 다운받아 압축 해제하면 1단계 완료 환경 변수 설정 1. 시스템 속성 접속(제어판 > 시스템 및 보안 > 시스템) 2. 고급 시스템 설정 클릭 3. 환경변수 클릭 > 시스템 변수 중 Path 선택 후 편집 클릭 4. 새로 만들기 클릭하여 압축 해제한 Flutter 폴더의 bin 경로를 입력 후..

Flutter(프레임워크) 구글에서 2017년 5월 출시된 모바일/웹/데스크톱 크로스 플랫폼 GUI SDK이다. 하나의 코드로 안드로이드, 리눅스, Windows, macOS, IOS 및 웹브라우저에서 모두 동작되는 앱을 위해 출시. 사용하는 언어로는 구글에 의해 제창된 Dart를 사용. 플러터 프레임워크는 소스 코드를 네이티브 CPU 머신 코드로 직접 컴파일하며 UI를 렌더링 엔진 Skia로 직접 렌더링 하기 때문에 성능이 뛰어나다. 소프트웨어 디자이너의 선택에 따라 iOS 앱에서 구글의 Material 테마 디자인과 Ripple 애니메이션을 사용하는 것이 가능하고 반대로 안드로이드에서 애플의 Cupertino 테마를 적용하는 것도 가능하다. 즉 플랫폼에 관계없이 플러터용 테마 디자인 라이브러리 적용 ..

지금까지 Web만 해왔다. 특히 FrontEnd는 TOBESOFT의 MIP, XPLATFORM, 넥사크로와 Vue.js를 해왔다. 그 이유 딱히 없다. 회사 프로젝트에서 사용하니깐 그냥 해온것이다. 그런데 언제 부터 인가 나도 무언가를 만들어 보고 싶었다. Web을 할까 APP을 할까 고민을 했지만 App을 선택했다. Web은 음...... 그냥 하기 싫었다 이유가 없었다. App을 만들려고 검색을 해보니 뭐가 이리 많은 건지... 코틀린, Java, Object-c, XCode, ReactNative 등등 엄청 많았다. 그중에 Flutter는 안드로이드, IOS, Web 등을 모두 한 번의 코딩으로 가능하다고 했다. 이건 나에게 완전히 신세계였다. 어떻게 안드로이와, IOS가 하나이 코드로 돌아갈 수 ..