Flu tter 开发小技巧

作者：坚果

2022 年 8 月 24 日
广东
本文字数：2425 字
阅读完需：约 8 分钟

Dart：从 URL 获取主机、路径和查询参数

在 Dart 中，您可以按照以下步骤从给定的 URL 字符串中提取有用的信息：

1.从你的 URL 字符串构造一个 Uri 对象：

const url = "...";const uri = Uri.parse(url);

复制代码

2、现在，你可以通过 Uri 对象的各种属性得到你想要的。以下是最常用的：

origin：基本 URL（如下所示：protocol://host:port）
host：URL 的主机部分（域、IP 地址等）
方案：协议（http、https 等）
端口：端口号
路径：路径
pathSegments : URI 路径拆分为其段
query : 查询字符串
queryParameters : 查询被拆分成一个地图，方便访问

您可以在官方文档中找到有关 Uri 类的更多详细信息。

// main.dartvoid main() {  // an ordinary URL  const urlOne = 'https://www.JianGUO/some-category/some-path/';
  final uriOne = Uri.parse(urlOne);  print(uriOne.origin); // https://www.JianGUO  print(uriOne.host); // www.JianGUO  print(uriOne.scheme); // https  print(uriOne.port); // 443  print(uriOne.path); // /some-category/some-path/  print(uriOne.pathSegments); // [some-category, some-path]  print(uriOne.query); // null  print(uriOne.queryParameters); // {}
  // a URL with query paramters  const urlTwo =      'https://test.JianGUO/one-two-three?search=flutter&sort=asc';  final uriTwo = Uri.parse(urlTwo);  print(uriTwo.origin); // https://test.JianGUO  print(uriTwo.host); // test.JianGUO  print(uriTwo.scheme);  print(uriTwo.port); // 443  print(uriTwo.path); // /one-two-three  print(uriTwo.pathSegments); // [one-two-three]  print(uriTwo.query); // search=flutter&sort=asc  print(uriTwo.queryParameters); // {search: flutter, sort: asc}}

复制代码

在 Flutter 中使用 GetX 发出 GET/POST 请求

GetX 是一个功能强大的开源 Flutter 库，是当今最流行的，在 pub.dev 上有超过 10,000 个赞。尽管 GetX 提供了广泛的功能，但每个功能都包含在一个单独的容器中，并且只有您在应用程序中使用的那些会被编译。因此，它不会不必要地增加您的应用程序大小。这篇简短的文章向您展示了如何使用库提供的 GetConnect 类**发出 POST 和 GET 请求。**您会感到惊讶，因为要编写的代码量非常少。

1.要开始使用，您需要通过执行以下命令来安装GetX ：

flutter pub add get

复制代码

\2. 然后将其导入到您的 Dart 代码中：

import 'package:get/get.dart';

复制代码

\3. 下一步是创建 GetConnect 类的实例：

inal _connect = GetConnect();

复制代码

\4. 像这样向模拟 API 端点发送 Get 请求（感谢 Typi Code 团队）：

void _sendGetRequest() async {    final response =        await _connect.get('https://jsonplaceholder.typicode.com/posts/1');
    if (kDebugMode) {      print(response.body);    }}

复制代码

\5. 发出 Post 请求：

void _sendPostRequest() async {    final response = await _connect.post(      'https://jsonplaceholder.typicode.com/posts',      {        'title': 'one two three',        'body': 'four five six seven',        'userId': 1,      },    );
    if (kDebugMode) {      print(response.body);    }}

复制代码

完整示例：

// main.dartimport 'package:flutter/material.dart';import 'package:flutter/foundation.dart';import 'package:get/get.dart';
void main() {  runApp(const MyApp());}
class MyApp extends StatelessWidget {  const MyApp({Key? key}) : super(key: key);
  @override  Widget build(BuildContext context) {    return MaterialApp(      // Remove the debug banner      debugShowCheckedModeBanner: false,      title: 'KindaCode.com',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: const KindaCodeDemo(),    );  }}
class KindaCodeDemo extends StatefulWidget {  const KindaCodeDemo({Key? key}) : super(key: key);
  @override  State<KindaCodeDemo> createState() => _KindaCodeDemoState();}
class _KindaCodeDemoState extends State<KindaCodeDemo> {  // Initialize an instance of GetConnect  final _connect = GetConnect();
  // send Get request  // and get the response  void _sendGetRequest() async {    final response =        await _connect.get('https://jsonplaceholder.typicode.com/posts/1');
    if (kDebugMode) {      print(response.body);    }  }
  // send Post request  // You can somehow trigger this function, for example, when the user clicks on a button  void _sendPostRequest() async {    final response = await _connect.post(      'https://jsonplaceholder.typicode.com/posts',      {        'title': 'one two three',        'body': 'four five six seven',        'userId': 1,      },    );
    if (kDebugMode) {      print(response.body);    }  }
  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(title: const Text('KindaCode.com')),      body: Padding(        padding: const EdgeInsets.all(30),        child: Column(          crossAxisAlignment: CrossAxisAlignment.start,          children: [            ElevatedButton(                onPressed: _sendGetRequest,                child: const Text('Send GET Request')),            ElevatedButton(                onPressed: _sendPostRequest,                child: const Text('Send POST Request')),          ],        ),      ),    );  }}