반응형
Overview
플러터 앱에서 사용자가 색상을 선택하고, 선택한 색상을 반영하는 기능을 구현해보자.
포스팅에서는 flutter_colorpicker 패키지를 사용하며, 총 세 가지의 컬러 피커 사용 방법을 샘플로 다룬다.
포스팅에서 다루는 프로젝트는 아래의 깃허브에서 다운로드 가능합니다.
깃허브에서 flutter_color_picker_example 섹션을 확인해주세요.
그 외에도 다른 샘플 프로젝트를 확인하실 수 있습니다.
자세한 내용은 깃허브의 리드미를 확인해주세요 :)
GitHub - luvris2/flutter-example
Contribute to luvris2/flutter-example development by creating an account on GitHub.
github.com
색상 선택기(Color Picker)란?
- 보통 Color Picker, Color Chooser 또는 Color Tool 이라고 칭하며,
한국말로는 색상 선택기 또는 색상 도구라고도 한다. - 일반적으로 그래픽 관련 인터페이스에서 색상을 선택하는 데 사용한다.
- 경우에 따라서 색상 구성표를 만드는 데에도 사용한다.
- 쉽게 말해 컬러 피커를 통해 색상 값을 선택하고 조정하는 데 주로 사용한다.
아래는 윈도우 그림판과 포토샵에서의 컬러 피커 예시 화면이다.
예시 이미지를 본다면 컬러 피커가 어떤 것인지 어렴풋이 느낌이 올 것이다.
Flutter에서 색상 편집 툴 사용하기
flutter_colorpicker 패키지 추가
플러터에서 컬러 피커를 사용하기 위한 가장 간단한 방법으로는
flutter_colorpicker 패키지를 사용하면 손 쉽게 구현할 수 있다.
컬러피커를 사용하기 위해 패키지를 추가해주자.
flutter pub add flutter_colorpicker사용 구문
ColorPicker(
pickerColor: // 컬러피커 선택 초기값
onColorChanged: (Color color) {
setState((){
// 컬러피커 색상 변경 시 수행 기능 정의
});
},
)
// Use Material color picker:
// child: MaterialPicker(
// pickerColor: pickerColor,
// onColorChanged: changeColor,
// showLabel: true, // only on portrait mode
// ),
// Use Block color picker:
// child: BlockPicker(
// pickerColor: currentColor,
// onColorChanged: changeColor,
// ),
// child: MultipleChoiceBlockPicker(
// pickerColors: currentColors,
// onColorsChanged: changeColors,
// ),- 컬러피커 종류
- ColorPicker : 가장 기본적이고 익숙한 UI의 컬러피커이다.
- MaterialPicker : 특정 색상을 기준으로 여러가지 색상을 고를 수 있도록하는 컬러피커이다.
- BlockPicker : 블록으로 구성된 색상들이 나열되어 있는 컬러피커이다.
- MultipleChoiceBlockPicker : 블록으로 구성된 색상들이 나열되어 있는 컬러피커에서 여러 색상을 선택할 수 있는 컬러피커이다.
- pickerColor
- 색상 선택기가 표시될 때 선택된 초기 색상을 정의한다.
- 일반적으로 선택했던 색상을 재변경할 때를 고려하여 가변 색상값으로 하는 것이 좋다.
- 가변 색상값은 이미 선택한 색상의 색상값을 의미한다.
- onColorChanged
- 색상 선택기에서 사용자가 색을 선택할 때의 기능을 정의한다.
- 일반적으로 사용자가 현재 선택한 색상의 색상 값을 저장하는 용도로 많이 사용한다.
Flutter 컬러피커 사용 샘플 코드
요구 사항 및 기능 정의
[ 요구사항 ]
- 사용자가 원하는 색상으로 변경할 수 있어야 한다.
- 사용자가 선택한 색상을 확인할 수 있어야 한다.
[ 기능 ]
- 버튼을 누르면 컬러피커 다이얼로그 창이 뜨며, 색상을 선택할 수 있어야 한다.
- 컬러피커 다이얼로그에서 선택한 색상을 메인 페이지에 표시할 수 있어야한다.
- 종류에 따른 컬러피커를 출력하여 사용자는 색상을 고를 수 있어야 한다.
(이 포스팅에서 MultipleChoiceBlockPicker는 BlockPicker와 비슷하므로 다루지 않습니다.)
플러터 컬러피커 패키지 호출
컬러피커를 사용하려면 flutter_colorpicker 패키지를 추가된 상태에서 해당 패키지를 호출한다.
import 'package:flutter_colorpicker/flutter_colorpicker.dart';반응형
UI 구성
- 버튼을 누르면 선택한 색상을 표시할 수 있는 UI를 구성한다.
- 버튼을 누를 경우 출력되는 컬러피커는 정의된 함수(selectColor) 내에서 컬러피커의 종류를 구분하고 다이얼로그로 띄워주는 기능을 수행한다.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('선택한 색상'),
// 사용자가 선택한 색상을 표시하는 컨테이너
Container(
width: 50,
height: 50,
margin: const EdgeInsets.fromLTRB(0, 0, 0, 20),
decoration: BoxDecoration(
color: currentColor,
border: Border.all(color: Colors.black),
),
),
const Text('색상 변경하기'),
/* [버튼 기능 정의]
* 버튼을 누르면 selectColor 함수 호출
* 버튼별 컬러피커 종류를 함수의 파라미터로 전달
*/
ElevatedButton(
onPressed: (() => selectColor('ColorPicker')),
child: const Text('ColorPicker'),
),
ElevatedButton(
onPressed: (() => selectColor('MaterialPicker')),
child: const Text('MaterialPicker'),
),
ElevatedButton(
onPressed: (() => selectColor('BlockPicker')),
child: const Text('BlockPicker'),
)
],
),컬러피커 기능 정의
포스팅에서는 selectColor 라는 함수의 이름으로 정의하였다.
버튼을 누르면 누른 버튼에 해당하는 컬러피커 종류를 출력하도록 하고,
선택된 색상을 메인페이지에 반영하는 기능이다.
종류별 컬러피커의 코드가 반복되므로 onColorChanged 속성은 함수로 정의(changeColor)하여 호출하였다.
- selectColor : 컬러피커의 종류를 구분하고 컬러피커 다이얼로그 호출하여 색상 선택 및 선택한 색상을 반영하는 기능을 하는 함수
- changeColor : 컬러피커에서 선택한 색상을 업데이트하기 위한 함
// 색상 변경 함수
changeColor(color) {
setState(() => pickerColor = color);
}
// 컬러피커 호출 함수
selectColor(type) {
// 선택한 컬러피커 종류 확인
Widget pickerType;
if (type == 'ColorPicker') {
pickerType = ColorPicker(
pickerColor: pickerColor,
onColorChanged: changeColor,
);
} else if (type == 'MaterialPicker') {
pickerType = MaterialPicker(
pickerColor: pickerColor,
onColorChanged: changeColor,
);
} else {
pickerType = BlockPicker(
pickerColor: pickerColor,
onColorChanged: changeColor,
);
}
// 컬러피커 다이얼로그 호출
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('색상을 선택하세요.'),
content: SingleChildScrollView(
child: pickerType,
),
actions: <Widget>[
// 버튼 터치 시 선택한 색상으로 업데이트
ElevatedButton(
child: const Text('색 선택'),
onPressed: () {
setState(() => currentColor = pickerColor);
Navigator.of(context).pop();
},
),
],
);
},
);
}전체 소스 코드
더보기
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
void main() {
runApp(
const MaterialApp(
home: Scaffold(
body: MainPage(),
),
),
);
}
class MainPage extends StatefulWidget {
const MainPage({super.key});
@override
State<MainPage> createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
// 색상 초기값 정의
Color pickerColor = Colors.white;
Color currentColor = Colors.white;
// 색상 변경 함수
changeColor(color) {
setState(() => pickerColor = color);
}
// 컬러피커 호출 함수
selectColor(type) {
// 선택한 컬러피커 종류 확인
Widget pickerType;
if (type == 'ColorPicker') {
pickerType = ColorPicker(
pickerColor: pickerColor,
onColorChanged: changeColor,
);
} else if (type == 'MaterialPicker') {
pickerType = MaterialPicker(
pickerColor: pickerColor,
onColorChanged: changeColor,
);
} else {
pickerType = BlockPicker(
pickerColor: pickerColor,
onColorChanged: changeColor,
);
}
// 컬러피커 다이얼로그 호출
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('색상을 선택하세요.'),
content: SingleChildScrollView(
child: pickerType,
),
actions: <Widget>[
// 버튼 터치 시 선택한 색상으로 업데이트
ElevatedButton(
child: const Text('색 선택'),
onPressed: () {
setState(() => currentColor = pickerColor);
Navigator.of(context).pop();
},
),
],
);
},
);
}
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('선택한 색상'),
// 사용자가 선택한 색상을 표시하는 컨테이너
Container(
width: 50,
height: 50,
margin: const EdgeInsets.fromLTRB(0, 0, 0, 20),
decoration: BoxDecoration(
color: currentColor,
border: Border.all(color: Colors.black),
),
),
const Text('색상 변경하기'),
/* [버튼 기능 정의]
* 버튼을 누르면 selectColor 함수 호출
* 버튼별 컬러피커 종류를 함수의 파라미터로 전달
*/
ElevatedButton(
onPressed: (() => selectColor('ColorPicker')),
child: const Text('ColorPicker'),
),
ElevatedButton(
onPressed: (() => selectColor('MaterialPicker')),
child: const Text('MaterialPicker'),
),
ElevatedButton(
onPressed: (() => selectColor('BlockPicker')),
child: const Text('BlockPicker'),
)
],
),
);
}
}참고
flutter pub.dev - flutter_colorpicker documentation
반응형