<div id="readability-page-1" class="page"><div>
                <div id="SE-60bab83c-eb73-4b23-a7c4-00932f0a24a5">
                                    <p id="SE-86d9558a-1b87-49c3-ba63-64dbe0a76770"><span id="SE-4d995372-e547-45a9-a811-109dc82836de"><b>개요</b></span></p><p id="SE-565fa3ed-b8f1-48b0-8a57-41dfe87ff05b"><span id="SE-d960a05a-55b6-4ac9-9793-e96a1b724dda">​</span></p><p id="SE-24ba97d4-d746-47f7-a72b-6756947f238a"><span id="SE-b39bc028-b44c-4773-80ec-109838e2f192">스크린이나 그 외 시스템 ui 에 의해 가려진 영역의 크기를 알수있는 viewInsets 에 대해 설명한다.</span></p><p id="SE-a8ee03a0-af60-40c1-8421-7c4d06d5ca02"><span id="SE-d75bcad3-dbf6-4a7f-a265-abd3aa51ace9">​</span></p><p id="SE-79560e9e-3ccb-43e2-9cc8-b985abf8d25d"><span id="SE-77496f38-e3cf-4f62-a164-e8b706d0b3ee">​</span></p><p id="SE-8e1d893f-4a40-4dc4-9a9b-8bd7113ce421"><span id="SE-cb17ce38-0397-4ebd-a7f0-a65e0c1d705b">​</span></p><p id="SE-936efb97-16be-436b-b3df-45ad5ec3ce71"><span id="SE-3854d746-1307-4b1c-9532-bd4a56341100"><b>viewInsets</b></span></p><p id="SE-461322ae-0ff5-42c7-9e0f-fe420b2fb3db"><span id="SE-4872e06d-0cff-481b-96dd-b853ff923f48">​</span></p><p id="SE-25488583-947f-41f7-a2db-b63f8bca9417"><span id="SE-707e98ca-cc29-4e01-ba83-02acfc5cd705">예를 들어, textField 를 클릭하면 하단에서 키보드가 올라오는데 해당 키보드에 의해 보여져야할 영역이 가려지면 안되는 경우가 있다. 그럴때는 키보드 (그 외 시스템 ui) 영역의 크기만큼 하단에 margin 을 주던가 하면 해결된다. </span></p><p id="SE-5bfb3304-3c05-4623-820b-34cf6a07a185"><span id="SE-d7ae17f0-6575-40c1-bbf5-c7969dc89913">​</span></p><p id="SE-5b508bda-a54e-4a75-a5b6-8fab75e52e41"><span id="SE-3a1f6238-e2f7-4213-8b5d-bfc5e72ab966">이럴때 viewInsets 속성을 통해 시스템에 의해 가려진 영역 size 를 알아낼수 있다.</span></p><p id="SE-3e7b1ff8-b2e4-4579-8fc2-42d705116496"><span id="SE-14a31dd4-6cca-4b66-8573-9135cc432538">​</span></p><p id="SE-c34f27b0-0d46-40fd-8882-be34e7d14d14"><span id="SE-fd362b32-94d4-40ab-b401-d83f345d20a2">아래와 같이 build 메서드에 bottomViewInset 을 print 하도록 코드를 짰다.</span></p><p id="SE-88dea06b-6fe6-4d7e-a31e-a07f64e5742b"><span id="SE-ca5c5e23-ada3-407f-bd7d-293b6fc79ee5">simulator 에서 keyboard 를 화면에 노출시키기 위해 TextField 도 추가했다.</span></p>
                            </div>                <div id="SE-5704ce6a-d19b-4543-a36c-f086dba547dc">
                                    <p>class _TestScreenState extends State&lt;TestScreen&gt; {
  @override
  Widget build(BuildContext context) {
    var bottomViewInset = MediaQuery.of(context).viewInsets.bottom;
    print("&gt;&gt;&gt; bottomViewInset : $bottomViewInset");

    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
          color: Colors.amber,
        ),
        child: TextField(),
      ),
    );
  }
}</p>
                                </div>                <div id="SE-87ffecdf-78a4-461c-ab1b-78c4a01804e9">
                                    <p id="SE-5c5f2387-97cd-4e0a-aa97-7a33f1d33d1c"><span id="SE-75a74c2f-161f-40d1-a2b7-362370629c8b">​</span></p><p id="SE-c532a459-83e8-44e9-a48f-dbbca7cf7c49"><span id="SE-72b59d56-bbac-49ca-9085-5f5cb9bc35f8">실행하면 아래와 같은 화면이 나온다. 최상단에는 TextField 가 있다.</span></p><p id="SE-35dd48cf-e584-4264-98f2-83b11c1cf7ce"><span id="SE-93d70401-bfb0-499f-af36-957918e0dec7">이 상태에서 console 을 보면 'flutter: &gt;&gt;&gt; bottomViewInset : 0.0' 라고 나오는걸 볼 수 있다.</span></p><p id="SE-7d17ba50-04ec-4154-9c39-4da05736b86b"><span id="SE-07402929-f3ea-41ac-aa4d-2d77bd16fd72">즉, 시스템 ui 에 가려진 영역이 없다는 뜻이다.</span></p>
                            </div>                <div id="SE-a523180b-edb1-44a1-873a-955bf1dfb0bc">
                            <div>
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-6cf9e585-2d39-4741-94b0-6af32952ed90&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDAxMDZfMjM0/MDAxNzA0NTMxMTQxMjI3.l9lAVzO_sK5fk1NL8MI5Qt1BVQ7M7rtVTmeRenzn2O8g.8Jj8Vh6ig1cQAAVHiK4zY7J4DTl25zpkI3lUMpEt720g.PNG.writer0713/simulator_screenshot_80F00FFC-2FE6-4027-8E16-5C25D6458505.png&quot;, &quot;originalWidth&quot; : &quot;750&quot;, &quot;originalHeight&quot; : &quot;1334&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDAxMDZfMjM0/MDAxNzA0NTMxMTQxMjI3.l9lAVzO_sK5fk1NL8MI5Qt1BVQ7M7rtVTmeRenzn2O8g.8Jj8Vh6ig1cQAAVHiK4zY7J4DTl25zpkI3lUMpEt720g.PNG.writer0713/simulator_screenshot_80F00FFC-2FE6-4027-8E16-5C25D6458505.png?type=w400" data-width="384" data-height="683" alt="">
                                    </a>
                                </p>
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-fb2d2d57-e425-409a-aab8-4c28c70ee71b&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDAxMDZfNjkg/MDAxNzA0NTMxNDc0NjEz.ZzVUfaCZCGFqeFwMUb4lmeo7W05l5GHSYxR-bwPslTgg.5_FKdODTTqe1Esqv9O8x752uPiLdCGRLJg1Qiw0tgPQg.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-01-06_%EC%98%A4%ED%9B%84_5.57.50.png&quot;, &quot;originalWidth&quot; : &quot;327&quot;, &quot;originalHeight&quot; : &quot;113&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDAxMDZfNjkg/MDAxNzA0NTMxNDc0NjEz.ZzVUfaCZCGFqeFwMUb4lmeo7W05l5GHSYxR-bwPslTgg.5_FKdODTTqe1Esqv9O8x752uPiLdCGRLJg1Qiw0tgPQg.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-01-06_%EC%98%A4%ED%9B%84_5.57.50.png?type=w800" data-width="327" data-height="113" alt="">
                                    </a>
                                </p>
                            </div>
                            <p id="SE-c96eed45-ca4e-4913-8691-e81aef1e3a05"><span id="SE-b1a82637-f9d6-4f6f-a12b-177528edd86c">키보드 노출 안했을때</span></p>
                        </div>                <div id="SE-4b2c47b3-86e3-43ee-b7b6-73ff82536b7a">
                                    <p id="SE-020480ca-a973-46f3-97f0-700447e3814b"><span id="SE-9a4f767b-b415-4f85-95cb-69093cabf612">​</span></p><p id="SE-ca2ed910-1567-434b-a877-78f7e6bad50d"><span id="SE-2f16d0e8-6478-4bc0-9f9e-b1fe2d6f6a41">이제 simulator 에서 (macOS 기준) command + k 를 눌러보자. 그러면, 아래 화면과 같이 키보드가 하단에서 올라오는걸 볼 수 있다. 그리고, console 을 보면 bottomViewInset 이 여러차례 console 에 찍히는걸 볼 수 있다.</span></p><p id="SE-f59859ab-9952-4a51-acf9-4bc52f22e781"><span id="SE-cf644712-4ebf-4e67-931b-ccdea6ad5cae">최종적으로는 키보드만큼의 영역인 260.0 이 화면을 가렸다는걸 알수있다.</span></p>
                            </div>                <div id="SE-f4e875a3-37d6-457b-9843-3878ff1b6fad">
                            <div>
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-8c43731f-efc0-4c86-9ab4-2967c94e4b72&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDAxMDZfMjA3/MDAxNzA0NTMxMzc2MDI5.CKXt3n4xDVlXV_EQA75ytNvPQ4bUKoBlcFaGom4M6OUg.BXRhkcOr-xLt1XJAnPQvLXSJzd_83tnRNf5_Z4zghL4g.PNG.writer0713/simulator_screenshot_B69BAFA8-419F-4EFB-949D-818B72EE3F35.png&quot;, &quot;originalWidth&quot; : &quot;750&quot;, &quot;originalHeight&quot; : &quot;1334&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDAxMDZfMjA3/MDAxNzA0NTMxMzc2MDI5.CKXt3n4xDVlXV_EQA75ytNvPQ4bUKoBlcFaGom4M6OUg.BXRhkcOr-xLt1XJAnPQvLXSJzd_83tnRNf5_Z4zghL4g.PNG.writer0713/simulator_screenshot_B69BAFA8-419F-4EFB-949D-818B72EE3F35.png?type=w400" data-width="375" data-height="667" alt="">
                                    </a>
                                </p>
                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-3690da72-3280-4d1c-9237-9f908ec0f97a&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyNDAxMDZfNSAg/MDAxNzA0NTMxNDA0Mzk1.zOdCGsfiH3UzQrSy7KdAnmHygSLIph8OuWsiqwQBJI8g.HyW5wqM2omFjsFKfFLeYy8iDMzFvOqKRiu-kY_Y_B64g.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-01-06_%EC%98%A4%ED%9B%84_5.56.42.png&quot;, &quot;originalWidth&quot; : &quot;417&quot;, &quot;originalHeight&quot; : &quot;393&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyNDAxMDZfNSAg/MDAxNzA0NTMxNDA0Mzk1.zOdCGsfiH3UzQrSy7KdAnmHygSLIph8OuWsiqwQBJI8g.HyW5wqM2omFjsFKfFLeYy8iDMzFvOqKRiu-kY_Y_B64g.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2024-01-06_%EC%98%A4%ED%9B%84_5.56.42.png?type=w800" data-width="417" data-height="393" alt="">
                                    </a>
                                </p>
                            </div>
                            <p id="SE-08c30a84-7322-4fae-81f4-e92f4a1136fa"><span id="SE-d251c804-54ce-47f2-b163-c1e104d50ff4">키보드 노출 했을때</span></p>
                        </div>                                                                <div id="SE-8b7c41d2-2e9a-4943-a025-106de9bce715">
                                <p><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>
                                </p>
                            <p id="SE-d5bf551a-c6ba-4e06-b5c5-e4aa9d1ee9cb"><span id="SE-5f58a99e-73e7-4042-833d-33efea0b809e">카카오페이로 후원</span></p>
                        </div>
                <div id="SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86">
                                <p><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>
                                </p>
                            <p id="SE-8276644c-66c5-42a6-bda7-2637d5e90eba"><span id="SE-9a8d43d0-5116-4646-9431-7463b6be9a7d">카카오페이 QR코드로 후원</span></p>
                        </div>
                                                    </div></div>

나만의공간。

KIM JUNGHWAN

개요 스크린이나 그 외 시스템 ui 에 의해 가려진 영역의 크기를 알수있는 viewInsets 에 대해 설명한다. viewInsets 예를 들어, textField 를 클릭하면 하단에서 키보드가 올라오는데 해당 키보드에 의해 보여져야할 영역이 가려지면 안되는 경우가 있다. 그럴때는 키보드 (그 외 시스템 ui) 영역의 크기만큼 하단에 margin 을 주던가 하면 해결된다. 이럴때 viewInsets 속성을 통해 시스템에 의해 가려진 영역 size 를 알아낼수 있다. 아래와 같이 build 메서드에 bottomViewInset 을 print 하도록 코드를 짰다. simulator 에서 keyboard 를 화면에 노출시키기 위해 TextField 도 추가했다. 실행하면 아래와 같은 화면이 나온다. 최상단에는 Te.......

[Flutter] viewInsets (시스템에 의해 가려진 영역)

댓글