본문 바로가기

728x90

📱 Cross Platform/Flutter6

[Flutter] Flutter 레이아웃 쉽게 이해하기 - 1 (feat. Column,Row,MainAxisAlignment,CrossAlignment) 안녕하세요 Foma 💻 입니다! 정말 오랜만에 Flutter를 다시 공부하는데.. 레이아웃 하는 방법이 iOS와는 달라서.. 헷갈리더라구요. 그래서 레이아웃 하는 방법을 쉽게 이해하기 위해서 글을 정리해보려고 합니다! 바로 시작할게요~ Column 먼저 컬럼 위젯부터 다뤄보겠습니다. 컬럼은 "행"을 뜻하죠? 즉, 세로로 위젯들을 배치하고 싶을 때 사용하는 위젯입니다. 아래와 같이 아무런 옵션을 주지 않으면 왼쪽 상단에 배치되게 됩니다. Column(children: [CircleAvatar(radius: 50.0)]) 컬럼 안에 여러 개의 위젯을 넣으면 아래와 같이 세로로 배치되게 됩니다. Column(children: [CircleAvatar(radius: 50.0), CircleAvatar(radiu.. 2021. 12. 11.

[Flutter] 플러터 웹 배포하기(feat.Fireabse hosting) 안녕하세요 Foma 👟 입니다! 오늘은 파이어베이스 호스팅 통해 플러터로 만든 웹을 배포하는 방법에 대해서 정리하려고 합니다. 바로 시작할게요~ 플러터 프로젝트 생성 비쥬얼 스튜디오에서 cmd + shift + p 를 눌러서 새로운 플러터 프로젝트를 생성해줍니다. Firebase Hosting 터미널로 이동해서 아래와 같이 파이어베이스 툴을 설치해줍니다. sudo npm install -g firebase-tools 파이어베이스 호스팅 초기 설정을 해줍니다. firebase init hosting 1. Create a new project 새로운 프로젝트를 파이어베이스에 만들어줍니다. 2. Google Cloud project id 원하는 이름으로 정해줍니다. 3. 원하는 프로젝트로 아이디로 설정 아래와.. 2021. 6. 12.

[Flutter] 화면 이동하기 (Navigator Push & Pop) 안녕하세요 Foma 👟 입니다! 오늘은 플러터에서 두 화면(ScreenA와 ScreenB)을 서로 이동하고 되돌아오는 방법에 대해 정리하도록 하겠습니다! 바로 시작할게요~ ScreenA ScreenA를 만들어줍니다. import 'package:flutter/material.dart'; class ScreenA extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Screen A page"), ), ); } } ScreenB ScreenB를 만들어줍니다. import 'package:flutter/material.dart'; class Screen.. 2021. 6. 12.

[Flutter] 오픈소스 패키지 사용해보기(Using opensource package) 안녕하세요 Foma 입니다! 오늘은 Flutter에서 Pub으로 외부 패키지를 사용해보도록 하겠습니다. iOS로 따지면 Pub은 CocoaPod이고 패키지는 라이브러리를 뜻하는 것 같네요. 바로 시작할게요~ Dart packages 먼저 pub.dev라는 사이트로 이동해주세요. 이 사이트는 다양한 오픈소스들을 사용할 수 있는 검색하고 사용하는 법에 대해 나와있는 사이트입니다. Dart packages Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter, AngularDart, and general Dart programs. pub.dev 저는 여기서 e.. 2021. 4. 18.

[Flutter] StatelessWidget과 StatefulWidget의 차이점 안녕하세요 Foma 입니다! 오늘은 플러터에서 가장 기본적인 StatelessWidget과 StatefulWidget의 차이점에 대해서 알아보려고 합니다! 바로 시작할게요! StatelessWidget 공식 문서를 해석해보면 "변경 가능한 상태가 필요하지 않은 위젯" 이라고 하네요. 예를 들면 아래와 같은 화면은 더 이상 변경될 일이 없으므로 상태가 필요없는 위젯입니다. 그러므로 StatelessWidget으로 만들어주면 됩니다. class MyApp extends StatelessWidget {...} StatefulWidget 공식 문서를 해석해보면 "변경 가능한 상태를 가진 위젯" 이라고 되어있습니다. 그렇다면 State는 어떤 일을 할까요?🤔 1.위젯이 빌드 될 때 동기적으로 읽는다. 2.위젯의 .. 2021. 4. 18.

[Flutter] 이미지와 폰트 적용하기 (Image & Font) 안녕하세요 Foma 입니다! 오늘은 이미지와 폰트 적용하는 법에 대해서 정리해보겠습니다. (비쥬얼 스튜디오 기준으로 설명드릴게요) 바로 시작할게요~ 1. 이미지 비쥬얼 스튜디오에 images파일을 만들어주세요. images 안에 이미지 파일을 넣어주세요. pubspec.yaml 파일로 이동하셔서 아래와 같이 파일 경로와 이미지 이름을 넣어주세요. assets: - images/profile.png AssetImage에 이미지 경로와 이름을 넣어주세요. CircleAvatar( radius: 50.0, backgroundImage: AssetImage('images/profile.png'), ), 이렇게 하면 아래와 같이 이미지가 적용됩니다. 2. 폰트 먼저 아래 구글 폰트 사이트로 가서 원하는 폰트를 다.. 2021. 4. 11.

이전 1 다음

728x90

티스토리툴바