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