상태관리 라이브러리를 사용하는 이유

• 플러터에서 상태를 관리하는 기초적 방법은 setState를 사용하는 것이다. 하지만 위젯 트리의 뎁스가 커지고 스크린에서 스크린으로 데이터를 넘겨줄 때 많은 어려움이 발생한다. 이러한 점을 완화시켜주기 위해 상태관리 툴을 사용하는 것이다.

상태관리에 몇 가지 라이브러리가 있는데 여기서는 riverpod를 사용해 볼 것이다.

설치하기

• https://pub.dev/packages/riverpod
  
• 링크에 들어가 flutter_riverpod 패키지를 사용한다.
• pubspec.yaml 파일에 들어가 dependencies에 추가한다.
  

레이아웃

• 예제를 살펴보기 전에 우선 프로젝트 레이아웃을 만들어주겠다.

• 앞으로 살펴보는 모든 예제에 적용되는 레이아웃이다.

• lib 폴더에 layout 폴더를 생성하고 default_layout.dart 파일을 만들어 기본 레이아웃를 만들어 놓는다.

import 'package:flutter/material.dart';

class DefaultLayout extends StatelessWidget {
  final String title;
  final Widget body;
  // appbar 오른쪽 끝에 들어가는 값
  final List<Widget>? actions;

  const DefaultLayout({
    required this.title,
    required this.body,
    this.actions,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        actions: actions,
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        child: body,
      ),
    );
  }
}

• screen 폴더를 생성하고 home_screen.dart를 생성하고 DefaultLayout을 적용해준다.

import 'package:flutter/material.dart';
import 'package:riv/layout/default_layout.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      title: 'HomeScreen',
      body: ListView(
        children: [
        ],
      ),
    );
  }
}

• provider를 사용하려면 main.dart 파일에 있는 MaterialApp 위젯 위에 ProviderScope를 감싸줘야 한다.

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riv/screen/home_screen.dart';

void main() {
  runApp(
    ProviderScope(
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: HomeScreen(),
      ),
    ),
  );
}