Flutter provider? 제공해줄께!

BBANG-JUN·2020년 3월 24일

Firebase daily flutter

🌊Daily

목록 보기

9/15

오늘 하루엔 뭐했니?

그냥 적어봐! LEE렇게!

2020.03.22 LEE'Today_회고록

목차
1. Flutter provide
2. Consumer로 편리하게!

1. Flutter provider

오늘은 Flutter의 provide 기능을 이용해서 모든 데이터들을 한번에 변화를 줄 예정이다!
우선 어떻게 변화하였는지 이미지를 보자!

화면을 보시면 '계정이 없으시다구요? 클릭하세요!' 를 클릭하면 위와 같이 이미지가 빨간 화면으로 변화되며 '회원가입'으로 전환되게 된다.
이러한 과정을 provide로 해결할 것이다!

provider? : 제공해 주는 것!

우선 우측 상단에 Flutter Inspector를 클릭해보자.

해당 빨간 표시 표시부분을 클릭하게 되면 다음과 같이 나온다.

이것을 우리는 위젯트리라고 한다.
지금까지 개발한 위젯트리들을 편하게 보여주고, 위젯의 하위 위젯들을 편하게 확인할 수 있다.
여기서 provider의 기능을 하위 메뉴들에게 동시에 일하도록 전달할 수 있는 메서드이다.

[사용하기 위한 준비]

해당 메서드를 사용하기 위해선 패키지를 사용해야하는데 패키지는 해당 링크로 들어가 확인하실 수 있다.

패키지는 pubspec.yaml에서,
dependercies: 를 찾아 하위에 두번 들여쓰기 후 provider: ^4.0.4를 쓴 후, packages get하여 project에 적용시킨다.

그럼 우리는 provider을 사용할 수 있게 되었다!

[사용]

provide는 우선 '위젯' 하위 위젯들에게만 제공할 수 있다.
예를 들면, 사진과 마찬가지로 스택에 provider를 적용시키면 하위에 있는 메뉴들이 모두 적용된다.

이제 로그인에 필요한 변경될 부분을 생각해보기전에!
우리가 제공할 데이터가 무엇인가를 생각해보자.

1. '회원가입 문구를 누르면?'
2. 총 4가지가 변화됨을 알 수 있다. (Paint, Text, RaisdButton, Text)
3. 그렇담 바꿔주기 위해서 bool로 값을 바꿔주는 코드를 작성해보자.

코드는 github로 들어가면 확인하실 수 있다.

4. 이제 하나씩 provider를 사용해서 변경해보자.

import 'package:provider/provider.dart';
import 'package:kids_course/data/join_or_login.dart';

우선 패키지 추가는 필수이다!
아참! 그리고 하위메뉴를 모두 포함하고 있어야 하므로, 우린 provider를 class AuthPage 적용시키겠다.

1-1. Paint 변경

class AuthPage

painter: LoginBackground(isJoin: Provider
                  .of<JoinOrLogin>(context)
                  .isJoin),

위 isJoin은 provider를 사용할 때, 참과 거짓이 변경해주는 메서드이다.
우리는 변경시킬 매개체를 Text'계정이 필요하세요?' 이 부분을 시작으로 한다.

Text를 클릭하면?
1. 그림과 같이 img뒤의 배경이 빨간색으로 변하고,
2. Text문구가 사라지고,
3. 로그인 버튼이 색상이 바뀌며 '회원가입'으로 문구가 변하고,
4. Text'계정이 필요하세요?'가 '회원가입이 됩니다!'로 수정된다.

import 'package:flutter/material.dart';

class LoginBackground extends CustomPainter{

  // provider 을 위한 생성자를 만들어야한다.
  LoginBackground({@required this.isJoin}); // class 생성자 (고객이 주문한 주문서)
  final bool isJoin;

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = isJoin ? Colors.red : Colors.indigo;
    // .. 때문에 = , = 이 가능하다.
    // Paint 오브젝트를 생성을 하여, 그 안에 있는 color 값을
    // Colors.blue 로 지정하여 paint에 넣어라!
    canvas.drawCircle(Offset(size.width*0.5, size.height*0.2), size.height*0.5, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }

}

해당 코드에서는 provider을 받아 올 생성자를 만든다. isjoin이라는 변수를 가지고 우리는 삼항 연산자를 이용해 색깔을 변화시킨다.
삼항 연산자란?
[ isjoin ? 참 : 거짓 ] 의 수식이며 isjoin이 참일 경우 앞에 조건이, 거짓일 경우는 뒤에 조건이 걸려온다.
즉, 여기서는 일반적인 상태가 거짓으로 초기화 되있고 indigo(남색) 상태이며, Text를 클릭하면 참으로 바뀌면서 red(빨간색)으로 변화한다고 보시면 된다.

동시다발적으로 다른 것들도 변화되어 사용자에게 한번에 보여 줄 수 있을 때 사용하는 것이 provider이다.

2. Consumer로 편리하게!

Consumer를 왜(why?) 사용하냐면,
보통 코드에서 context를 사용하게 되는데 해당 context를 build에서 알아서 찾아가지고 다른 메서드에 있어도 context를 끌고 올 수 있다!

해당 코드에서는 로그인 버튼과 Text부분에 대해서 다른 메서드에 만들었기에 context를 끌고 오지 못했다.
그래서 Consumer를 사용해서 가져와 provider를 사용할 수 있었다!

Consumer<JoinOrLogin>(
            builder: (context, joinOrLogin, child) =>
                RaisedButton(
                  child: Text(
                    joinOrLogin.isJoin ? "회원가입" :
                    "로그인",
                    style: TextStyle(fontSize: 24, color: Colors.white),
                  ),
                  color: joinOrLogin.isJoin ? Colors.red : Colors.indigo,

우선 Cosumer는 builder로 가져오는 것이 3가지이다.
( context, value(데이터) , child(위젯) )이다.
여기서 context가 없다면? build에서 context를 찾아 제공(provider)하게 해준다.

이와 같은 방법으로 다른 것들도 수정하였고, 결과적으로 4가지 부분이 모두 수정되었다!

코드는 뭐다!? Github에 다있다!
이제는 Firebase만 남았다..!