Flutter URL输入验证插件url_textformfield的使用

Flutter URL输入验证插件url_textformfield的使用

Textformfield 设计用于输入URL，并且可以通过选项添加前置和后置文本，分别附加在输入内容的开头和结尾。

开始使用

在你的项目的 pubspec.yaml 文件中添加此依赖项：

dependencies:
  url_textformfield: ^1.0.0

使用方法

首先，导入包：

import 'package:url_textformfield/url_textformfield.dart';

然后，使用该组件：

[@override](/user/override)
Widget build(BuildContext context) {
  return UrlTextFormField(
    focusNode: ctrlFocusNode,  
    padding: const EdgeInsets.all(10),
    onChanged: (val) {},
    leadingText: 'https://',
    suffixIcon: const Icon(
      Icons.check,
      color: Colors.green,
    ),
    trailingText: ".com",
  );
}

示例

贡献

欢迎提交拉取请求。对于重大更改，请先打开一个问题讨论你想要进行的更改。


### 完整示例代码

```dart
import 'package:flutter/material.dart';
import 'package:url_textformfield/url_textformfield.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Url TextFormField Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final FocusNode ctrlFocusNode = FocusNode();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Url TextFormField Example'),
      ),
      body: Column(
        children: [
          const SizedBox(height: 70),
          UrlTextFormField(
            focusNode: ctrlFocusNode,
            padding: const EdgeInsets.all(10),
            onChanged: (val) {},
            leadingText: 'https://',
            trailingText: ".com",
          )
        ],
      ),
    );
  }
}

更多关于Flutter URL输入验证插件url_textformfield的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter URL输入验证插件url_textformfield的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，url_textformfield 是一个用于输入和验证URL的插件。它提供了一个带有内置URL验证功能的文本输入字段。以下是使用 url_textformfield 插件的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 url_textformfield 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  url_textformfield: ^1.0.1  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的Dart文件中导入 url_textformfield 包：

import 'package:url_textformfield/url_textformfield.dart';

3. 使用 UrlTextFormField

在你的 Form 中使用 UrlTextFormField，它和普通的 TextFormField 类似，但会自动验证输入的URL格式是否有效。

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();
  String _url = '';

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          UrlTextFormField(
            decoration: InputDecoration(
              labelText: 'Enter URL',
              hintText: 'https://example.com',
            ),
            onSaved: (String? value) {
              _url = value ?? '';
            },
            validator: (String? value) {
              if (value == null || value.isEmpty) {
                return 'Please enter a URL';
              }
              return null;  // 如果URL格式有效，返回null
            },
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                _formKey.currentState!.save();
                // 处理URL
                print('URL: $_url');
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

4. 运行应用

现在你可以运行你的应用，并尝试在 UrlTextFormField 中输入URL。如果输入的URL格式无效，它会显示错误消息。

5. 自定义验证

UrlTextFormField 已经内置了URL格式的验证，但你可以通过 validator 参数进一步自定义验证逻辑。例如，你可以检查URL是否以 http:// 或 https:// 开头：

validator: (String? value) {
  if (value == null || value.isEmpty) {
    return 'Please enter a URL';
  }
  if (!value.startsWith('http://') && !value.startsWith('https://')) {
    return 'URL must start with http:// or https://';
  }
  return null;
},
回到顶部