Flutter之GetConnect 初体验

1,626 阅读2分钟
  1. 首先创建一个BaseProvider 继承自 GetConnect 如下:
import 'package:get/get_connect/http/src/request/request.dart';

// ignore: non_constant_identifier_names, constant_identifier_names
const SERVER_API_URL = 'https://fub.thelightco.net/';

class BaseProvider extends GetConnect {
  @override
  void onInit() {
    httpClient.baseUrl = SERVER_API_URL;
    // 请求拦截
    httpClient.addRequestModifier<void>((request) {
      request.headers['token'] =
          '6e9c9ba1f56d406fb35926475906f9215f0a099abae929eb041cb59900de955a';
      return request;
    });

    httpClient.addAuthenticator<dynamic>((Request request) async {
      // Set the header
      request.headers['token'] =
          '6e9c9ba1f56d406fb35926475906f9215f0a099abae929eb041cb59900de955a';
      return request;
    });

    // 响应拦截
    httpClient.addResponseModifier((request, response) {
      return response;
    });
    super.onInit();
  }
}

2.创建一个业务provider,这里我是创建了一个HomeProvider:

  Future<Response<List<HomePageListResponseEntity>>> getNews();
  Future<Response<HomePageListResponseEntity>> getUser();
}

///数据model
class HomeProvider extends BaseProvider implements IHomeProvider {
  // 新闻分页
  @override
  Future<Response<List<HomePageListResponseEntity>>> getNews() async {
    super.onInit();
    print(httpClient.baseUrl);
    var response = await get("api/v1/user/info/label/all");
    var data = BaseModel.fromJson(response.body);
    List list = data.data;
    List<HomePageListResponseEntity> tmpList =
        list.map((e) => HomePageListResponseEntity.fromJson(e)).toList();
    return Response(
      statusCode: response.statusCode,
      statusText: response.statusText,
      body: tmpList,
    );
  }

  @override
  Future<Response<HomePageListResponseEntity>> getUser() async {
    //请求user数据
    var response = await get("api/v1/user/info/label/all");
    var data = HomePageListResponseEntity.fromJson(response.body);
    return Response(
      statusCode: response.statusCode,
      statusText: response.statusText,
      body: data,
    );
  }
}

///通过数据库获取数据
abstract class IHomeRepository {
  Future<List<HomePageListResponseEntity>> getNewsList();
}

class HomeRepository implements IHomeRepository {
  HomeRepository({required this.provider});
  final HomeProvider provider;

  @override
  Future<List<HomePageListResponseEntity>> getNewsList() async {
    final response = await provider.getNews();
    if (response.status.hasError) {
      return Future.error(response.statusText!);
    } else {
      return response.body!;
    }
  }
}

3.通过bindings加路由的形式初始化controller

  @override
  void dependencies() {
    // Get.lazyPut<IHomeProvider>(() => HomeProvider());
    // Get.lazyPut<IHomeRepository>(() => HomeRepository(provider: Get.find()));
    // Get.lazyPut(() => NewsController(repository: Get.find()));
    Get.lazyPut(() =>
        NewsController(repository: HomeRepository(provider: HomeProvider())));
  }
}
============================控制器部分==============================
class NewsController extends SuperController<List<HomePageListResponseEntity>> {
  NewsController({required this.repository});

  final HomeRepository repository;

  @override
  void onInit() {
    super.onInit();

    //Loading, Success, Error handle with 1 line of code
    // append(() => repository.getNews);
  }

  // 拉取新闻列表
  Future<void> getNewsPageList() async {
    append(() => repository.getNewsList);

    // append(() => repository.getNewsList());
    // var res = await repository.getNewsList();
    // print('getNewsPageList====$res');
  }
  

  @override
  void onReady() {
    print('The build method is done. '
        'Your controller is ready to call dialogs and snackbars');
    super.onReady();
  }

  @override
  void onClose() {
    print('onClose called');
    super.onClose();
  }

  @override
  void didChangeMetrics() {
    print('the window size did change');
    super.didChangeMetrics();
  }

  @override
  void didChangePlatformBrightness() {
    print('platform change ThemeMode');
    super.didChangePlatformBrightness();
  }

  @override
  Future<bool> didPushRoute(String route) {
    print('the route $route will be open');
    return super.didPushRoute(route);
  }

  @override
  Future<bool> didPopRoute() {
    print('the current route will be closed');
    return super.didPopRoute();
  }

  @override
  void onDetached() {
    print('onDetached called');
  }

  @override
  void onInactive() {
    print('onInative called');
  }

  @override
  void onPaused() {
    print('onPaused called');
  }

  @override
  void onResumed() {
    print('onResumed called');
  }
}
============================main函数 + 路由==============================
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // home: const MyHomePage(title: 'Flutter Demo Home Page'),
      getPages: AppPages.routes,
      initialRoute: AppPages.INITIAL,
      builder: EasyLoading.init(),
    );
  }
}
============================ 路由==============================
part 'app_routes.dart';

class AppPages {
  AppPages._();

  static const INITIAL = Routes.HOME;

  static final routes = [
    GetPage(
      name: '/',
      page: () => const NewsView(),
      bindings: [HomeBinding()],
      participatesInRootNavigator: true,
      preventDuplicates: true,
      children: [],
    ),
  ];
}

part of 'app_pages.dart';

abstract class Routes {
  static const HOME = '/home';
  static const COUNTRY = '/country';
  static const DETAILS = '/details';

  static const DASHBOARD = '/dashboard';
  static const PROFILE = '/profile';
  static const PRODUCTS = '/products';
}
============================page页面==============================
lass NewsView extends GetView<NewsController> {
  const NewsView({Key? key}) : super(key: key);

  _buildListView(List<HomePageListResponseEntity>? state) {
    var count = state?.length ?? 0;
    return ListView.separated(
      itemCount: state != null ? count : 0,
      itemBuilder: (context, index) {
        final HomePageListResponseEntity item = state![index];
        return ListTile(
          onTap: () => null,
          title: Text(item.name ?? 'no name'),
          trailing: Text("分类 ${item.itemType}"),
        );
      },
      separatorBuilder: (BuildContext context, int index) {
        return Divider();
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetConnect Page"),
      ),
      body: controller.obx(
        (state) => _buildListView(state),
        onEmpty: Text("onEmpty"),
        onLoading: Center(
          child: Column(
            children: [
              Text("没有数据"),
              ElevatedButton(
                onPressed: () async {
                  await controller.getNewsPageList();
                },
                child: Text('拉取数据'),
              ),
            ],
          ),
        ),
        onError: (err) => Text("onEmpty" + err.toString()),
      ),
    );
  }
}

4.需要注意的地方是provider和controller之间的传值要正确对应

image.png

image.png

image.png

image.png