<div id="readability-page-1" class="page"><div>
 <div id="SE-60bab83c-eb73-4b23-a7c4-00932f0a24a5">
 개요​flutter 에서 gradient background 를 적용하는 방법에 대해 설명한다.​​​Gradient 적용방법​아래 코드를 간단하게 설명하면,<ul><li>width, height 가 화면에 가득차는 Container 를 하나 만듬</li><li>decoration 속성으로 BoxDecoration 추가 (container 를 꾸밀때 사용)</li><li>gradient 속성으로 LinearGradient 를 사용 (선형 gradient = 방향에 따라 주욱 적용되는 gradient)<ul><li>다른 속성의 Gradient 도 존재함</li><li>begin, end, colors 세가지 속성을 지정해줘야함</li><li>begin : 시작지점 (최상단 가운데에서 시작하도록)</li><li>end: 끝지점 (최하단 가운데에서 끝나도록)</li><li>colors: 여러개를 넣을수 있음. 해당 color 들이 begin -&gt; end 사이에 차례대로 들어감</li></ul></li></ul>​
 </div> <div id="SE-1ef96c8c-9979-49d2-80c7-575c498bf27f">
 import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
 const MyHomePage({super.key});

 @override
 State&lt;MyHomePage&gt; createState() =&gt; _MyHomePageState();
}

class _MyHomePageState extends State&lt;MyHomePage&gt; {
 @override
 Widget build(BuildContext context) {
 return Container(
 width: double.infinity,
 height: double.infinity,
 decoration: BoxDecoration(
 gradient: LinearGradient(
 begin: Alignment.topCenter,
 end: Alignment.bottomCenter,
 colors: [
 Colors.blue,
 Colors.red,
 ],
 )
 )
 );
 }
}

 </div> <div id="SE-fcdc019f-6ba7-4736-96a6-7de2e06bdf48">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-fcdc019f-6ba7-4736-96a6-7de2e06bdf48&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDAxMDZfMTM3/MDAxNzA0NTI5Njg4NTE5.-vuoTd2HIx6JdJe_0jK903FqZkr8jPqsTqFKBfBPCSsg.QJT_3LSnkvH-7U82OGkCTGaDR5NML1_-VVcWWjNRYugg.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-01-06_%EC%98%A4%ED%9B%84_5.28.05.png&quot;, &quot;originalWidth&quot; : &quot;689&quot;, &quot;originalHeight&quot; : &quot;1113&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDAxMDZfMTM3/MDAxNzA0NTI5Njg4NTE5.-vuoTd2HIx6JdJe_0jK903FqZkr8jPqsTqFKBfBPCSsg.QJT_3LSnkvH-7U82OGkCTGaDR5NML1_-VVcWWjNRYugg.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-01-06_%EC%98%A4%ED%9B%84_5.28.05.png?type=w800" data-width="392" data-height="633" alt="">
 </a>
 
 </div>
 <div id="SE-8b7c41d2-2e9a-4943-a025-106de9bce715">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-8b7c41d2-2e9a-4943-a025-106de9bce715&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;256&quot;, &quot;originalHeight&quot; : &quot;103&quot;, &quot;linkUse&quot; : &quot;true&quot;, &quot;link&quot; : &quot;https://qr.kakaopay.com/2810060110000443710583945dc00000&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1" alt="">
 </a>
 
 카카오페이로 후원
 </div>
 <div id="SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;330&quot;, &quot;originalHeight&quot; : &quot;330&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1" alt="">
 </a>
 
 카카오페이 QR코드로 후원
 </div>
 </div></div>

나만의공간。

KIM JUNGHWAN

개요 flutter 에서 gradient background 를 적용하는 방법에 대해 설명한다. Gradient 적용방법 아래 코드를 간단하게 설명하면, width, height 가 화면에 가득차는 Container 를 하나 만듬 decoration 속성으로 BoxDecoration 추가 (container 를 꾸밀때 사용) gradient 속성으로 LinearGradient 를 사용 (선형 gradient = 방향에 따라 주욱 적용되는 gradient) 다른 속성의 Gradient 도 존재함 begin, end, colors 세가지 속성을 지정해줘야함 begin : 시작지점 (최상단 가운데에서 시작하도록) end: 끝지점 (최하단 가운데에서 끝나도록) colors: 여러개를 넣을수 있음. 해당 color 들이 begin -> end 사이에 차례대로 들어감 아래는.......

[Flutter] Gradient background

댓글