[Flutter] 로그인 상태 관리 - Provider 사용

 

StatelessWidget, StatefullWidget 이런 내용은 생략하고, 날림으로 예시만 적어보았습니다.

우리는 지금 당장 로그인 상태 관리를 어떻게 하는지가 필요하니까요.

코드블럭에서 주석 위주로 보시면 되고,

용어 사용이 부정확한 것은 양지하여 주시기 바랍니다.

 

파일 구성은 위와 같습니다.

파일 간의 관계는 위와 같습니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:{app_name}/model/app_model/login_model.dart';

void main() {
  runApp(
    // provider를 하나만 쓸 게 아니니까, main에서 MultiProvider를 선언합니다.
    MultiProvider(
      providers: [
        // provider로 생성하는 것이기 때문에 create 사용
        ChangeNotifierProvider(create: (_) => Login()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyApp createState() => _MyApp();
}

class _MyApp extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: {app_name},
      // 무시: 첫 화면은 스플래시
      home: SplashPage(),
    );
  }
}

위 코드는 main.dart 입니다.

 

import 'package:flutter/material.dart';

// with ChangeNotifier: provider로 만들어줍니다.
class Login with ChangeNotifier {
  String email;
  
  Login({
    this.email,
  });

  String getEmail() => email;
  void setEmail(String _email) {
    email = _email;
    notifyListeners();
  }
}

위 코드는 login_model.dart 입니다.

 

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:{app_name}/model/app_model/login_model.dart';

class MainLoginPage extends StatefulWidget {
  @override
  _MainLoginPage createState() => _MainLoginPage();
}

class _MainLoginPage extends State<MainLoginPage> {
  /*
   * 여기는 다양한 function이 위치할 것입니다.
   */
  @override
  Widget build(BuildContext context) {
    // 사용하고자 하는 provider를 선언합니다.
    Login loginInfo = Provider.of<Login>(conext);
    return Scaffold(
      body: Container(
        child: Column(
          childred: [
            TextFormField(
              // TextFormField가 하나 있다고 하겠습니다.
              controller: emailTextController,
            ),
            FlatButton(
              // 다른 속성은 생략
              onPressed: () async {
                // 클릭 시, provider인 loginInfo를 호출하여 setEmail 실행
                loginInfo.setEmail(emailTextController);
              },
            ),
          ],
        ),
      ),
    );
  }
}

위 코드는 login_page.dart 입니다.

 

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:{app_name}/model/app_model/login_model.dart';

class FreeBoardPage extends StatefulWidget {
  @override
  _FreeBoardPage createState() => _FreeBoardPage();
}

class _FreeBoardPage extends State<FreeBoardPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appBar(),
      body: Container(
        child: Column(
          children: <Widget>[Expanded(child: _customSliverView())],
        ),
      ),
    );
  }
  
  // 다른 요소들은 다 생략하였습니다.
  
  CustomScrollView _customSliverView() {
    // 여기서 이렇게 provider를 선언해도 괜찮습니다.
    Login loginInfo = Provider.of<Login>(context);
    return CustomScrollView(
      slivers: <Widget>[
        // 생략이 많습니다.
        Text(
          // provider인 loginInfo에서 getMail 호출
          loginInfo.getEmail(),
        ),
      ],
    );
  }
}

위 코드는 free_board_main_page.dart 입니다.

 

이렇게 하면, MainLoginPage에서 저장한 로그인 상태를 FreeBoardPage에서 사용할 수 있습니다.