<div id="readability-page-1" class="page"><div>
 <div id="SE-60bab83c-eb73-4b23-a7c4-00932f0a24a5">
 개요​Flutter Material Scaffold 에서 제공하는 bottomNavigationBar 속성이 있다. 일반적으로 이 속성에 대해 찾아보면 페이지 이동을 할 수 있는 bottom navigation bar 를 만드는 예제가 대부분 이다. 하지만, bottomNavigationBar 속성에 BottomAppBar 를 사용해 footer 를 만든다던가, 화면 최하단에 위치하는 버튼을 만들수도 있다.​
 </div> <div id="SE-bb9b93c1-b93d-439c-b1a0-56bc1079823c">
 ​​​BottomNavigationBar​bottomNavigationBar 속성에 BottomNavigationBar 위젯을 사용하면 하단에 페이지 이동 가능한 버튼들을 위치시킬수 있다. 관련하여 구현하는 방법에 대해서는 이전에 포스팅했던 링크를 남겨두겠다.​
 </div> <div id="SE-46f6f242-49bf-4b3d-ae21-41bef5a0be2a">
 ​​​BottomAppBar​bottomNavigationBar 속성에 BottomAppBar 위젯을 사용할 수 있다. BottomAppBar 는 BottomNavigationBar 가 여러 위젯을 items 로 가지는것과 달리, child 속성으로 하나의 위젯을 갖게 된다. 이러한 특성을 사용하여 간단한 footer 나 버튼등을 화면 하단에 고정시킬수 있다.​
 </div> <div id="SE-7d102f42-e299-4ecf-a14f-31881eaf7c77">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-7d102f42-e299-4ecf-a14f-31881eaf7c77&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDAxMjBfMTM0/MDAxNzA1NzM5MTAzMTky.Te4iAIDyUFB3p3DIQ78F9kyiyAPa2UvS2osBdpWPVHgg.h_sm-db1KcdTBSJvJpbukC9XR2vg1geAwTZyH6l0Y3sg.PNG.writer0713/Simulator_Screen_Shot_-_iPhone_14_Pro_Max_-_2024-01-20_at_17.22.47.png&quot;, &quot;originalWidth&quot; : &quot;1290&quot;, &quot;originalHeight&quot; : &quot;2796&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDAxMjBfMTM0/MDAxNzA1NzM5MTAzMTky.Te4iAIDyUFB3p3DIQ78F9kyiyAPa2UvS2osBdpWPVHgg.h_sm-db1KcdTBSJvJpbukC9XR2vg1geAwTZyH6l0Y3sg.PNG.writer0713/Simulator_Screen_Shot_-_iPhone_14_Pro_Max_-_2024-01-20_at_17.22.47.png?type=w800" data-width="310" data-height="671" alt="">
 </a>
 
 BottomAppBar
 </div>
 <div id="SE-68fa5b39-8e19-4fb1-943d-48cab059cc47">
 ​아래는 위 캡쳐화면과 관련된 코드다. 주의깊게 볼 부분은 bottomNavigationBar 옵션이다.BottomAppBar 위젯을 사용하고 BottomAppBar 는 child 로 renderLoginButton() 에서 리턴하는 ElevatedButton 을 갖는걸 볼 수 있다.
 </div> <div id="SE-22d50c07-0fec-469a-a8f8-b016e94ebe45">
 class HomeScreen extends StatelessWidget {
 HomeScreen({super.key});

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 backgroundColor: Colors.black,
 leading: Row(
 children: [
 Icon(Icons.arrow_back_ios_new),
 Text("뒤로"),
 ],
 ),
 title: Text("로그인"),
 centerTitle: true,
 ),
 body: SafeArea(
 child: Container(
 padding: EdgeInsets.all(20),
 width: double.infinity,
 decoration: BoxDecoration(
 color: Color(0XFFFFFFFF),
 ),
 child: Expanded(
 child: Column(
 crossAxisAlignment: CrossAxisAlignment.start,
 children: [
 Expanded(child: _Top()),
 SizedBox(height: 100.0),
 Expanded(child: _Bottom()),
 ],
 ),
 ),
 ),
 ),
 bottomNavigationBar: BottomAppBar(child: renderLoginButton()),
 );
 }

 ElevatedButton renderLoginButton() {
 return ElevatedButton(
 style: ElevatedButton.styleFrom(
 backgroundColor: Colors.green,
 minimumSize: Size.fromHeight(80),
 ),
 onPressed: () {},
 child: Text("로그인하기"),
 );
 }
}
 </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 Material Scaffold 에서 제공하는 bottomNavigationBar 속성이 있다. 일반적으로 이 속성에 대해 찾아보면 페이지 이동을 할 수 있는 bottom navigation bar 를 만드는 예제가 대부분 이다. 하지만, bottomNavigationBar 속성에 BottomAppBar 를 사용해 footer 를 만든다던가, 화면 최하단에 위치하는 버튼을 만들수도 있다. BottomNavigationBar bottomNavigationBar 속성에 BottomNavigationBar 위젯을 사용하면 하단에 페이지 이동 가능한 버튼들을 위치시킬수 있다. 관련하여 구현하는 방법에 대해서는 이전에 포스팅했던 링크를 남겨두겠다. BottomAppBar bottomNavigationBar 속성에 BottomAppBar 위젯을 사용할 수 있다. Bot.......

[Flutter] BottomNavigationBar (feat. footer)

댓글