IT 공부를 위한 블로그

안녕하세요, 오늘은 Flutter로 Firestore를 연동해보겠습니다. 먼저, Firestore를 연동하기 위해서는 FIrebase먼저 연동을 해야 됩니다. 전에 Firebase 연동하는 포스팅을 했었는데요 다시 한번 최신 버전으로 연동을 해보겠습니다. 1.Firebase 연동하기 먼저 파이어 베이스 콘솔 홈페이지로 들어가서 https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 구글 로그인을 하고 Firebase 시작하기를 눌러줍니다. 그 후 새 프로젝트 만들기를 클릭해줍니다. 프로젝트의 이름 등을 입력해주고 프로젝트를 만들면 이런 화..

오늘은 flutter 이미지 추가하는 방법을 알아보겠습니다. 먼저 입력할 이미지 파일을 준비합니다. (위에 예시 이미지파일을 올려두었습니다.) 그 후에 pubspec.yaml이 있는 폴더 동일 경로에 이미지들을 넣어줄 images 폴더를 만듭니다. (우클릭 New -> Directory) images폴더에 이미지파일들을 넣어주기 위해 images우클릭 후 Show in Explorer 하여 images 경로로 이동합니다. 파일을 images 폴더에 넣어줍니다. pubpec.yaml에 들어가서 주석처리 되있는 assets부분의 주석처리를 없애주고 - images/파일이름.확장자 형태로 입력해 줍니다. EX) - images/dog_1.png 입력 후 꼭 Packges get을 클릭하여야 합니다. 이제 이미..

안녕하세요, 오늘은 지난 시간에 배웠던 Column함수와 Row함수를 중첩하여 사용하는 법을 알아보도록 하겠습니다. 먼저, 예제와 소스코드를 먼저 보여드리겠습니다. body: Container( child: Column( children: [ Row( children: [ Square(), Square(), Square(), ], ), Row( children: [ Square(), Square(), Square(), ], ), Row( children: [ Square(), Square(), Square(), ], ), ], ), 예시를 보시면 바디 부분에서 Container이라는 틀 안에 또 다른 틀인 child:Column을 설정하고 또 Column1개안에 children 인 Row 3개가 레이아웃..

오늘은 앱 아이콘을 변경하는 방법을 살펴보겠습니다. 우선 기에 제가 만든 아이콘은 이렇게 플러터 로고로 되어있는데요, 이 아이콘을 바꾸는 방법을 알려드리겠습니다. 아이콘을 변경하고싶은 애플리케이션 파일을 안드로이드 스튜디오로 열어줍니다. 그 후 좌측 Project 메뉴에서 android -> app -> src -> res에 우클릭 후 show in Explorer를 클릭해 줍니다. 그 후엔 res 경로로 찾아가면 다음과 같이 mipmap이란 이름의 5개 폴더가 있는것을 알 수 있습니다. 이는 앱 아이콘이 각 크기별로 저장해 놓은것 입니다. 따라서 새로운 아이콘을 등록 하기위해선 이와 같은 5개의 각각 다른 아이콘 크기를 만들어야 합니다. 그래서 아이콘을 앱아이콘에 필요한 사이즈에 맞게 자동으로 생성해주..

저번 Column와 Row에 이어서 이번엔 mainAxisAlignment를 이용한 레이아웃 정렬 방법에 대해서 써보겠습니다. 먼저 저번 코드를 참고에서 코드를 짜 보겠습니다. *Row와 Column함수를 모른다면 해당 링크 이동↓ https://for-it-study.tistory.com/12 Flutter 레이아웃기초 강좌 Row와 Column 오늘 Flutter에서 가장 기본적인 레이아웃 함수인 Row Column을 배워 보겠습니다. 말 그대로 Row는 물체를 가로로 나열하는 것을 의미하고 Column은 세로로 배치하는 것을 의미합니다. 먼저, Row로 사각형을 가로.. for-it-study.tistory.com import 'package:flutter/cupertino.dart'; import..

오늘 Flutter에서 가장 기본적인 레이아웃 함수인 Row Column을 배워 보겠습니다. 말 그대로 Row는 물체를 가로로 나열하는 것을 의미하고 Column은 세로로 배치하는 것을 의미합니다. 먼저, Row로 사각형을 가로로 배치해보겟습니다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: Them..

오늘은 Firebase를 등록하는 법을 알려드릴게요! https://firebase.google.com/?gclid=CjwKCAiA6vXwBRBKEiwAYE7iS53ZxweL8OhSUzib6dEd8gES3PcoLMwzlsFUb96Gv0i8dmj3Wocd8BoCwwEQAvD_BwE Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 1. 우선 위의 링크를 클릭하여 파이어 베이스 홈페이지로 이동한 후, 프로젝트 생성을 눌러줍니다. 2. 원하는 아무 프로젝트의 이름을 입력해주고, Google 에널리틱스 계정, 위치를 입력해주고 체크박스에 체크 후 새 프로젝트 만들기를 클릭합니다. 3. 앱에 ..

오늘은 flutter를 사용해서 타이머, 스톱워치를 만들어 보았습니다. 실행 영상먼저 보여드리겠습니다! 아직 제대로된 디자인은 구현하지 않았지만 기능은 잘 작동합니다! 이제 코드를 살펴볼까요? 먼저, 타이머 코드입니다. import 'dart:async'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:numberpicker/numberpicker.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return ..

오늘은 StatelessWidget과 StatefulWidget에 대해 알아보겠습니다. 먼저 실습한 코딩 먼저 보여드리겠습니다. *해당 실습은 안드로이드 스튜디오에서 진행하였습니다. 안드로이드 스튜디오, fluter 설치방법 ------>https://for-it-study.tistory.com/3 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title..

안녕하세요!! 이번 포스팅은 flutter 다운로드 방법 및 기본 셋팅하는 법을 포스팅해보겠습니다. ​ 1.flutter 다운로드 먼저 아래 링크에 들어가셔서 본인 pc의 맞는 버전으로 sdk파일을 다운로드 받으시면 됩니다! https://flutter.dev/docs/get-started/install Install Select the operating system on which you are installing Flutter:{{site.alert.note}} **Are you on Chrome OS?** If so, see the official [Chrome OS Flutter installation docs!](/docs/get-started/install/chromeos){{site.aler..