🥍

Flutter API Request with Provider pattern

생성일

2021/05/11 12:33

태그

Flutter

속성

Dependency

flutter pub add http, provider
Bash
복사

Entity 추가

Response 를 통해 받아올 Entity를 미리 선언한다

Promotion.dart

class Promotion {
  final String brandName;
  final String brandLogoURL;
  final int boltPrice;
  final int boltEffectiveness;
  final int discountRate;
  final int priceMax;
  final int discountMax;
  final String description;

  Promotion({
    this.brandName,
    this.brandLogoURL,
    this.boltPrice,
    this.boltEffectiveness,
    this.discountRate,
    this.priceMax,
    this.discountMax,
    this.description
  });

  factory Promotion.fromJson(Map<String, dynamic> json) {
    return Promotion(
      brandName: json['id'],
      brandLogoURL: json["brandLogoURL"],
      boltPrice: json["boltPrice"],
      boltEffectiveness: json['boltEffectiveness'],
      discountRate: json['discountRate'],
      priceMax: json['priceMax'],
      discountMax: json['discountMax'],
      description: json['description'],
    );
  }
}
Dart
복사

Provider 구현

가장 트렌드(?)인 Provider 패턴으로 구현하고자 합니다.

이 부분에서 이슈가 있던 부분은 보통 자동 import 를 지원하지만 http 모듈의 경우 자동 import 되지 않는 부분이 있었습니다. 그런 경우

import 'package:http/http.dart' as http;
Dart
복사

직접 import 해서 사용할 수 있습니다.

PromotionProvider.dart

import 'dart:convert';
import 'package:chai_booster/Entity/Promotion.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class PromotionProvider with ChangeNotifier {

  List<Promotion> _promotions = [];

  List<Promotion> getPromotionList() {
    _fetchPromotion();
    return _promotions;
  }

  // Action
  void _fetchPromotion() async {
    final response = await http.get(Uri.parse('http://localhost:5001/chai-booster/asia-northeast3/api/booster/v1/promotions'));
    final List<Promotion> parsedResposne = jsonDecode(response.body).
    map<Promotion>((json) => Promotion.fromJson(json)).toList();

    _promotions.clear();
    _promotions.addAll(parsedResposne);

    notifyListeners();
  }
}
Dart
복사

HomePage.dart

import 'package:chai_booster/Pages/Tabs/BrandAlarmSettingPage.dart';
import 'package:chai_booster/Pages/Tabs/MorePage.dart';
import 'package:chai_booster/Pages/Tabs/PromotionsPage.dart';
import 'package:chai_booster/Providers/Auth/AuthProvider.dart';
import 'package:chai_booster/Providers/Promotion/PromotionProvider.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:provider/provider.dart';

class HomePage extends StatefulWidget {
  HomePage({
    Key key, this.title
  }) : super(key: key);

  final String title;

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  AuthProvider authProvider;

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    authProvider = Provider.of<AuthProvider>(context);

    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: [
          for (final tabItem in TabNavigationItem.items) tabItem.page,
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (int index) => setState(() => _currentIndex = index),
        items: [
          for (final tabItem in TabNavigationItem.items)
            BottomNavigationBarItem(
              icon: tabItem.icon,
              label: tabItem.title,
            )
        ],
      ),
    );
  }
}

class TabNavigationItem {
  final Widget page;
  final String title;
  final Icon icon;

  TabNavigationItem({
    @required this.page,
    @required this.title,
    @required this.icon,
  });

  static List<TabNavigationItem> get items => [
    TabNavigationItem(
      page: ChangeNotifierProvider<PromotionProvider>(
        create: (context) => PromotionProvider(),
        child: PromotionPage(),
      ),
      icon: Icon(Icons.money),
      title: "혜택",
    ),
    TabNavigationItem(
      page: BrandAlarmSettingPage(),
      icon: Icon(Icons.alarm),
      title: "알림",
    ),
    TabNavigationItem(
      page: MorePage(),
      icon: Icon(Icons.more),
      title: "더보기",
    ),
  ];
}
Dart
복사

코드가 길다. 하지만 중요한 부분은 아래 부분이다.

  static List<TabNavigationItem> get items => [
    TabNavigationItem(
      page: ChangeNotifierProvider<PromotionProvider>(
        create: (context) => PromotionProvider(),
        child: PromotionPage(),
      ),
      icon: Icon(Icons.money),
      title: "혜택",
    ),
Dart
복사

PromotionPage 에서 state 를 사용할 예정이기 때문에, PromotionPage 를 ChangeNotifierProvider로 감싸준다.

PromotionPage.dart

import 'package:chai_booster/Entity/Promotion.dart';
import 'package:chai_booster/Pages/HomePage.dart';
import 'package:chai_booster/Providers/Promotion/PromotionProvider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class PromotionPage extends StatefulWidget {
  PromotionPage({
    Key key, this.title
  }) : super(key: key);

  final String title;

  @override
  _PromotionPageState createState() => _PromotionPageState();
}

class _PromotionPageState extends State<PromotionPage> {
  Future<Promotion> promotions;


  @override
  Widget build(BuildContext context) {
    final promotionProvider = Provider.of<PromotionProvider>(context);
    promotionProvider.getPromotionList();

    return Scaffold(
      appBar: AppBar(
        title: Text('혜택'),
        centerTitle: false,
      ),
      body: Center(
        child: SizedBox(
          child: ElevatedButton(
            onPressed: () => {
            },
            child: Text('혜택 목록'),
          ),
          width: double.infinity,
          height: 44,
        ),
      ),
    );
  }
}
Dart
복사

실제 운영할 서비스에서는 이렇게 하면 안된다.

문제가 되는 부분은

promotionProvider.getPromotionList();
Dart
복사

왜?

build 함수 안에있다는 뜻은, widget 이 그려질때마다 API request가 발생합니다. 불필요한 과도한 요청이 발생하고 그에 따라 앱이 버벅일 수 있습니다.

API Request 를 발생하는 시점, 로직

isLoaded 라는 변수... 흠... 찝찝하다. reload 할 타이밍이 명확하지 않기 때문