Sharky Canopus

이번엔 이전 시간에 이어서, 전체적인 배치의 설정 방법을 다뤄보겠습니다. 먼저 Align을 이용해 Alignment 설정으로 다음과 같이 중앙으로 적용시킨 모습입니다. 다음은 이를 이용해 값을 조정하여 하단 중앙에 배치한 모습입니다. Column을 적용하여 세로 배치도 가능합니다. 별도로 Positioned를 이용하여 특정 위치를 지정할 수 도 있습니다. 균등 분할을 원할경우 이처럼 Expanded를 이용해 구현 가능합니다. 이번 파트에서는 전체적인 배치를 조정하는 구체적인 방법을 다루었으며 이를 이용해 전반적인 UI의 디자인을 보다 다채롭게 구현할 수 있는 방법을 알아보았습니다. 많은 종류를 알아갈 수 있었고, 표현방법을 넓힐 수 있어 굉장히 의미 있는 수업이었습니다.

마지막으로 기록(히스토리)과 변환기 기능의 구현 부분을 설명하겠습니다. 이들 각각의 풀리퀘스트는 아래의 두 링크에서 확인 가능합니다. 기록 : https://github.com/zeka0228/calculator/pull/4 History 기능 구현 by zeka0228 · Pull Request #4 · zeka0228/calculatorsqflite 패키지를 이용하여, 계산기 history 가 기록되는 table 구축github.com변환기 : https://github.com/zeka0228/calculator/pull/7 Unit converter by zeka0228 · Pull Request #7 · zeka0228/calculator변환 모드 구현 기본 계산기 및 공학계산기에 덧씌워지도록 세..

이번 파트에서는 수학 메모를 구현한 내용을 다루겠습니다. 자세한 코드의 내용 같은 경우 아래의 풀 리퀘스트 기록을 참고 가능합니다.https://github.com/zeka0228/calculator/pull/6 Math memo 구현 by zeka0228 · Pull Request #6 · zeka0228/calculator수학 메모 모드 구현 수학 메모 DB 생성 및 CRUD 구현 메모 고정 구현 메모 내 검색 및 배경모드 줄,격자 등 편의 기능 구현 메모 정렬 정책 구현 수식 결과 자동 삽입 및 스위치 구현github.com 본 포스팅에서도 동일하게 커밋별로 구현 내용을 정리하였습니다. [FEATURE] 수학 메모 기초 디자인 구현 수학 메모 기능을 구현했습니다. 기본적으로 메모장의 형태를 갖기 ..

이번엔 공학용 계산기를 구현해보겠습니다. 다음의 풀리퀘스트를 통해 최종적으로 메인에 적용되었으며 해당 링크를 통해 기록 조회가 가능합니다.본 포스팅부턴 단순 공학용이 아니라, 메인을 수정하거나, 또는 별도의 DB를 생성하는 등 추가적인 작성이 다수 존재하여 가독성을 위해 커밋 단위 내용만 해설하고 별도 코드는 해당 링크를 통해 참고 바랍니다. https://github.com/zeka0228/calculator/pull/3 [REFACTOR] 기능 추가에 따른 디렉토리 구분 main 파일에 모든 로직이 몰아서 존재했는데, 이제 본격적으로 타 모드를 구현하게 되니, 각각의 기능들을 나누어 구현해야합니다. 따라서 기본 계산기와 공학 계산기 디렉토리를 별도 생성하고, 동일하게 적용되는 수학 함수, 로직들은 ..

해당 과제의 최종 결과에 대한 시연 영상입니다. 화면 녹화에 어려움이 있어 핸드폰으로 촬영하였습니다. 영상 크기가 20mb를 초과하여 일부 공개로 업로드했습니다. 아래 링크를 통해 시연 영상 확인 가능합니다.https://youtu.be/AbCeFczXYVo 해당 내용은 시연을 중점적으로 설명하고 있으며, 관련 프로젝트의 자세한 사안의 경우 아래의 깃허브 링크를, https://github.com/zeka0228/calculator GitHub - zeka0228/calculatorContribute to zeka0228/calculator development by creating an account on GitHub.github.com 구현 과정의 경우 해당 카테고리의 타 문서들을 통해 확인할 수 ..

오늘은 위젯 배치에 대한 실습을 진행하여, 이를 통해 관련 함수의 원리를 정확하게 이해하는 시간을 갖겠습니다. 먼저 Row 위젯입니다. 이를 이용하면 해당 Row 안에 존재하는 Container들을 나란히 정렬할 수 있습니다. 다음으로는 body에 Row를 적용하는 것이 아닌 Container에 다시 한번 감싸, 바디의 특정 영역만을 가로 정렬로 설정하고 관련 디자인을 수정할 수 있도록 구축 가능하게끔 적용할 수 있게 만들었습니다. 다음으로는 mainAxisSize: MainAxisSize.min 을 설정하여 Row의 크기 자체츨 조정했습니다. 이를 이용하면, 위처럼 가로 전체를 차지하는 것이 아닌 특정 영역 이내로 제한하여, 디테일한 구성을 만들 수 있게됩니다. 다음으로는 mainAxisAlign..

오늘은 화면 중앙에 이미지와 버튼을 배치하고, 사용자 입력을 감지, 이를 이용해 출력하는 실습을 진행해 보았습니다.사용된 코드는 아래와 같습니다. 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( home: Scaffold( appBar: AppBar( title: const Text('2302310032 임준혁'), ), ..

이번엔 지금까지 배운 플러터의 내용들을 참고하여 실제 핸드폰에서 제공되는 기초 계산기와 같은 기능을 하는 계산기 프로그램을 구현해보겠습니다. 최종 목적은 아래와 같습니다. 1. 실제 iOS에서 제공되는 계산기와 거의 일치하는 UI의 프로그램을 구축합니다.2. 실제 iOS에서 제공되는 기본, 공학 계산기와 수학 메모를 모두 동일하게 구현합니다.3. 실제 iOS에서 제공되는 Edge Case 발생에서의 통제 기능과, 기능적으로 구현된 UX 향상 부분을 동일하게 구현합니다. 금일은 프로젝트 생성과 기본 계산기를 만들었습니다. 프로젝트 깃허브 링크는 아래와 같으며 금일 구현된 기본 계산기는 basic-calculate-function 브랜치에서 구현하여 메인에 머지시켰으니, 금일 구현 부분만 조회하고자 한다..

이번 파트에서는 에셋(Asset)의 통신과 출력을 다루겠습니다. 에셋은 실행 시 코드에서 불러와져 사용되는 고정적인 리소스를 의미하는데, 이미지나 json 파일 등이 이 에셋을 이용해 노출될 수 있게 됩니다. 이번 글에서는 이 에셋을 직접적으로 출력 또는 통신을 통해 받아오는 실습을 진행하겠습니다. 먼저 실습에 사용할 이미지 파일을 해당 프로젝트 디렉토리 내부로 다운로드 받겠습니다. 아래의 좌측 사진을 보시면 아시겠지만, 저는 images 라는 폴더를 추가 생성하여 해당 영역에 다운로드를 진행하였습니다. 이후 pubspec.yaml 파일에 사용할 이미지 경로를 입력하여 정의합니다. 위 우측 사진은 해당 이미지들을 화면 상으로 출력할 수 있도록 하는 에셋 코드를 포함하여 작성된 코드입니다. Image..

위젯(Widget)은, 플러터에서 시각적으로 표출되는 기본적인 UI 단위입니다. 그리고 그 위젯은 성격에 따라 Stateless와 Stateful로 구별할 수 있습니다. 이들은 각각, 한번 설정되는 시점에서 변경되지 않는(Stateless) 성격의 위젯과 특정 조건을 통해서 그 상태가 변경될 수 있는(Stateful) 성격의 위젯으로 구분됩니다. 이번 파트에서는 이 stateless 와 stateful 위젯을 구축하며 실습합니다. 아래는 먼저 stateless 위젯을 생성한 코드입니다. 이전처럼 main 함수를 통해 MyApp이 실행됩니다. 그리고 이 MyApp 클래스는 그 아래에서 선언된 것처럼, StatelessWidget을 상속받아 생성되었습니다. 상태를 구분짓기 편하도록 bool 변수를 enab..