DEVELOPMENT
-
FLUTTER BASIC TEMPLATEDEVELOPMENT/FLUTTER 2024. 5. 1. 19:33
import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), home: const MyHomePag..
-
Image.asset WidgetDEVELOPMENT/FLUTTER 2023. 5. 13. 22:43
플러터는 웹, 앱, 데스크탑 등 다양한 디바이스 프로그래밍을 지원합니다. UI를 익힐 때 항상 그러하듯 UI 디자인 연습을 위해 특정 사이트를 따라 복제해 보면 어떤 요소가 해당 웹페이지에 사용되었는지 금방 알 수 있게 되며 훌륭한 목표가 있기 대문에 연습을 함에 있어 훨씬 좋습니다. 이번엔 넷플릭스 데스크톱 웹페이지를 따라해 보려고 합니다. 모바일 앱은 클론코딩하시는 분들이 많던데 데스크탑 웹은 없으시더라구요... 혼자 연습하기엔 더 좋다는..ㅎㅎ 그런데 여기서 문제되는 것이 바로 저작권... 넷플릭스 홈페이지는 첫 화면부터.... 넷플릭스 시리즈의 포스터로 한가득이네요... 헐... 그럼 어떻게 이 포스터 이미지를 만들어야 할까 하다.. 혹시 몰라 이미지 생성형 AI 서비스를 검색해 봤습니다. MS에..
-
Mac OS에 Flutter SDK 환경변수 설정하기DEVELOPMENT/FLUTTER 2023. 5. 7. 21:51
삽질의 연속 \2023년 2월 어느 날... 이제껏 써오던 윈도우에 대한 매너리즘.. Mac OS라는 새로움에 대한 동경... 어느 순간 난 당근마켓에서 2020 맥북 중고를 노리고 있었다... 사놓고 넷플릭스만 봤다는 판매자의 말처럼 기스 하나 없이 깨끗한 맥북에 대한 기대는 잠시.. 첫번째 난관이었던 윈도우 11 설치를 무사히 마친 후 Flutter 개발환경 구축을 위해 안드로이드 스튜디오와 Flutter SDK를 다운받은 나는 환경변수 설정이라는 큰 벽에 부딫히게 되었다. Mac OS는 윈도우와는 달리 환경변수를 터미널 창에서 해야 하는 것이었다.... zshrc를 알게 되다 zshrc는 맥, 리눅스에서 사용되는 기본 쉘 편집기라고 한다. 기본 명령어도 모르는 분을 위해 말씀드리자면 다음 3가지의 ..
-
PRIVACY POLICYDEVELOPMENT/PRIVACY POLICY 2022. 5. 9. 12:50
('https://www.pen.go.kr/'이하 '부산광역시교육청')은(는) 「개인정보 보호법」 제30조에 따라 정보주체의 개인정보를 보호하고 이와 관련한 고충을 신속하고 원활하게 처리할 수 있도록 하기 위하여 다음과 같이 개인정보 처리방침을 수립·공개합니다. 제1조(개인정보의 처리목적) (이)가 개인정보 보호법 제32조에 따라 등록․공개하는 개인정보파일의 처리목적은 다음과 같습니다. 제2조(처리하는 개인정보의 항목) ① 은(는) 다음의 개인정보 항목을 처리하고 있습니다. 제3조(개인정보의 파기절차 및 파기방법) ① 은(는) 개인정보 보유기간의 경과, 처리목적 달성 등 개인정보가 불필요하게 되었을 때에는 지체없이 해..
-
UI Development Exam - InkWell, onTab EventDEVELOPMENT/FLUTTER 2022. 2. 2. 18:37
Flutter에서 사용되는 기본 버튼이었던 FlatButton, RaisedButton, OutlineButton 위젯은 TextButton, ElevatedButton, OutlinedButtond으로 바뀌었습니다. 각 버튼의 테마 속성 또한 TextButtonTheme, ElevatedButtonTheme, OutlinedButtonTheme로 바뀌었네요. 기존의 버튼 클래스는 사용이 불가능합니다. 해당 버튼들만 사용해도 개발하는 데에는 큰 문제가 없습니다만, 외부에서 제작한 이미지 파일을 버튼 이미지로 사용하기 위해서는 InkWell 위젯을 사용합니다. 컨테이너 위젯은 클릭 등의 사용자 이벤트를 감지하는 것이 불가능하기 때문에 컨테이너 위젯을 InkWell 위젯으로 감싸 사용자 이벤트에 반응하도록 ..
-
UI Development Exam - CircleAvartar, DrawerHeaderDEVELOPMENT/FLUTTER 2022. 1. 23. 17:10
현대적인 SW의 UI에서는 메뉴바를 어떻게 세련되게 표현하는지의 여부도 매우 중요해 보입니다. 앱스토어 리뷰를 보아도 세련된 화면 구성, 사용자 경험 등에 대한 불평불만과 칭찬이 번갈아 등장하는 것으로 보아 요즘 SW는 디자이너의 역량이 매우 중요하더라구요. EndDrawer 서랍이라는 뜻을 가진 Drawer는 반응형 웹과 스마트 디바이스에서 사용하는 Menu입니다. 三(햄버거 모양이라고도 불리더라구요) 모양의 아이콘을 클릭하면 애플리케이션의 메뉴가 나타나는 것이 Drawer에 대한 기본적인 사용자 경험입니다. 기본적으로 안드로이드 디바이스에서 Drawer는 Appbar 왼쪽에 위치하는데, iOS는 이와는 또 다른지 플러터는 Drawer와 EndDrawer 두 가지 Drawer를 제공합니다. 차이는 Dr..
-
UI Development Exam - Image, Expanded WidgetDEVELOPMENT/FLUTTER 2022. 1. 22. 17:20
플러터의 장점, 강력한 화면 구성 제가 느끼는 플러터의 장점은 UI 구성 시스템이 머리 속에 정리가 되고 Widget 코드가 손에만 익는다면 화면 구성이 매우 쉽다는 점인 것 같습니다. 이번에 보는 책인 「모두가 할 수 있는 플러터 UI 입문」의 예제를 저 나름대로 가공하여 따라 하면서 플러터는 사용하는 자의 능력에 따라 UI 구성을 정말 쉽게 해주는 위젯과 속성이 무척 많다는 걸 다시 느낍니다. AppBar 없는 Scaffold Scaffold 위젯에서 AppBar는 있어도 그만 없어도 그만인 속성입니다. 보통 있긴 하지만 커스터마이징한 나만의 AppBar 클래스를 활용하거나, 전체 화면을 사용하려면 굳이 AppBar가 있을 필요가 없죠. 이번 예제도 AppBar가 없더라구요. 예제의 화면 구성을 눈으..
-
UI Development Exam - Widget 너비 조정, Child Widget 데이터 전달, Custom Font 사용DEVELOPMENT/FLUTTER 2022. 1. 20. 21:39
저에겐 HTML5 등 웹프로그래밍 언어 학습 시 알고리즘보다 화면 표시 과정 상에서 어려움을 겪는 일이 많았습니다. 저는 보통 기능 구상 후 화면 속 컴포넌트를 배치하고 난 후 이에 따라 프로그래밍을 하게 되는데, 화면 구성이 다 끝나지 않으면 다음 단계로 진도가 나아가지 않더라구요. 그렇다고 딱히 제가 생업으로 프로그래밍을 하는 것이 아니기 때문에 틈날 때 짬을 내어 하는 것이라 시간을 많이 투자할 수도 없었고 물어 볼 누군가도 없었습니다. 그래서 그런지 지금도 HTML5와 CSS는 저에겐 굉장히 낯선 프로그래밍 언어입니다. PyQT5나 Android, Flex, Adobe Animate가 그래서 더 익숙하고 애착이 가더라구요. Widget 너비 조정(100%) Flutter 위젯 배치는 쉬운 것 같으..