Flutter动态基础URL配置插件dynamic_base_url的使用

Flutter动态基础URL配置插件dynamic_base_url的使用

在本指南中,我们将详细介绍如何使用dynamic_base_url插件来动态更改Dio客户端或HTTP客户端的基础URL。

📚 指南

步骤 1: 初始化dynamic_base_url

首先,在main()方法中初始化dynamic_base_url

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  /// 初始化基础URL
  BASEURL.init(
    debug: 'https://dummyjson.com', // 调试环境的基础URL
    prod: 'https://jsonplaceholder.typicode.com', // 生产环境的基础URL
  );

  runApp(const MyApp());
}

步骤 2: 在MaterialApp.builder中添加BaseWrapper

接下来,在MaterialApp中使用builder属性,并将BaseWrapper添加到构建链中。

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        /// 设置 [BaseWrapper]
        return BaseWrapper(
          builder: (context) => child!,
          onBaseUrlChanged: () {},
        );
      },
      home: const BaseURLUseExample(),
    );
  }
}

步骤 3: 使用BASEURL.URL进行请求

在发起网络请求时,可以使用BASEURL.URL作为基础URL。

直接使用

_dio.get("${BASEURL.URL}/todos/1");

使用Dio

/// 将 [BASEURL.URL] 作为基础URL
_dio.options.baseUrl = BASEURL.URL;

如果你使用了服务定位器get_it

可以在BaseWrapper的回调函数中更改客户端的基础URL。

return BaseWrapper(
  builder: (context) => child!,
  onBaseUrlChanged: () {
    /// 更改 [baseUrl]
    GetIt.instance<Dio>().options.baseUrl = BASEURL.URL;
  },
);

步骤 4: 打开基础URL设置(可选)

你可以通过浮动气泡打开基础URL设置界面。这一步不是必须的,但可以提供更好的用户体验。

示例代码

以下是一个完整的示例代码,展示了如何使用dynamic_base_url插件。

import 'package:dio/dio.dart';
import 'package:dynamic_base_url/dynamic_base_url.dart';
import 'package:flutter/material.dart';

void main() {
  /// 初始化基础URL
  BASEURL.init(
    debug: 'https://dummyjson.com',
    prod: 'https://jsonplaceholder.typicode.com',
  );

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        /// 设置 [BaseWrapper]
        return BaseWrapper(
          builder: (context) => child!,
          onBaseUrlChanged: () {},
        );
      },
      home: const BaseURLUseExample(),
    );
  }
}

/// 基础URL使用示例
class BaseURLUseExample extends StatefulWidget {
  const BaseURLUseExample({Key? key}) : super(key: key);

  [@override](/user/override)
  State<BaseURLUseExample> createState() => _BaseURLUseExampleState();
}

class _BaseURLUseExampleState extends State<BaseURLUseExample> {
  final Dio _dio = Dio();

  [@override](/user/override)
  void initState() {
    /// 将 [BASEURL.URL] 作为基础URL
    _dio.options.baseUrl = BASEURL.URL;
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FutureBuilder(
          future: _dio.get("/todos/1"),
          builder: (BuildContext context, AsyncSnapshot<Response<dynamic>> snapshot) {
            if (snapshot.hasData) {
              return Text(snapshot.data.toString());
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

更多关于Flutter动态基础URL配置插件dynamic_base_url的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动态基础URL配置插件dynamic_base_url的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用dynamic_base_url插件的一个示例。这个插件允许你在运行时动态更改API的基础URL,非常适合需要在开发、测试和生产环境之间切换的应用。

首先,你需要在你的pubspec.yaml文件中添加dynamic_base_url依赖:

dependencies:
  flutter:
    sdk: flutter
  dynamic_base_url: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来,我们来看如何在代码中使用这个插件。

  1. 配置基础URL

在你的应用的主入口文件(通常是main.dart)中,配置基础URL。这里我们假设你有两个环境:开发环境和生产环境。

import 'package:flutter/material.dart';
import 'package:dynamic_base_url/dynamic_base_url.dart';
import 'package:your_app/services/api_service.dart';  // 假设你有一个API服务文件

void main() {
  // 设置初始的基础URL为开发环境
  DynamicBaseUrl.instance.baseUrl = 'https://dev.yourapi.com';

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  void _switchToProduction() {
    // 切换到生产环境的基础URL
    DynamicBaseUrl.instance.baseUrl = 'https://prod.yourapi.com';
    // 这里可以添加一些UI反馈,比如Snackbar
  }

  void _switchToDevelopment() {
    // 切换回开发环境的基础URL
    DynamicBaseUrl.instance.baseUrl = 'https://dev.yourapi.com';
    // 同样可以添加UI反馈
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Base URL Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _switchToProduction,
              child: Text('Switch to Production'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _switchToDevelopment,
              child: Text('Switch to Development'),
            ),
          ],
        ),
      ),
    );
  }
}
  1. 在API服务中使用动态基础URL

现在,在你的API服务文件中,你可以使用DynamicBaseUrl.instance.baseUrl来构建你的API请求URL。

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:dynamic_base_url/dynamic_base_url.dart';

class ApiService {
  Future<Map<String, dynamic>> fetchData() async {
    String url = '${DynamicBaseUrl.instance.baseUrl}/your-endpoint';

    try {
      final response = await http.get(Uri.parse(url));
      if (response.statusCode == 200) {
        return jsonDecode(response.body);
      } else {
        throw Exception('Failed to load data');
      }
    } catch (e) {
      throw Exception(e.toString());
    }
  }
}
  1. 在UI中使用API服务

在你的UI组件中,你可以实例化ApiService并调用它的方法来获取数据。

class DataScreen extends StatefulWidget {
  @override
  _DataScreenState createState() => _DataScreenState();
}

class _DataScreenState extends State<DataScreen> {
  Future<Map<String, dynamic>>? futureData;

  @override
  void initState() {
    super.initState();
    futureData = _fetchData();
  }

  Future<Map<String, dynamic>> _fetchData() async {
    ApiService apiService = ApiService();
    return await apiService.fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Data Screen'),
      ),
      body: Center(
        child: FutureBuilder<Map<String, dynamic>>(
          future: futureData,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                // 显示数据,这里假设返回的数据是一个Map
                return ListView.builder(
                  shrinkWrap: true,
                  itemCount: snapshot.data?.length ?? 0,
                  itemBuilder: (context, index) {
                    Map<String, dynamic> item = snapshot.data!.cast<String, dynamic>()!
                        .entries.elementAt(index).value
                        .cast<String, dynamic>();
                    return ListTile(
                      title: Text('${item.keys.elementAt(0)}: ${item.values.elementAt(0)}'),
                    );
                  },
                );
              }
            } else {
              return CircularProgressIndicator();
            }
          },
        ),
      ),
    );
  }
}

以上代码展示了如何在Flutter应用中集成和使用dynamic_base_url插件来动态配置API的基础URL。希望这对你有所帮助!

回到顶部