<div id="readability-page-1" class="page"><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#개요">개요</a></li><li><a href="#공식-예제">공식 예제</a></li><li><a href="#간단한-예제">간단한 예제</a></li><li><a href="#flutter-프로젝트-생성">Flutter 프로젝트 생성</a></li><li><a href="#flutter_colorpicker-설치">flutter_colorpicker 설치</a></li><li><a href="#예제-작성">예제 작성</a></li><li><a href="#확인">확인</a></li><li><a href="#완료">완료</a></li></ul></div><h2 id="개요">개요</h2>이번 블로그 포스트에서는 <code>flutter_colorpicker</code>를 사용하여, 사용자가 쉽게 색상을 선택할 수 있는 기능을 구현하는 방법에 대해서 알아볼 예정입니다.<ul><li>flutter_colorpicker: <a href="https://pub.dev/packages/flutter_colorpicker" rel="nofollow noreferrer" target="_blank">https://pub.dev/packages/flutter_colorpicker</a></li></ul><picture><source srcset="/assets/images/category/flutter/2022/flutter_colorpicker/flutter_colorpicker_examples.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2022/flutter_colorpicker/flutter_colorpicker_examples.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2022/flutter_colorpicker/flutter_colorpicker_examples.jpg" alt="Flutter - flutter_colorpicker examples"></picture>이 블로그 포스트에서 소개하는 소스 코드는 아래에 링크에서 확인할 수 있습니다.<ul><li>GitHub: <a href="https://github.com/dev-yakuza/study-flutter/tree/main/packages/flutter_colorpicker_example" rel="nofollow noreferrer" target="_blank">https://github.com/dev-yakuza/study-flutter/tree/main/packages/flutter_colorpicker_example</a></li></ul><h2 id="공식-예제">공식 예제</h2><code>flutter_colorpicker</code>는 다양한 기능을 제공하고 있으며, 이를 확인할 수 있는 예제를 제공하고 있습니다. 해당 예제는 아래에 링크를 통해 확인할 수 있습니다.<ul><li>공식 예제: <a href="https://github.com/mchome/flutter_colorpicker/tree/master/example" rel="nofollow noreferrer" target="_blank">https://github.com/mchome/flutter_colorpicker/tree/master/example</a></li></ul>해당 예제를 실행하면 다음과 같은 화면을 확인할 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2022/flutter_colorpicker/flutter_colorpicker_official_example.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2022/flutter_colorpicker/flutter_colorpicker_official_example.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2022/flutter_colorpicker/flutter_colorpicker_official_example.jpg" alt="Flutter - flutter_colorpicker official example"></picture>또한, <code>flutter_colorpicker</code>가 웹을 지원하므로 다음과 같이 웹에서 예제를 확인할 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2022/flutter_colorpicker/flutter_colorpicker_official_example_on_web.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2022/flutter_colorpicker/flutter_colorpicker_official_example_on_web.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2022/flutter_colorpicker/flutter_colorpicker_official_example_on_web.jpg" alt="Flutter - flutter_colorpicker official example on web"></picture>웹에 관한 예제는 다음 링크를 통해 확인할 수 있습니다<ul><li>웹 공식 예제: <a href="https://mchome.github.io/flutter_colorpicker/" rel="nofollow noreferrer" target="_blank">https://mchome.github.io/flutter_colorpicker/</a></li></ul><h2 id="간단한-예제">간단한 예제</h2><code>flutter_colorpicker</code>가 많은 기능을 제공하기 때문에, 공식 예제가 조금 복잡합니다. 그래서 여기서는 간단한 예제를 만들어 봄으로써, <code>flutter_colorpicker</code>를 사용하는 방법에 대해서 알아보려 합니다.<picture><source srcset="/assets/images/category/flutter/2022/flutter_colorpicker/simple_example.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2022/flutter_colorpicker/simple_example.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2022/flutter_colorpicker/simple_example.jpg" alt="Flutter - flutter_colorpicker simple example"></picture>이 예제는 하단에 <code>flutter_colorpicker</code>를 표시하고, 색상을 변경하면, 상단에 표시된 <code>Hello world</code>의 배경색이 변경되도록 만들 예정입니다.<picture><source srcset="/assets/images/category/flutter/2022/flutter_colorpicker/simple_example_changed_color.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2022/flutter_colorpicker/simple_example_changed_color.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2022/flutter_colorpicker/simple_example_changed_color.jpg" alt="Flutter - flutter_colorpicker simple example changed color"></picture><h2 id="flutter-프로젝트-생성">Flutter 프로젝트 생성</h2>Flutter에서 <code>flutter_colorpicker</code>를 사용하여 사용자가 쉽게 색상을 입력할 수 있는 기능을 개발하는 방법에 대해 알아보기 위해 다음 명령어를 사용하여 Flutter의 새로운 프로젝트를 생성합니다.<div><pre><code>flutter create flutter_colorpicker_example
</code></pre></div><h2 id="flutter_colorpicker-설치">flutter_colorpicker 설치</h2><code>flutter_colorpicker</code>을 사용하기 위해, 다음 명령어를 실행하여 <code>flutter_colorpicker</code> 패키지를 설치합니다.<div><pre><code># cd flutter_colorpicker_example
flutter pub add flutter_colorpicker
</code></pre></div><h2 id="예제-작성">예제 작성</h2>이제 <code>flutter_colorpicker</code>를 사용하는 예제를 작성해 보도록 합시다. 예제를 작성하기 위해 <code>./lib/main.dart</code> 파일을 열고 다음과 같이 수정합니다.<div><pre><code>...
class _MyHomePageState extends State&lt;MyHomePage&gt; {
 Color _color = Colors.blue;

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text(widget.title),
 ),
 body: Center(
 child: Column(
 children: [
 Expanded(
 flex: 1,
 child: Container(
 width: double.infinity,
 color: _color,
 child: const Center(
 child: Text(
 "Hello World",
 style: TextStyle(
 fontSize: 20,
 fontWeight: FontWeight.bold,
 color: Colors.white,
 ),
 ),
 ),
 ),
 ),
 Padding(
 padding: const EdgeInsets.all(20.0),
 child: ColorPicker(
 pickerColor: _color,
 onColorChanged: (Color color) {
 setState(() {
 _color = color;
 });
 },
 pickerAreaHeightPercent: 0.9,
 enableAlpha: true,
 paletteType: PaletteType.hsvWithHue,
 ),
 ),
 ],
 ),
 ),
 );
 }
}
</code></pre></div>이 예제는 <code>flutter_colorpicker</code>에서 선택된 색상을 <code>State</code>에 저장하여, 변경된 색상을 화면에 표시하도록 하였습니다.<div><pre><code>class _MyHomePageState extends State&lt;MyHomePage&gt; {
 Color _color = Colors.blue;
 ...
}
</code></pre></div>화면 구성은 <code>Column</code> 위젯을 사용하여 상단에는 <code>flutter_colorpicker</code>에서 선택된 색상을 표시하고, 하단에는 <code>flutter_colorpicker</code>를 표시하도록 하였습니다.<div><pre><code>...
@override
Widget build(BuildContext context) {
 return Scaffold(
 ...,
 body: Center(
 child: Column(
 children: [
 Expanded(
 flex: 1,
 child: Container(
 width: double.infinity,
 color: _color,
 child: const Center(
 ...
 ),
 ),
 ),
 ),
 Padding(
 padding: const EdgeInsets.all(20.0),
 child: ColorPicker(
 ...
 ),
 ),
 ],
 ),
 ),
 );
}
</code></pre></div><code>flutter_colorpicker</code>에서 색상을 선택하면 <code>State</code>에 해당 색상이 저장되고, 저장된 색상을 <code>Container</code> 위젯의 배경색으로 표시하도록 하였습니다. 그리고 그 위에 흰색으로 <code>Hello world</code>라는 문자열을 표시하도록 하였습니다.<div><pre><code>...
child: Container(
 width: double.infinity,
 color: _color,
 child: const Center(
 child: Text(
 "Hello World",
 style: TextStyle(
 fontSize: 20,
 fontWeight: FontWeight.bold,
 color: Colors.white,
 ),
 ),
 ),
),
...
</code></pre></div><code>flutter_colorpicker</code>를 사용하기 위해서는 <code>ColorPicker</code> 위젯을 사용해야 합니다.<div><pre><code>...
child: ColorPicker(
 pickerColor: _color,
 onColorChanged: (Color color) {
 setState(() {
 _color = color;
 });
 },
 pickerAreaHeightPercent: 0.9,
 enableAlpha: true,
 paletteType: PaletteType.hsvWithHue,
),
...
</code></pre></div><code>ColorPicker</code>를 표시할 때, 기본 색상을 <code>pickerColor</code>에 설정할 수 있습니다. 그리고 <code>ColorPicker</code>에서 색상이 변경되면 <code>onColorChanged</code> 함수가 호출되며, 이때 선택된 색상이 파라메터로 전달됩니다.이 예제에서는 전달받은 색상을, <code>setState</code>을 사용하여 <code>State</code>에 저장된 색상을 변경하도록 하여, 화면에 표시된 색상이 변경되도록 하였습니다.<h2 id="확인">확인</h2>해당 예제를 실행해 보면, 다음과 같이 파란색 배경에 <code>Hello world</code>가 표시되는 것을 확인할 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2022/flutter_colorpicker/simple_example.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2022/flutter_colorpicker/simple_example.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2022/flutter_colorpicker/simple_example.jpg" alt="Flutter - flutter_colorpicker simple example"></picture>이제 <code>ColorPicker</code>를 사용하여 원하는 색상으로 변경하면, 다음과 같이 해당 색상으로 잘 변경되는 것을 확인할 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2022/flutter_colorpicker/simple_example_changed_color.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2022/flutter_colorpicker/simple_example_changed_color.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2022/flutter_colorpicker/simple_example_changed_color.jpg" alt="Flutter - flutter_colorpicker simple example changed color"></picture><h2 id="완료">완료</h2>이것으로 <code>Flutter</code>에서 <code>flutter_colorpicker</code>를 사용하여, 사용자가 색상을 좀 더 간단히 변경할 수 있는 기능을 구현해 보았습니다. <code>flutter_colorpicker</code>는 다양한 기능을 제공하고 있습니다. 우선, 제가 만든 간단한 예제로, 화면에 <code>ColorPicker</code>를 표시한 후, 필요한 기능들을 <code>flutter_colorpicker</code>의 공식 예제에서 확인하며 추가하면, 원하는 <code>ColorPicker</code>를 좀 더 쉽게 구현하실 수 있습니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div>

dev-yakuza

Flutter에서 flutter_colorpicker를 사용하여 사용자가 쉽게 색상을 선택할 수 있는 기능을 구현해 보도록 합시다.

[Flutter] flutter_colorpicker

댓글