<div id="readability-page-1" class="page"><div>
 <div id="SE-60bab83c-eb73-4b23-a7c4-00932f0a24a5">
 ​개요​Flutter 의 대표적인 state manager 중 하나인 Riverpod 설치방법에 대해 알아보자.riverpod 의 문법적인 사용법에 대해서는 여기서 다루지 않겠다.​​​디펜던시​우선 기본적으로 flutter 에서 riverpod 을 사용하려면 flutter_riverpod 을 디펜던시로 추가하면 바로 사용 가능하다.​
 </div> <div id="SE-a8dbe080-1c56-41ce-8435-4b5e596fca21">
 dependencies:
 flutter_riverpod: ^2.4.9
 </div> <div id="SE-884bcdd5-3605-46c0-be7f-74183994561b">
 ​그 외에 추가적으로 도움이 되는 패키지들도 있다.​<ul><li>riverpod_lint :<ul><li>riverpod 관련하여 개발자들이 자주 하는 실수를 방지하도록 도와준다.</li><li>필수는 아니지만 사용하길 추천한다.</li><li>dev_dependencies 에 추가해야한다.</li><li>custom_lint 로 만들어졌기 때문에 custom_lint 도 함께 dev_dependencies 에 추가해줘야 한다.</li><li>그리고, analysis_options.yaml 파일에서 custom_lint 를 plugins 에 추가해줘야 한다.</li></ul></li></ul>​<ul><li>아래와 같이 dev_dependencies 를 추가한다.</li></ul>
 </div> <div id="SE-a9ebf943-45d1-49c2-9c4c-153484a6e92c">
 dev_dependencies:
 riverpod_lint: ^2.3.7
 custom_lint: ^0.5.7
 </div> <div id="SE-b6ffc375-7c30-437a-b7df-5cfd975c6bf1">
 ​<ul><li>analysis_options.yaml 에 다음 내용을 추가한다.</li></ul>
 </div> <div id="SE-098514ea-ba93-4863-9824-59b555d29888">
 analyzer:
 plugins:
 - custom_lint
 </div> <div id="SE-61fa0cb0-4256-4966-9de0-5db7fa1e8b9f">
 ​​<ul><li>riverpod_generator<ul><li>riverpod 을 작성하는 방법에는 두가지가 있다.<ul><li>수동으로 직접 코드 작성</li><li>code generator 를 사용한 code generation</li></ul></li><li>수동으로 작성할 경우에는 위에서 설명한것처럼 flutter_riverpod 만 디펜던시로 추가하면 된다.</li><li>code generator 를 사용하는 방법의 경우 아래와 같이 디펜던시를 구성해줘야 한다.<ul><li>riverpod_annotation : riverpod code generator 에 필요한 어노테이션 포함</li><li>riverpod_generator : riverpod code generator</li><li>build_runner : code generator 실행도구</li></ul></li></ul></li></ul>
 </div> <div id="SE-380b7a63-1520-4918-84de-4e760b0844a0">
 dependencies:
 flutter_riverpod: ^2.4.9
 riverpod_annotation: ^2.3.3

dev_dependencies:
 build_runner: ^2.4.7
 riverpod_generator: ^2.3.9
 </div> <div id="SE-089fe05f-c725-46f5-b1ed-3cc90e60b04e">
 ​​​vscode riverpod extension (Flutter Riverpod Snippets)​vscode 에서 riverpod snippets extension 을 설치하자. 해당 익스텐션을 설치하면 riverpod 관련된 코드를 좀 더 쉽게 작성할수 있다.​코드 수동작성시 매번 작성해야 하는 보일러플레이트 성격의 riverpod 구조뿐 아니라, 코드 제네레이션 시 필요한 함수형 riverpod 구조도 간단하게 작성 가능하다.​<ul><li>대표적인 예제<ul><li>riverpodPart : part 'basic_provider.g.dart'; 추가</li><li>riverpod : @riverpod 이 붙은 함수형 provider 생성</li><li>provider : Provider 수동 작성 코드 생성 </li><li>etc</li></ul></li></ul>​
 </div> 
 <div id="SE-06867c2e-df38-493c-81b6-d7bf01bb70a9">
 ​​​코드 작성 및 code generation​예를 들어, 아래와 같이 코드를 작성하고 code generator 를 실행해보자.
 </div> <div id="SE-e495eb42-0db9-4180-a6c0-a8cb3e71233b">
 import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'basic_provider.g.dart';

@riverpod
String hello(HelloRef ref) {
 return "hello";
}

 </div> <div id="SE-44c71107-071b-47aa-b9a6-5b68e1d7ad75">
 ​그러면, 아래와 같이 코드가 생성되는것을 볼 수 있다.
 </div> <div id="SE-4d604176-baa4-49c4-a375-9feadfa82ecf">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-4d604176-baa4-49c4-a375-9feadfa82ecf&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMzEyMTRfMTMy/MDAxNzAyNTI5Mjg5MDQ0.nbji86Ht2TLsejFRpHXUf1XKcdIpOEpM9NvP3IeMAekg.PMV7Nv9KT-LP-Py6kTVKAERUUf1rGbpq1fPfOtp5Nmog.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2023-12-14_%EC%98%A4%ED%9B%84_1.48.05.png&quot;, &quot;originalWidth&quot; : &quot;290&quot;, &quot;originalHeight&quot; : &quot;98&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://mblogthumb-phinf.pstatic.net/MjAyMzEyMTRfMTMy/MDAxNzAyNTI5Mjg5MDQ0.nbji86Ht2TLsejFRpHXUf1XKcdIpOEpM9NvP3IeMAekg.PMV7Nv9KT-LP-Py6kTVKAERUUf1rGbpq1fPfOtp5Nmog.PNG.writer0713/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7_2023-12-14_%EC%98%A4%ED%9B%84_1.48.05.png?type=w800" data-width="693" data-height="234" 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 의 대표적인 state manager 중 하나인 Riverpod 설치방법에 대해 알아보자. riverpod 의 문법적인 사용법에 대해서는 여기서 다루지 않겠다. 디펜던시 우선 기본적으로 flutter 에서 riverpod 을 사용하려면 flutter_riverpod 을 디펜던시로 추가하면 바로 사용 가능하다. 그 외에 추가적으로 도움이 되는 패키지들도 있다. riverpod_lint : riverpod 관련하여 개발자들이 자주 하는 실수를 방지하도록 도와준다. 필수는 아니지만 사용하길 추천한다. dev_dependencies 에 추가해야한다. custom_lint 로 만들어졌기 때문에 custom_lint 도 함께 dev_dependencies 에 추가해줘야 한다. 그리고, analysis_options.yaml 파일에서 custo.......

[Flutter] Riverpod

댓글