분류 전체보기 97

Flutter Chapter-02-01 내 정보 만들기 StatelessWidget 익히기

챕터 1은 기본적인 위젯, 그리고 환경설정 파일을 설명하였다. 이제는 직접 앱을 만들면서 각각의 기능들을 설명할 것이다. 챕터 2에서는 자신만의 명함을 만들 것이고, 그에 따른 기능들을 설명하도록 하겠다. 1. 플러터에서는 StatelessWidget이라는 내장 클래스가 존재한다. 해당하는 클래스는 상속되어서 사용되는데 상속에 관해서는 추후에 설명하도록 하겟다. 일단은 관리자가 만들어놓은 클래스를 가져다가 사용한다고 생각하면 된다. 해당하는 클래스 안에 build라는 함수가 존재하는데 해당하는 함수는 저장을 하게 될 시 자동적으로 화면 빌드(만들어)를 새로 앱을 노출 하는 기능을 한다. 예시를 보자 import 'package:flutter/material.dart'; void main() { runAp..

플루터 2022.01.12

Flutter Chapter-01-05 연습문제 작성

지금 까지 배운 내용으로 새로운 앱을 만드는 것도 정리하는데 도움이 된다고 생각한다. 나는 보지 않고 새로이 해당하는 앱을 만들어 봤으며, 이미지 같은 부분은 아래url을 통해 다운받아 완성하였다. https://icons8.com/l/animations/ Animated Illustrations by Icons8 Breathe more life into your digital products. 100+ vivid illustrations: business, e-commerce, crypto, education, and more. Available in the JSON (Lottie), After Effects, and GIF formats. icons8.com 다같이 새로운 앱을 만드는 것도 재미의 요..

플루터 2022.01.11

Flutter Chapter-01-04 앱 아이콘 변경

저번 시간에는 yaml파일의 리소스 설정 방법을 살펴보았다. 요번 시간에는 해당하는 앱의 이미지를 변경하는 방법을 살펴보도록 하겠다. 1. 앱 아이콘의 이미지파일을 해당 페이지에 올린다. - https://appicon.co/ App Icon Generator appicon.co 위 url을 타고 가면 이미지를 업로드하고 해당하는 이미지로 앱 아이콘을 다운로드할 수 있다. 다운로드한 앱 아이콘 알집 파일을 풀면 해당하는 폴더들이 있는데, 안드로이드 아이콘과 ios 아이콘이 만들어져 있는 것을 확인할 수 있다. 1. Android 앱 아이콘 변경방법 해당하는 영역에 안드로이드 앱 아이콘 이미지가 포함돼 서있는 것을 확인할 수 있다. 브라우저를 통해 다운 받은 아이콘을 res 안으로 덮어 씌워준다. 덮어 씌..

플루터 2022.01.10

Flutter Chapter-01-03 Yaml 파일 사용법

저번 챕터에서는 기본적인 scaffold 구성을 살펴보았다. 웹브라우저 안에 있는 Url을 호출하였다면, 현재는 나의 리소스&이미지 파일을 환경설정을 통해 앱과 연동시키는 방법을 알아보겠다. 일단 첫 번째로 Yaml 파일 구성 및 간단 설명을 시작하도록 하겠다. 플러터 프로젝트를 시작하면 위 이미지와 같이 pubspec.yaml 파일이 기본적으로 세팅이된다. 이 파일의 기본적인 역할은 1. 프로젝트 설명 2. 외부 패키지 지원 3. 리소스 & 이미지 파일 참조 등등 많은 역할들이 있다. 현재 설정된 pubspec.yaml 파일 # 프로젝트이름 # 프로젝트 설명 name: flutter_ch_01 description: A new Flutter application. publish_to: 'none' # ..

플루터 2022.01.09

Flutter Chapter-01-02 Material 디자인과 Widget(위젯) 사용법

저번 챕터에서는 기본적인 플러터 위젯사용법을 배웠다. 하지만 이미지를 봤듯이 App도아닌 그냥 일반적인 이미지 와 같았다. 요번 시간에는 Scaffold를 사용해서 앱의 기본적인 구성으 구현하도록 하겠다. import 'package:flutter/material.dart'; void main() => runApp(MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('이미지 불러오기 앱'), backgroundColor: Colors.amber, ), body: const Center( child: Image( image: NetworkImage('https://postfiles.pstatic.net/MjAyMTEyMDhfMTU1/MDAxNjM..

플루터 2021.12.12

Flutter Chapter-01-01 Material 디자인과 Widget(위젯) 사용법

머트리얼 디자인이란 구글에서 일관된 디자인을 적용시키기 위해 만들어진 기본 틀이다. 기본적으로 Flutter 플러터는 해당하는 디자인을 구현하게 구성되어 있으며 해당하는 위젯 사용법은 아래 웹 사이트를 참조하면 더 좋을 것이다. https://material.io/design Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io MaterialApp을 사용할때 가장 중요한 점은 home 이다. 해당하는 home에서 부터..

플루터 2021.12.12

Flutter 플루터 정리 시작

#Flutter 플루터 정리를 시작 플루터를 강의를 한번 다 듣고 앱 개발을 진행한 적이 있다. 앱 개발을 하면서도 기본적인 부분이 중간중간에 잊어버리는 적도 적지 않아서 정리하는 습관과 나만의 노트를 만들고 필요로 하다면 다른 사람들에게도 제공해 주고 싶은 마음에 정리를 하게 되었다. 이제 시작이지만, 정리가 잘 되고 나름 그래도 설명도 가능하다면 youtube에도 진행하는 과정들을 따로도 정리하고 싶은 마음이 들었다. 현재의 목표는 꾸준하게 하는 모습을 생각하고 있다. 꾸준하게 열심히 해보자.

플루터 2021.12.12