smart_autocomplete 1.2.3 smart_autocomplete: ^1.2.3 copied to clipboard
Smart Autocompletes that completes that completes your sentence within the textfield only
Smart Autocomplete #
Smart Autocomplete is a Flutter package designed to provide intelligent autocomplete functionality to text input fields in your Flutter applications. With Smart Autocomplete, users can enjoy a seamless typing experience as the widget suggests and completes text based on provided suggestions.
Demo #
Visit here for demo
Features #
- Customizable: Smart Autocomplete offers various customization options to tailor the autocomplete behavior and appearance according to your application's needs.
- Async Support: Fetch suggestions asynchronously from a data source, ensuring smooth performance even with large datasets.
- Error Handling: Handle errors gracefully with customizable error messages or widgets.
- Loading Indicators: Display loading indicators while fetching suggestions asynchronously to provide feedback to users.
- Rich Suggestions: Render suggestions in a customizable widget, enabling rich UI experiences for users.
Then, run flutter pub get
to install the package.
Usage #
import 'package:flutter/material.dart';
import 'package:smart_autocomplete/smart_autocomplete.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Smart AutoComplete Demo',
darkTheme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.greenAccent, brightness: Brightness.dark),
useMaterial3: true,
),
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.greenAccent, brightness: Brightness.light),
useMaterial3: true,
),
home: const MyHomePage(title: 'Smart Auto Complete'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final TextEditingController controller = TextEditingController();
Future<List<String>> getSuggestions(String key) async {
await Future.delayed(const Duration(milliseconds: 500));
return chromeHistory.where((e) => e.toLowerCase().startsWith(key)).toList();
}
Future<String?> getAutoCompletion(String text) async {
if (text.isEmpty) {
return null;
}
await Future.delayed(const Duration(milliseconds: 500));
var input = text.toLowerCase();
var sortedOptions = chromeHistory
.where((option) => option.toLowerCase().startsWith(input))
.toList();
sortedOptions.sort((a, b) => a.length.compareTo(b.length));
if (sortedOptions.isNotEmpty) {
var completion = sortedOptions.first;
return completion;
} else {
return null;
}
}
bool showSuggestions =
true; // Add a flag to control whether to show suggestions
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8.00),
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(10.0), // Adjust the value as needed
color: Theme.of(context)
.colorScheme
.onInverseSurface, // Adjust color as needed
),
child: SmartAutoCompleteWidget<String>(
controller: controller,
loadingWidgetBuilder: () => showSuggestions
? const SizedBox(
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(),
],
))
: const SizedBox.shrink(),
suggestionsBuilder: (context, data) {
if (!showSuggestions || data.isEmpty) {
return const SizedBox.shrink();
} else {
return LimitedBox(
maxHeight: 300,
child: ListView.builder(
shrinkWrap: true,
itemCount: data.length,
itemBuilder: (context, index) {
final item = data[index];
return ListTile(
title: Text(item),
onTap: () {
controller.text = item;
setState(() {
showSuggestions = false;
});
},
);
},
),
);
}
},
getSuggestions: getSuggestions,
onChanged: (f) {
setState(() {
showSuggestions = true;
});
},
getAutocompletion: getAutoCompletion),
)
],
),
),
),
// This trailing comma makes auto-formatting nicer for build methods.
);
}
}
List<String> chromeHistory = [
"Where is the Tower of Giza?",
"What are the steps to bake chocolate chip cookies?",
"How do you create a website? Can you provide a tutorial?",
];
Documentation #
Autocomplete #
Suggestions #
-
loadingWidgetBuilder:
Widget Function()
A builder function used to construct a widget to display while data for suggestions is being fetched asynchronously. If not provided, a default circular progress indicator is displayed.
Example:loadingWidgetBuilder: () { return Center( child: CircularProgressIndicator(), ); },
-
errorBuilder:
Widget Function(BuildContext context, Object error)
A builder function used to construct a widget to display when an error occurs while fetching data for suggestions. If not provided, a default error message is displayed.
Example:errorBuilder: (context, error) { return Text('An error occurred: $error'); },
-
suggestionsBuilder:
Widget Function(BuildContext context, List<T> data)
A builder function used to construct widgets based on the list of suggestions obtained from thegetSuggestions
callback.
Example:suggestionsBuilder: (context, suggestions) { return ListView.builder( itemCount: suggestions.length, itemBuilder: (context, index) { return ListTile( title: Text(suggestions[index]), onTap: () { // Handle selection logic }, ); }, ); },
-
getSuggestions:
GetSuggestionsCallback<T>
A callback function used to fetch suggestions based on a provided keyword or query from the textfield.
Example:getSuggestions: (String keyword) async { // Implement logic to fetch suggestions from a data source return ['apple','apricot','avocado']; },
-
getAutocompletion:
GetAutocompletionCallback<String>
A callback function used to fetch autocompletion for a given input text.
Example:getAutocompletion: (String inputText)async { // Suppose User has written inside textfield 'W' // then you can give recommendation like return 'What is Ram Mandir?' },
Null
is returned when there is no matchString
is returned when there is a match
Feature | getAutocompletion | getSuggestions |
---|---|---|
Usage | Fetch autocompletion for text typed inside the textfield. | Provide options or suggestions based on user input. |
Return Type | Future<String?> |
Future<List<T>> |
Invocation | Invoked as the user types inside the textfield. | Triggered when the suggestionBuilder widget requests data. |