> For the complete documentation index, see [llms.txt](https://docs.iotcentral.in/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.iotcentral.in/docs/flutterflow/how-to-import-widget-ionto-flutterflow.md).

# How to import Widget ionto Flutterflow

## Including the otp\_autofill package in your FlutterFlow app

1. Open the `pubspec.yaml` file in your FlutterFlow project.
2. Add the following line under the `dependencies` section:

```makefile
Copy codeotp_autofill: ^2.1.0
```

1. Save the `pubspec.yaml` file.
2. In the terminal, run the following command to install the package:

```csharp
Copy codeflutter pub get
```

This will install the `otp_autofill` package and add it to your project.

Once the package is installed, you can use it in your Flutter code by importing it at the top of your Dart file:

```python
Copy codeimport 'package:otp_autofill/otp_autofill.dart';
```

You can then use the package's APIs to implement OTP autofill in your FlutterFlow app. For example, you can use the `OtpAutofillTextField` widget to display a text field that supports OTP autofill.

## example

Here's an example of how you can use the `OtpAutofillTextField` widget in a FlutterFlow app to implement OTP autofill:

```java
Copy codeimport 'package:flutter/material.dart';
import 'package:otp_autofill/otp_autofill.dart';

class MyOtpAutofillScreen extends StatefulWidget {
  @override
  _MyOtpAutofillScreenState createState() => _MyOtpAutofillScreenState();
}

class _MyOtpAutofillScreenState extends State<MyOtpAutofillScreen> {
  final OtpAutofillTextField _otpTextField = OtpAutofillTextField(
    length: 6,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('OTP Autofill'),
      ),
      body: Center(
        child: _otpTextField,
      ),
    );
  }
}
```

This code creates a simple screen with an `OtpAutofillTextField` widget that displays a text field with a length of 6 characters. When the user focuses on the text field, the system will automatically show the OTP autofill UI, allowing the user to select an OTP from a list of received OTPs or to manually enter the OTP.

You can customize the appearance and behavior of the `OtpAutofillTextField` widget by setting its properties. For example, you can set the `keyboardType` property to specify the type of keyboard that should be displayed when the text field is focused, or you can set the `onOtpChanged` callback to be notified when the OTP is changed by the user or by the autofill system.