PHOTO
FLUTTER
-
FLUTTER BASIC TEMPLATEFLUTTER 2024.05.01 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 WidgetFLUTTER 2023.05.13 22:43
플러터는 웹, 앱, 데스크탑 등 다양한 디바이스 프로그래밍을 지원합니다. UI를 익힐 때 항상 그러하듯 UI 디자인 연습을 위해 특정 사이트를 따라 복제해 보면 어떤 요소가 해당 웹페이지에 사용되었는지 금방 알 수 있게 되며 훌륭한 목표가 있기 대문에 연습을 함에 있어 훨씬 좋습니다. 이번엔 넷플릭스 데스크톱 웹페이지를 따라해 보려고 합니다. 모바일 앱은 클론코딩하시는 분들이 많던데 데스크탑 웹은 없으시더라구요... 혼자 연습하기엔 더 좋다는..ㅎㅎ 그런데 여기서 문제되는 것이 바로 저작권... 넷플릭스 홈페이지는 첫 화면부터.... 넷플릭스 시리즈의 포스터로 한가득이네요... 헐... 그럼 어떻게 이 포스터 이미지를 만들어야 할까 하다.. 혹시 몰라 이미지 생성형 AI 서비스를 검색해 봤습니다. MS에..
-
Mac OS에 Flutter SDK 환경변수 설정하기FLUTTER 2023.05.07 21:51
삽질의 연속 \2023년 2월 어느 날... 이제껏 써오던 윈도우에 대한 매너리즘.. Mac OS라는 새로움에 대한 동경... 어느 순간 난 당근마켓에서 2020 맥북 중고를 노리고 있었다... 사놓고 넷플릭스만 봤다는 판매자의 말처럼 기스 하나 없이 깨끗한 맥북에 대한 기대는 잠시.. 첫번째 난관이었던 윈도우 11 설치를 무사히 마친 후 Flutter 개발환경 구축을 위해 안드로이드 스튜디오와 Flutter SDK를 다운받은 나는 환경변수 설정이라는 큰 벽에 부딫히게 되었다. Mac OS는 윈도우와는 달리 환경변수를 터미널 창에서 해야 하는 것이었다.... zshrc를 알게 되다 zshrc는 맥, 리눅스에서 사용되는 기본 쉘 편집기라고 한다. 기본 명령어도 모르는 분을 위해 말씀드리자면 다음 3가지의 ..
-
UI Development Exam - InkWell, onTab EventFLUTTER 2022.02.02 18:37
Flutter에서 사용되는 기본 버튼이었던 FlatButton, RaisedButton, OutlineButton 위젯은 TextButton, ElevatedButton, OutlinedButtond으로 바뀌었습니다. 각 버튼의 테마 속성 또한 TextButtonTheme, ElevatedButtonTheme, OutlinedButtonTheme로 바뀌었네요. 기존의 버튼 클래스는 사용이 불가능합니다. 해당 버튼들만 사용해도 개발하는 데에는 큰 문제가 없습니다만, 외부에서 제작한 이미지 파일을 버튼 이미지로 사용하기 위해서는 InkWell 위젯을 사용합니다. 컨테이너 위젯은 클릭 등의 사용자 이벤트를 감지하는 것이 불가능하기 때문에 컨테이너 위젯을 InkWell 위젯으로 감싸 사용자 이벤트에 반응하도록 ..
-
UI Development Exam - CircleAvartar, DrawerHeaderFLUTTER 2022.01.23 17:10
현대적인 SW의 UI에서는 메뉴바를 어떻게 세련되게 표현하는지의 여부도 매우 중요해 보입니다. 앱스토어 리뷰를 보아도 세련된 화면 구성, 사용자 경험 등에 대한 불평불만과 칭찬이 번갈아 등장하는 것으로 보아 요즘 SW는 디자이너의 역량이 매우 중요하더라구요. EndDrawer 서랍이라는 뜻을 가진 Drawer는 반응형 웹과 스마트 디바이스에서 사용하는 Menu입니다. 三(햄버거 모양이라고도 불리더라구요) 모양의 아이콘을 클릭하면 애플리케이션의 메뉴가 나타나는 것이 Drawer에 대한 기본적인 사용자 경험입니다. 기본적으로 안드로이드 디바이스에서 Drawer는 Appbar 왼쪽에 위치하는데, iOS는 이와는 또 다른지 플러터는 Drawer와 EndDrawer 두 가지 Drawer를 제공합니다. 차이는 Dr..