primarySwatch를 사용하여 색상 적용 MaterialApp의 theme 설정시 primarySwatch를 사용하면, 원하는 색상으로 변경할 수 있다. @override Widget build(BuildContext context) { return MaterialApp( home: const HomePage(), theme: ThemeData( primarySwatch: Colors.orange ), ); } 커스텀 색상 적용 하지만, Material 라이브러리에 정의된 색상만 사용하지 않고, 커스텀한 색상을 적용하려면 아래와 같이 직업 입력해줄 수 있다. 하지만 색상을 하나씩 지정해줘야하는 번거로움이 있다. @override Widget build(BuildContext context) { re..

MaterialApp의 theme를 사용하여 앱 전체 폰트 스타일을 변경할 수 있다. 프로젝트에 폰트 추가 폰트를 사용하기 전에 프로젝트에 추가를 해주는 작업이 필요하다. 우선, 사용할 폰트를 다운로드한 뒤에 프로젝트 root 경로에 assets/fonts/ 디렉토리를 생성해준다. 본 글에서는 SUIT 폰트를 사용한다. https://sunn.us/suit/ S U N N sunn.us otf 파일을 다운로드하여 아래와 같이 assets/fonts/디렉토리에 추가한다. pubspec.yaml에 아래와 같이 폰트를 추가한다. fonts > family: 폰트 이름 fonts > fonts: font weight에 따라 보여줄 폰트 파일을 매핑 flutter: # ... fonts: - family: SUI..

간단하게 만든다면 InkWell과 Container로 만들 수 있다. Gradient Button 쉽게 구현 코드 구현 import 'dart:developer'; import 'package:flutter/material.dart'; class GradientButton extends StatelessWidget { const GradientButton({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return InkWell( onTap: () { log("Gradient button clicked!"); }, child: Container( padding: const EdgeInsets.all(20), dec..

다양한 방법으로 CircleAvatar를 사용하면, 원형의 이미지를 만들 수 있다. 인스타 그램을 보면 아바타 겉에 그라데이션 border 효과가 들어가 있다. (아래 사진 참고) 구현 방법 우선 CircleAvatar를 사용하여, 원형의 아바타를 만든다. import 'package:flutter/material.dart'; class GradientBorderCircleAvatar extends StatelessWidget { const GradientBorderCircleAvatar({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return CircleAvatar( radius: 250, background..

Flutter 버전 오류 오랜만에 flutter 프로젝트를 해보려고 하는데, flutter pub get 명령어를 수행했을때, 아래와 같은 오류가 발생했다. The current Dart SDK version is 2.14.3. Because test_app requires SDK version >=2.16.0-134.0.dev =2.16.0-134.0.dev

오류 확인 제대로 설치가 되었는지 flutter doctor 명령어로 확인하는 도중 아래와 같이 Android 쪽에 환경 설정이 덜 된것을 확인했다. 오류 조치 우선 Android Studio를 실행한다. Preferences > Apperanance & Behavior > System Settings > Android SDK 로 들어간다. 탭에 SDK Tools 를 클릭하고 Android SDK Command-line Tools (latest) 를 체크하여 apply를 누르고 설치한다. 설치가 끝났다면 아래 명령어로 다시 확인해보자 flutter doctor Reference https://stackoverflow.com/questions/68236007/i-am-getting-this-errors-c..

Row 위젯에서는 crossAxisAlignment 인자값을 이용하여 세로 방향으로 정렬할 수 있다. // 예시 Row( crossAxisAlignment: CrossAxisAlignment.stretch, ... ); CrossAxisAlignment.start child 위젯들을 상단에 위치시킨다. import "package:flutter/material.dart"; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "Row 위젯 예시", home: Example(), ); } } class E..

Row 위젯에서 가로 정렬을 할 때는 mainAxisAlignment 인자를 이용한다. // 예시 Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, ... ); MainAxisAlignment.start child 위젯을 왼쪽에 붙게한다. import "package:flutter/material.dart"; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "Row 위젯 예시", home: Example(), ); } } class Example e..

Column 위젯을 가로로 정렬할때는 crossAxisAlignment 속성을 이용한다. CrossAxisAlignment.start start는 default 값으로 왼쪽에 붙게 한다. import "package:flutter/material.dart"; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "Column CrossAxisAlignment 예제", home: Example(), ); } } class Example extends StatelessWidget { @override Wid..

MainAxisAlignment 속성을 이용하여 Column의 child 위젯을 정렬할 수 있다. 웹 개발을 해본 사람은 쉽게 이해할 수 있다. 기본 코드 import "package:flutter/material.dart"; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(title: "Column 위젯 정렬 예시", home: ColumnExample()); } } class ColumnExample extends StatelessWidget { @override Widget build(BuildContext..

Container와 SizedBox 위젯은 둘 다 width와 height를 가진다. 그래서 너비와 높이를 설정할 수 있다. 하지만 차이점이 존재한다. Container Container의 위젯은 width와 height를 넣지 않으면, 최대 크기로 확장해준다. import "package:flutter/material.dart"; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "Container와 SizedBox 차이", home: Example(), ); } } class Example ext..

Container 컨테이너는 width와 height 속성이 있어서 크기를 조절할 수 있다. import "package:flutter/material.dart"; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "레이아웃 익히기", home: LayoutExample(), ); } } class LayoutExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Cont..

Android Studio 설치 하위 페이지에서 Android Studio 설치 developer.android.com/studio?hl=ko

React Native 공식 페이지에서 권장하는 방법대로 작성했다. Node & Watchman 설치 React Native 개발에 필요한 node와 Watchman을 Homebrew를 이용하여 설치한다. $ brew install node $ brew install watchman watchman은 코드에 변화가 있는지 상태를 확인하는 도구입니다 JDK 8 설치 Android 개발을 위해 JDK를 설치한다. 설치방법은 동일하게 Homebrew를 사용 $ brew install --cask adoptopenjdk/openjdk/adoptopenjdk8 Android Studio 설치 아래 링크에서 안드로이드 스튜디오를 설치한다. developer.android.com/studio

xml2js 추가 xml 파싱을 위하여 xml2js 라이브러리를 추가한다. $ yarn add xml2js 사용 import {parseString} from 'xml2js'; parseString를 사용하기 위해 import를 한다. const url = ""; fetch(url) .then((response) => response.text()) .then((responseText) => { parseString(responseText, (err, result) => { if (err !== null) { console.log('Fail get data.'); } else { console.log(result); } }); }) .catch((error) => { console.log('Error fe..

React Native Navigation 사용하기 프로젝트 생성 $ react-native init corona React Native Navigation 모듈 설치 $ cd corona $ yarn add @react-navigation/native $ yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view $ yarn add @react-navigation/stack 샘플 코드 작성 // In App.js in a new project import * as React from 'react'..

웹 개발 중에 Bootstrap과 같은 디자인 라이브러리를 사용하면 쉽게 웹 레이아웃을 만들 수 있다. React Native에도 이와 같이 비슷한 디자인 라이브러리가 있다. 여러가지 라이브러리가 있지만, 본 글에서는 React Native Elements 라이브러리를 적용해본다. React Native Elements 적용하기 프로젝트 생성에 대한 코드는 간략히 적는다. $ react-native init Corona $ cd Corona 상세한 내용은 2020/05/19 - [React Native] - React Native 프로젝트 생성하기를 참고한다. 1. react-native-elements 설치 # yarn $ yarn add react-native-elements # 또는 npm 에서는 ..

React Native React Native는 Facebook에서 만든 오픈 소스 모바일 애플리케이션 프레임 워크이다. React를 사용하여 Android, iOS, WEB과 같이 애플리케이션을 개발할 수 있다. 그중에서 모바일(iOS, Andorid)은 React Native를 이용한다. 그리고, iOS와 Android 동시에 개발이 가능하여 하이브리드 앱 개발이라고 부르기도 한다. 프로젝트 생성 사전에 yarn 또는 npm이 설치되어 있어야 함 react-native-cli 설치 $ yarn global add react-native-cli react-native 프로젝트 생성 (코로나가 유행해서 프로젝트 이름을 Corona로 해봤다) $ react-native init Corona 컴퓨터 사양마다..