<div id="readability-page-1" class="page"><div>
 <div id="SE-60bab83c-eb73-4b23-a7c4-00932f0a24a5">
 ​​개요​Flutter AppBar 의 색상을 transparent (투명) 하게 하는 방법에 대해 설명한다. ​​​AppBar 적용​크게 어려운건 없어서 바로 코드를 보자.​<ul><li>appBar<ul><li>backgroundColor : Colors.transparent = 투명하게 만들자.</li><li>elavation: 0.0 = 값이 높을수록 색이 진해진다.</li><li>leading : (무시해도 됨)</li></ul></li><li>extendBodyBehindAppBar: true = body 의 영역을 appBar 영역까지 넓힌다.</li></ul>
 </div> <div id="SE-a9c67cdf-0f2e-4bb2-b001-2cc9507387cb">
 import 'package:flutter/material.dart';

class TestScreen extends StatelessWidget {
 const TestScreen({super.key});

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 backgroundColor: Colors.transparent, // appBar 투명색
 elevation: 0.0, // appBar 그림자 농도 설정 (값 0으로 제거)
 leading: IconButton(
 onPressed: () {},
 iconSize: 30.0,
 icon: const Icon(Icons.menu),
 ),
 ),
 extendBodyBehindAppBar: true, // body 영역을 appbar 위치까지 넓히기
 body: const Center(
 child: Text("Hello World"),
 ));
 }
}

 </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 AppBar 의 색상을 transparent (투명) 하게 하는 방법에 대해 설명한다. AppBar 적용 크게 어려운건 없어서 바로 코드를 보자. appBar backgroundColor : Colors.transparent = 투명하게 만들자. elavation: 0.0 = 값이 높을수록 색이 진해진다. leading : (무시해도 됨) extendBodyBehindAppBar: true = body 의 영역을 appBar 영역까지 넓힌다.

[Flutter] Appbar transparent

댓글