如何使用flutter_bloc包從api獲取數據

Question

單擊按鈕后如何從api獲取數據。 基本上有兩個屏幕 HomePage 和 SettingsPage，每個頁面都有一個單獨的塊和一個存儲庫。 主頁是啟動屏幕，無需單擊任何按鈕即可自動獲取 api，在設置頁面中，有兩個單選按鈕和一個凸起按鈕。 每當我選擇任何單選按鈕，然后單擊凸起按鈕時，它應該在 api 鏈接上添加該單選按鈕值，並在主頁上獲取和加載該特定數據。 意味着 HomePage 已經有 HomeBloc.dart 但在設置頁面中單擊凸起按鈕后如何傳遞數據並再次加載到主頁。 我已經檢查了 github 中的所有示例或官方頁面中的文檔，但不幸的是沒有得到類似類型的示例。

Answer 1

您不使用 flutter_bloc 發出 API 請求。 您使用 http.dart。

示例（登錄控制器）

import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;
import 'package:pmd_mobile/model/api_route.dart';

class LoginController {
  static Future<http.Response> login(
      {@required String email, @required String password}) async {
    var params = {
      'email': email,
      'password': password,
    };

    var response = await http.post(ApiRoute.LOGIN,
        body: json.encode(params));
    return response;
  }
}

然后你在你的集團內部調用它（LoginBloc）

class LoginBloc extends Bloc<LoginEvent, LoginState> {
  final BuildContext context;
  final UserRepository userRepository;
  final AuthBloc authBloc;

  LoginBloc(
      {@required this.context,
      @required this.userRepository,
      @required this.authBloc})
      : assert(userRepository != null),
        assert(authBloc != null);

  LoginState get initialState => LoginInitial();

  @override
  Stream<LoginState> mapEventToState(LoginEvent event) async* {
    if (event is LoginButtonPressed) {
      yield LoginProcessing();

      await Future.delayed(const Duration(milliseconds: 250));

      try {
        var loginResponse =
            await _attemptLogin(userRepository, event.email, event.password);

        if (loginResponse['data']) {
          yield LoginInitial();
        } else {
          yield LoginFailure(message: 'Login failed.');
        }
      } catch (error, stackTrace) {
        print(error);
        print(stackTrace);

        await Future.delayed(const Duration(seconds: 1));
        yield LoginFailure(
            message: 'Login failed. Please check your internet connection.');
      }
    }
  }
}

_attemptLogin(
    UserRepository userRepository, String email, String password) async {
  final response = await userRepository.authenticate(
    email: email,
    password: password,
  );

  return json.decode(response.body);
}