[016] 플러터 (Flutter) 배우기 - Gradient (그라데이션 적용)

안녕하세요~ totally 개발자입니다.

 

Gradient

 

오늘 살펴볼 부분은 그라데이션을 적용하는 방법입니다. 많은 에플리케이션을 보면 화려하고 멋진 그라데이션을 적용한 것을 볼 수 있습니다. 바로 예제를 통해 확인해보도록 하겠습니다.

 

단색을 적용한 모습

일반적으로 단색을 적용하면 위처럼 다소 밋밋하게 보일 수 있습니다. 조금 더 세련된 디자인을 위해서는 그라데이션을 적용하면 됩니다. 

 

LinearGraident

 

먼저 살펴볼 그라데이션은 LinearGradient입니다. 아래 예제를 살펴보겠습니다.

LinearGradient을 적용한 모습

LinearGradient(선형 그라데이션)을 적용한 모습입니다. linear는 선, 직선 모양의 의미로 begin과 end를 수반하여 시작 방향과 끝 방향이 정해져 있는 그라데이션이며 colors의 속성에는 배열 형태로 여러 색상을 부여할 수 있습니다. 플러터에서 Colors.색상명 다음에 대괄호 [ ]를 사용하여 100부터 900까지 백 단위의 숫자를 사용하면 옅게, 진하게의 강도를 나타낼 수 있습니다. (컬러마다 숫자의 범위가 다릅니다) 즉 Colors.blue[900]는 제일 진한 파란 색이며, Colors.blue[100]는 가장 옅은 파란 색입니다. 

 

 

RadialGradient

 

RadialGradient는 원형 그라데이션을 표현할 때 사용합니다. 사용법은 LinearGradient와 유사하나 다른 점은 원형 그라데이션이어서 중심점의 기준을 정해주어야 하며 생략하면 자동으로 Alignment.center가 기본값이 됩니다. 또한 stops 속성을 통해 동심원 즉 각 색깔의 인덱스에 맞는 원의 크기를 정해줄 수 있습니다.

 

기본적인 RadialGradient 모습

일반적으로 RadialGradient를 적용한 모습입니다.

 

center 기준을 바꿔주고 stops를 추가한 모습

center 즉 중심 정렬점을 좌측 하단으로 변경해주고 stops 속성을 통해 각 동심원(Concentric)의 크기를 지정했습니다. 디자인에 따라 LinearGraident 혹은 RadialGradient를 적용해주시면 됩니다. 전체 소스 코드는 아래 RadialGradient만 첨부했으니 참고하시면 됩니다. 감사합니다.

 

[전체 소스 코드]

 

	import 'package:flutter/material.dart';
	class TestView extends StatefulWidget {
	@override
	State<TestView> createState() => _TestViewState();
	}
	class _TestViewState extends State<TestView> {
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text("Test Title"),
	),
	drawer: Drawer(
	child: ListView(
	padding: EdgeInsets.zero,
	children: [
	const DrawerHeader(
	decoration: BoxDecoration(
	color: Colors.blue,
	),
	child: Text("Drawer Header Part"),
	),
	ListTile(
	title: Text("Menu 1"),
	),
	],
	),
	),
	body: Container(
	width: MediaQuery.of(context).size.width,
	height: MediaQuery.of(context).size.height,
	decoration: BoxDecoration(
	gradient: RadialGradient(
	center: Alignment.bottomLeft,
	colors: [
	Colors.blue[100],
	Colors.blue[300],
	Colors.blue[500],
	],
	stops: [0.1, 0.5, 1.0],
	),
	),
	),
	);
	}
	}

view raw 016.dart hosted with ❤ by GitHub

[유튜브 강좌 영상]

 

https://youtu.be/wrwyFnOvv4Q